A modern, responsive portfolio website built with Astro and React, showcasing cybersecurity projects, achievements, and technical blog posts.
| Category | Technologies |
|---|---|
| Framework | Astro with SSR |
| UI | React, Tailwind CSS |
| Components | Radix UI, Lucide Icons |
| 3D Graphics | Three.js, React Three Fiber |
| Deployment | Vercel |
| Analytics | PostHog |
- Dark/Light Mode — System-aware theme with manual toggle
- Animated Backgrounds — Custom grain shader effects and dot matrix animations
- Blog with MDX — Markdown content with tag filtering and syntax highlighting
- Achievement Sheets — Interactive modal cards for certifications and experience
- Contact Form — Powered by Resend API
- Responsive Design — Mobile-first with smooth animations
- SEO Optimized — Sitemap, robots.txt, and meta tags
src/
├── components/ # React & Astro components
│ ├── ui/ # Reusable UI primitives (Button, Sheet, etc.)
│ ├── Navbar.tsx # Navigation with theme toggle
│ ├── Grainient.tsx # Animated grain background
│ └── ...
├── content/
│ └── blog/ # MDX blog posts
├── layouts/ # Base HTML layouts
├── pages/ # Route pages
│ ├── index.astro # Home
│ ├── about.astro # About & tech stack
│ ├── projects/ # Project showcases
│ ├── blog/ # Blog listing & posts
│ └── ...
├── styles/ # Global CSS
└── lib/ # Utility functions
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewCreate a .env file for the contact form:
RESEND_API_KEY=your_resend_api_key