AarusPortfolio

November 1, 2025 ยท View on GitHub

Modern, performant portfolio built with Astro, featuring zero JavaScript by default and optimal performance.

AarusPortfolio Banner

Features

  • Static Site Generation: Lightning-fast load times
  • Zero JS by Default: Only hydrate what's needed
  • Content Collections: Type-safe project management
  • Dark Mode: Seamless theme switching
  • Optimized Fonts: Preloaded custom typography
  • Responsive Design: Mobile-first approach
  • Accessibility: WCAG compliant
  • SEO Optimized: Structured data and meta tags

Performance

  • Lighthouse Score: 100/100/100/100
  • Bundle Size: <50KB total JavaScript
  • First Contentful Paint: <1.2s
  • Time to Interactive: <2.5s

Tech Stack

  • Framework: Astro
  • Language: TypeScript
  • Styling: CSS with custom properties
  • Deployment: Vercel/Netlify ready

Getting Started

npm install
npm run dev
npm run build
npm run preview

Project Structure

src/
  components/       Reusable Astro components
  content/
    projects/       Project markdown files
  layouts/          Page layouts
  pages/            Route pages
  styles/           Global CSS
  utils/            Helper functions
public/             Static assets
astro.config.mjs    Astro configuration

Key Improvements from v2.0

  • 90% JavaScript Reduction: From 195KB to <50KB
  • Removed GSAP: Replaced with CSS animations
  • Build-time GitHub Stars: No client-side API calls
  • Component Architecture: Modular and maintainable
  • TypeScript: Type-safe content and props
  • Optimized Fonts: Preloaded and subsetted

Adding New Projects

Create a new .md file in src/content/projects/:

---
title: "Project Name"
description: "Project description"
tech: ["tech1", "tech2"]
github: "https://github.com/username/repo"
live: "https://example.com"
order: 1
---

Customization

  • Colors: Edit src/styles/variables.css
  • Typography: Modify font in src/styles/fonts.css
  • Animations: Update src/styles/animations.css

Commands

CommandAction
npm installInstalls dependencies
npm run devStarts local dev server at localhost:4321
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run astro ...Run CLI commands like astro add, astro check
npm run astro helpGet help using the Astro CLI

License

MIT License

Author

Aarav Gupta