Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinitshahdeo/portfolio
Minimal Portfolio Template for Software Engineer using Astro and Tailwind CSS, optimized for accessibility, performance and SEO.
https://github.com/vinitshahdeo/portfolio
astro astro-template astro-theme hacktoberfest personal personal-website portfolio portfolio-website
Last synced: 28 days ago
JSON representation
Minimal Portfolio Template for Software Engineer using Astro and Tailwind CSS, optimized for accessibility, performance and SEO.
- Host: GitHub
- URL: https://github.com/vinitshahdeo/portfolio
- Owner: vinitshahdeo
- License: mit
- Created: 2024-06-28T14:27:57.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-11T14:04:24.000Z (about 1 month ago)
- Last Synced: 2024-11-11T15:19:05.012Z (about 1 month ago)
- Topics: astro, astro-template, astro-theme, hacktoberfest, personal, personal-website, portfolio, portfolio-website
- Language: Astro
- Homepage: https://vinitshahdeo.com
- Size: 66.5 MB
- Stars: 25
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
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](https://astro.build/) and [Tailwind CSS](https://tailwindcss.com/). This is also available as the [Stellar Astro Dev Portfolio](https://astro.build/themes/details/stellar-astro-dev-portfolio) Template.
[](https://app.netlify.com/sites/vinitshahdeo/deploys) [](https://astro.build/themes/details/stellar-astro-dev-portfolio)  [](https://github.com/prettier/prettier)
The portfolio is live at [vinitshahdeo.com](https://vinitshahdeo.com) and deployed on Netlify. This project is a **free**, **open-source** [Astro theme](https://astro.build/themes/details/stellar-astro-dev-portfolio) that is both accessible and SEO-friendly. It draws inspiration from the [Minimal Portfolio Template](https://astro.build/themes/details/minimal-portfolio-template/) by [Tim Witzdam](https://github.com/TimWitzdam). 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](https://vinitshahdeo.dev/create-stellar-developer-portfolio-astro-tailwind-css).
> [!IMPORTANT]
> **The source code is available under the [MIT License](./LICENSE), while the textual content and images are protected under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/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](https://lighthouse-metrics.com/lighthouse/checks/6476d271-f309-4ff3-aa53-3a6863acc0eb).
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](https://ogp.me/) 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`](https://vinitshahdeo.com/), [`About`](https://vinitshahdeo.com/about), [`Now`](https://vinitshahdeo.com/now), and [`Featured`](https://vinitshahdeo.com/featured) pages.
- π **Self-Host Ready**: Easily deployable on hosting platforms like [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/).
- π **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](https://next.ossinsight.io/widgets/official/compose-user-dashboard-stats/thumbnail.png?user_id=20594326&image_size=auto&color_scheme=dark) 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](https://vinitshahdeo.com/)**: A welcome page with my brief introduction.
- π€ **[About](https://vinitshahdeo.com/about/)**: Detailed information about me, my skills, and my experience.
- π **[Featured](https://vinitshahdeo.com/featured/)**: My thoughts, stories, and interviews.
- π **[Now](https://vinitshahdeo.com/now/)**: What I'm doing now? β This page is inspired by [Derek Sivers](https://nownownow.com/about)'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](https://lighthouse-metrics.com/lighthouse/checks/6476d271-f309-4ff3-aa53-3a6863acc0eb).
## π± Demo
You can preview the demo by scanning the QR code below or visiting my portfolio at [vinitshahdeo.com](https://vinitshahdeo.com). In case, you are not able to reach [vinitshahdeo.com](https://vinitshahdeo.com), please try [vinitshahdeo.netlify.app](https://vinitshahdeo.netlify.app).
## π Getting Started
To use this template, execute one of the following commands based on your package manager:
```bash
# 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](https://codespaces.new/vinitshahdeo/portfolio) in the codespace.
[](https://codespaces.new/vinitshahdeo/portfolio)
## π οΈ Local Setup
1. Clone the repo
```
git clone https://github.com/vinitshahdeo/portfolio.git
cd portfolio
```
2. This requires Node 20 or higher.
```bash
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](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). 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](https://astro.build/themes/details/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.
| Command | Action | Notes |
| :-------------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
| `npm install` | Installs all necessary dependencies. | This is the first command you should run after cloning the repository to install all the required packages. |
| `npm run dev` | Starts the local development server. | Access the site at `http://localhost:4321`. The server will automatically reload if you make any changes to the source files. |
| `npm run build` | Builds the site for production. | The output is stored in the `./dist/` directory. Use this command before deploying to ensure you're publishing the optimized version of your site. |
| `npm run lint` | Lints your code to identify and fix issues. | It's recommended to run this command before committing your changes to ensure code quality and consistency. |
## π Contributing
Your contributions are most welcome! Here's how you can get started:
1. π **Check the [Contributing Guidelines](CONTRIBUTING.md)** for details on how to contribute.
2. π **Browse the [Issues](https://github.com/vinitshahdeo/portfolio/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](https://github.com/vinitshahdeo/portfolio/issues/new?assignees=vinitshahdeo&labels=proposal%2C+theme&projects=&template=new-color-theme-proposal.md&title=%5BNew+Theme%5D+%3CTheme+Name%3E) issue template, then implement it and submit a pull request.
[](https://github.com/vinitshahdeo/portfolio/network/members)
## π Deployment
Deploying your site is a breeze with seamless support for both [Netlify](https://www.netlify.com/) and [Vercel](https://vercel.com/). 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](https://docs.astro.build/en/guides/deploy/vercel/)
2. [Deploy your Astro Site to Netlify](https://docs.astro.build/en/guides/deploy/netlify/)
[](https://app.netlify.com/start/deploy?repository=https://github.com/vinitshahdeo/portfolio) [](https://vercel.com/new/project?template=https://github.com/vinitshahdeo/portfolio)
Currently, this project is set up for deployment on **Netlify**. To switch to Vercel, update the adapter in [`astro.config.mjs`](./astro.config.mjs) after running `npx astro add vercel`.
```ts
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](./src/config/analytics.ts). For detailed instructions, refer to [this guide](https://support.google.com/analytics/answer/9539598?hl=en). This setup includes optimization with [@astrojs/partytown](https://docs.astro.build/en/guides/integrations-guide/partytown/) to prevent page rendering delays.
```typescript
export const measurementId = "G-XXXXXXXX"; // Replace G-XXXXXXXX with your measurement ID.
```
> [!NOTE]
> Please update your [Google Site Verification](https://developers.google.com/site-verification/v1/getting_started) token in [analytics.ts](./src/config/analytics.ts).
>
> ```ts
> export const googleSiteVerification = "YOUR-VERIFICATION-TOKEN";
> ```
## π€ GitHub Stats
The GitHub Stats available on the `/now` page are powered by the [OSS Insight](https://ossinsight.io/) widget.
[](https://github.com/vinitshahdeo)
To display your GitHub stats, update your GitHub user ID and username in the `config/github.ts` file as shown below:
```ts
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/`. Replace `` with your actual GitHub username.
Here's an example for user `vinitshahdeo`:
```sh
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](https://peerlist.io/vinitshahdeo/project/stellar-astro-dev-portfolio).
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](https://astro.build/themes/details/minimal-portfolio-template/) by [Tim Witzdam](https://github.com/TimWitzdam). The [`/now`](https://vinitshahdeo.com/now/) page is inspired by the [Now Page](https://sive.rs/nowff) movement.
## π License
The source code of this project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details. The words and images are licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/).
## π« Contact
For any queries, feel free to get in touch via [Twitter](https://x.com/vinit_shahdeo) (π) or follow me on [GitHub](https://github.com/vinitshahdeo).
[](https://github.com/vinitshahdeo/) [](https://twitter.com/Vinit_Shahdeo)
## π Support
[](https://github.com/vinitshahdeo/portfolio/stargazers)
If you enjoyed this project, please consider giving it a **star on GitHub**. You can also help **[spread the word](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fvinitshahdeo%2Fportfolio&text=Build%20your%20portfolio%20with%20Astro%20and%20Tailwind%20CSS.%20Here%27s%20a%20sleek%2C%20modern%2C%20highly%20customizable%20Astro%20template%20that%20is%20optimized%20for%20performance%20and%20SEO.%20)** by sharing the [blog post](https://vinitshahdeo.dev/create-stellar-developer-portfolio-astro-tailwind-css) on π (Twitter). Your support is greatly appreciated!
