Quick Stats
- Performance: 92/100
- Best Practices: 100/100
- SEO: 100/100
- Accessibility: 100/100
The Stack
- Framework: Astro (Island Architecture)
- UI Library: React (only where interaction is needed)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Content: Astro Content Collections (Markdown/MDX)
Why I Built This
This site serves as two things: a professional portfolio and a “Digital Garden.”
- Knowledge Retention: Whenever I encounter a technical hurdle or discover a new workflow, I document it here. This reduces future setup time and acts as a searchable “external brain.”
- Full Transparency: I write about the wins, the fails, and the discoveries. It’s a raw look at my engineering journey.
Why Not Next.js?
While Next.js is a powerful industry standard, I opted for Astro for several specific reasons:
- Weight & Performance: Next.js can be “heavy” for a content-focused site. Astro ships zero client-side JavaScript by default, which is why the Lighthouse scores are near-perfect.
- Cloud Agnostic: I wanted a site that isn’t tied to Vercel’s infrastructure. Using Astro allows me to deploy anywhere (Cloudflare Workers, Netlify, or VPS) with minimal configuration.
- SSG First: Since this is a portfolio and blog, I prioritized Static Site Generation. Astro’s Content Collections provide a superior developer experience for managing local Markdown files with full type-safety.
Key Features
- Search Bar: Quickly find solutions to technical problems I’ve previously solved.
- Content Collections: Strict schema validation for all blog posts.
- Brutalist Design: A clean, high-contrast aesthetic that focuses on content over clutter.
System Architecture
I organized this project to treat “Knowledge” as structured data. By using Astro’s Content Collections, I ensured that every blog post and project is type-safe and follows a strict schema.
Project Structure Overview
Here is how I’ve mapped out the directory to maintain scalability:
portfolio/├── astro.config.mjs├── LICENSE├── package.json├── pnpm-lock.yaml├── public│ ├── favicon.svg│ ├── fonts│ │ └── space-grotesk.ttf│ ├── images│ │ ├── blogs│ │ │ ├── agency-vs-specialist.webp│ │ │ ├── how-i-design-and-build-systems.webp│ │ │ ├── server-vs-edge.webp│ │ │ ├── who-i-am.webp│ │ │ └── why-work-with-me.webp│ │ ├── og-image.png│ │ ├── profile.jpg│ │ └── projects│ │ ├── bazarbhai.webp│ │ ├── portfolio.png│ │ └── waitlist.webp│ └── robots.txt├── README.md├── src│ ├── assets│ │ ├── arrow-card.svg│ │ ├── arrow.svg│ │ ├── blue-star-card.svg│ │ ├── demo│ │ │ ├── basic-mobile.png│ │ │ ├── basic.png│ │ │ └── thumbnail.png│ │ ├── hero-content.svg│ │ ├── hl.svg│ │ ├── idea.svg│ │ ├── item-one.svg│ │ ├── item-two.svg│ │ ├── logo-star.svg│ │ ├── mini-frame.svg│ │ ├── new.svg│ │ ├── pink-star.svg│ │ ├── red-star.svg│ │ ├── services│ │ │ ├── proto.svg│ │ │ ├── research.svg│ │ │ ├── ui.svg│ │ │ └── wire.svg│ │ ├── string.svg│ │ └── underline.svg│ ├── components│ │ ├── author-profile.tsx│ │ ├── bars.tsx│ │ ├── blog-card.tsx│ │ ├── button.tsx│ │ ├── call-to-action.tsx│ │ ├── featured-blogs.astro│ │ ├── footer.tsx│ │ ├── header.tsx│ │ ├── hero.tsx│ │ ├── portfolio.astro│ │ ├── reviews.tsx│ │ ├── search-bar.tsx│ │ ├── service.tsx│ │ └── tools.tsx│ ├── constants│ │ ├── my-tech-stack.ts│ │ ├── portfolio.ts│ │ ├── seo.ts│ │ ├── site.ts│ │ └── socials.ts│ ├── content│ │ ├── blogs│ │ │ ├── agency-vs-specialist.md│ │ │ ├── bazarbhai.md│ │ │ ├── how-i-design-and-build-systems.md│ │ │ ├── portfolio.md│ │ │ ├── server-vs-edge.md│ │ │ ├── trackflow.md│ │ │ ├── waitlist.md│ │ │ ├── who-am-i-as-developer.md│ │ │ └── why-companies-work-with-me.md│ │ └── config.ts│ ├── layouts│ │ ├── layout.astro│ │ └── post-layout.astro│ ├── lib│ │ ├── blogs.ts│ │ ├── formate-date.ts│ │ └── seo.ts│ ├── pages│ │ ├── blogs│ │ │ ├── index.astro│ │ │ └── [slug].astro│ │ └── index.astro│ ├── schema│ │ └── blog-schema.ts│ └── styles│ └── global.css└── tsconfig.jsonWhat’s Next?
Building this portfolio taught me that performance and beauty don’t have to be a trade-off. By choosing the right tools—like Astro for the foundation and Tailwind for the skin—I’ve built a platform that’s easy to maintain and incredibly fast to browse.
