_PORTFOLIO WEBSITE [3.1.0]
LIVE [3.1.0]PERSONAL PORTFOLIO BUILT WITH ASTRO 6 AND TAILWIND 4. FEATURES CYBERPUNK TERMINAL AESTHETIC, CONTENT COLLECTIONS, AND STATIC SITE GENERATION.
STACK: astro, tailwind css, typescript DATE: 2024.01.15
Overview
This portfolio website serves as a central hub for showcasing development work, writing articles, and making contact. Built with a focus on performance and aesthetic.
Technical Details
The site is built using Astro 6 with the Content Layer API for managing projects and articles. Tailwind 4 handles all styling with a terminal/cyberpunk design system defined entirely in CSS.
Key Features
- Static site generation for optimal performance
- Content collections with Zod schema validation
- CRT scanline effects and viewfinder decorations
- Blinking cursor animations
- Responsive design with mobile-first approach
Stack
- Framework: Astro 6.1
- Styling: Tailwind CSS 4
- Language: TypeScript
- Hosting: Vercel
Challenges
The main challenge was implementing the CRT aesthetic without JavaScript — all effects are pure CSS using repeating-linear-gradient, ::after pseudo-elements, and CSS keyframe animations.