A high-performance, modern portfolio website built with Astro 5, Bun, and TailwindCSS 4, featuring a stunning Bento Grid layout to showcase your projects.

• 🚀 Blazing Fast: Built with Astro 5 for optimal performance (zero JavaScript by default)
• 🎨 Modern Design: Professional 2026 color palette with glassmorphism effects
• 📱 Mobile-First: Fully responsive design that looks great on all devices
• 🎯 Bento Grid Layout: Flexible grid system with varying card sizes
• ♿ Accessible: Keyboard navigation and screen reader friendly
• 🎭 Smooth Animations: Subtle micro-animations for enhanced UX
• 🔧 Easy to Customize: Well-structured code with TypeScript support

• Framework: Astro 5
• Package Manager: Bun
• Styling: TailwindCSS 4
• Language: TypeScript
• Fonts: Inter (Google Fonts)

• Bun installed on your system

1. Clone the repository (or you're already here!)

2. Install dependencies:

   bun install

3. Start the development server:

   bun run dev

4. Open your browser and visit http://localhost:4321

Edit src/data/projects.ts to add your own projects:

export const projects: Project[] = [
  {
    id: 'unique-id',
    title: 'Your Project Name',
    description: 'A brief description of your project',
    tags: ['React', 'TypeScript', 'Node.js'],
    github: 'https://github.com/yourusername/project',
    link: 'https://your-project-demo.com',
    size: '2x1', // Options: '1x1', '2x1', '1x2', '2x2'
    featured: true, // Optional: highlights the project
  },
  // Add more projects...
];

Edit src/styles/global.css to change the color palette:

:root {
  --color-slate-dark: #2c3e50;
  --color-teal-deep: #0d9488;
  /* ... customize other colors */
}

1. Hero Section: Edit src/pages/index.astro

   • Update your name in the hero title
   • Modify the description
   • Adjust the CTA buttons

2. Header: Edit src/components/Header.astro

   • Change the logo/brand name
   • Modify navigation links

3. Footer: Edit src/components/Footer.astro

   • Update social media links
   • Change copyright information

The Bento Grid supports four card sizes:

• 1x1: Standard square card
• 2x1: Wide card (spans 2 columns)
• 1x2: Tall card (spans 2 rows)
• 2x2: Large card (spans 2 columns and 2 rows)

On mobile devices, all cards automatically collapse to single-column layout.

bun run build

bun run preview

1. Install Vercel CLI:

   bun add -g vercel

2. Deploy:

   vercel

1. Build command: bun run build
2. Publish directory: dist

See Astro's deployment guide for detailed instructions.

awesome-project/
├── src/
│   ├── components/
│   │   ├── BentoGrid.astro      # Main grid layout
│   │   ├── ProjectCard.astro    # Individual project card
│   │   ├── Header.astro         # Navigation header
│   │   └── Footer.astro         # Footer with social links
│   ├── layouts/
│   │   └── BaseLayout.astro     # Base HTML structure
│   ├── pages/
│   │   └── index.astro          # Homepage
│   ├── data/
│   │   └── projects.ts          # Project data
│   └── styles/
│       └── global.css           # Global styles & design system
├── public/                      # Static assets
├── astro.config.mjs            # Astro configuration
├── package.json
└── bun.lockb

This portfolio is optimized for maximum performance:

• ✅ Zero JavaScript by default (Astro's Islands Architecture)
• ✅ Optimized CSS (TailwindCSS 4)
• ✅ Fast font loading (Google Fonts with preconnect)
• ✅ Responsive images
• ✅ Target: 95+ Lighthouse score

• bun run dev - Start development server
• bun run build - Build for production
• bun run preview - Preview production build
• bun run astro check - Check for TypeScript errors

Feel free to customize this portfolio to your needs! If you find any issues or have suggestions, please open an issue.

MIT License - feel free to use this template for your own portfolio!

• Built with Astro
• Styled with TailwindCSS
• Powered by Bun
• Design inspired by 2026 professional trends

Made with ❤️ using Astro + Bun