Preview Demo ✨ Read Blog ✨ Astro Theme ✨ Peerlist Spotlight

👉 🌐 vinitshahdeo.com 🌐 👈

Stellar Astro Dev Portfolio

Welcome to the repository that hosts the source code for my portfolio, designed to showcase my work, skills, and featured articles, leveraging Astro and Tailwind CSS. This is also available as the Stellar Astro Dev Portfolio Template.

The portfolio is live at vinitshahdeo.com and deployed on Netlify. This project is a free, open-source Astro theme that is both accessible and SEO-friendly. It draws inspiration from the Minimal Portfolio Template by Tim Witzdam. This template can serve as a foundation for your personal portfolio. Start by using the command npm init astro@latest --template vinitshahdeo/portfolio. Feel free to customize it to fit your personal style and requirements—learn more.

[!IMPORTANT] The source code is available under the MIT License, while the textual content and images are protected under CC BY-NC-SA 4.0.

🔥 Features

This website is designed to be performant, smooth, accessible, and SEO-friendly, boasting a perfect Lighthouse score. Check it out here: Lighthouse Report.

Here are the key features:

• 📱 Fully Responsive: Seamlessly adapts to any screen size for an optimal user experience.
• ⚡ Fast and SEO Optimized: Ensures quick loading times and higher search engine rankings. Incorporates comprehensive Open Graph meta tags for enhanced social media sharing.
• 🎨 Fully Customizable: Easily modify the template to match your personal style and requirements.
• 📄 Comprehensive Pages: Comes with pre-built Home, About, Now, and Featured pages.
• 🚀 Self-Host Ready: Easily deployable on hosting platforms like Netlify or Vercel.
• 📊 Google Analytics Integration: Simplifies the configuration with your measurement ID for insightful analytics.
• 🔍 Automated SEO Tools: Includes automatic generation of robots.txt and Sitemap for better search engine indexing and site navigation.
• 🤖 Dynamic GitHub Dashboard: Integrates a real-time OSS Insight widget to showcase your GitHub contributions and stats, providing an engaging overview of your open-source activity.

🧐 What's inside?

The portfolio contains four main pages:

• 🏠 Home: A welcome page with my brief introduction.
• 👤 About: Detailed information about me, my skills, and my experience.
• 📚 Featured: My thoughts, stories, and interviews.
• 📆 Now: What I'm doing now? — This page is inspired by Derek Sivers's /now page. It's a great way to share what you're up to now.

🌟 Perfect Lighthouse Score

This portfolio is designed to be performant and accessible, achieving a perfect score on Lighthouse. Check it out here: Lighthouse Report.

📱 Demo

You can preview the demo by scanning the QR code below or visiting my portfolio at vinitshahdeo.com. In case, you are not able to reach vinitshahdeo.com, please try vinitshahdeo.netlify.app.

🚀 Getting Started

To use this template, execute one of the following commands based on your package manager:

# For npm 6.x
npm create astro@latest --template vinitshahdeo/portfolio

# For npm 7+ (note the extra double-dash):
npm create astro@latest -- --template vinitshahdeo/portfolio

# For yarn users
yarn create astro --template vinitshahdeo/portfolio

Follow the steps in the subsequent sections for local setup instructions or open the source code in the codespace.

🛠️ Local Setup

1. Clone the repo

git clone https://github.com/vinitshahdeo/portfolio.git
cd portfolio

2. This requires Node 20 or higher.

nvm use

3. Install dependencies

npm i

4. Run the development server

npm run dev

[!TIP] For enhanced Astro support in Visual Studio Code, it's highly recommended to install the Astro VSCode extension. This extension provides useful features such as syntax highlighting, IntelliSense, code formatting, and more, significantly improving your development experience with the Stellar Astro Dev Portfolio template.

🧞 Commands

Before running these commands, ensure you have Node.js and npm installed on your system. All commands should be executed from the root directory of the project, using a terminal.

🎉 Contributing

Your contributions are most welcome! Here's how you can get started:

1. 📖 Check the Contributing Guidelines for details on how to contribute.
2. 🐛 Browse the Issues and help fix bugs or suggest enhancements. Submit your fixes via a pull request using the provided template.
3. 🎨 Submit a new color theme by following the New Color Theme Proposal issue template, then implement it and submit a pull request.

🌐 Deployment

Deploying your site is a breeze with seamless support for both Netlify and Vercel. Choose your preferred platform by clicking the buttons below. These options also automatically create a new repository on GitHub for you. For more details, explore the documentation:

1. Deploy your Astro Site to Vercel
2. Deploy your Astro Site to Netlify

Currently, this project is set up for deployment on Netlify. To switch to Vercel, update the adapter in astro.config.mjs after running npx astro add vercel.

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import icon from "astro-icon";

import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  integrations: [tailwind(), icon()],
  output: "hybrid",
  adapter: vercel()
  vite: {
    resolve: {
      alias: {
        "@styles": "/src/styles",
      },
    },
  },
});

📊 Google Analytics

To update your Google Analytics measurement ID, follow these steps in analytics.ts. For detailed instructions, refer to this guide. This setup includes optimization with @astrojs/partytown to prevent page rendering delays.

export const measurementId = "G-XXXXXXXX"; // Replace G-XXXXXXXX with your measurement ID.

[!NOTE] Please update your Google Site Verification token in analytics.ts.

export const googleSiteVerification = "YOUR-VERIFICATION-TOKEN";

🤖 GitHub Stats

The GitHub Stats available on the /now page are powered by the OSS Insight widget.

To display your GitHub stats, update your GitHub user ID and username in the config/github.ts file as shown below:

export const gitHubUserId = "20594326";
export const gitHubUserName = "vinitshahdeo";

[!TIP] You can find your user ID by hitting the following API endpoint: https://api.github.com/users/<your-username>. Replace <your-username> with your actual GitHub username.

Here's an example for user vinitshahdeo:

curl https://api.github.com/users/vinitshahdeo

This will return a JSON response containing your user ID among other details.

🏆 Launch

This Astro template was launched on Peerlist Project Spotlight and was nominated as both the Project of the Week and the Project of the Month by the Peerlist community. You can check out the launch details here.

A heartfelt thank you to everyone who upvoted and supported this project, making it the Project of the Month. Your support means the world to me!

🙏 Acknowledgment

This is inspired by Minimal Portfolio Template by Tim Witzdam. The /now page is inspired by the Now Page movement.

📝 License

The source code of this project is licensed under the MIT License - see the LICENSE file for details. The words and images are licensed under CC BY-NC-SA 4.0.

📫 Contact

For any queries, feel free to get in touch via Twitter (𝕏) or follow me on GitHub.

💙 Support

If you enjoyed this project, please consider giving it a star on GitHub. You can also help spread the word by sharing the blog post on 𝕏 (Twitter). Your support is greatly appreciated!

🏸 + 🍵 + 👨‍💻 = @vinitshahdeo