A modern portfolio website built with Astro, TypeScript, and microCMS. Features progressive section reveal, typing animations, responsive design, and zero-runtime CSS with light/dark theme support.
- Astro 5 with static output and Islands Architecture for optimal performance
- @astrojs/react for React Islands (interactive components)
- @astrojs/sitemap for SEO optimization
- TypeScript for type safety with strict mode
- Panda CSS for zero-runtime CSS-in-JS styling with atomic CSS generation
- Oxlint for fast linting and Oxfmt for code formatting
- microCMS as headless CMS for content management
- React libraries: react-typist-component (typing animations), @floating-ui/react (tooltips)
- Node.js >= 24
- pnpm package manager
MICRO_CMS_API_KEYenvironment variable
pnpm dev # Start Astro dev server with Panda CSS watch modeOpen http://localhost:4321 to view the site.
pnpm build # Generate Panda CSS, run type checks, and build static site
pnpm preview # Preview production build locallyGenerates static files in the dist/ directory with optimized CSS.
pnpm panda # Generate Panda CSS utilities and tokensThe styled-system/ directory contains auto-generated CSS utilities and design tokens.
pnpm lint # Run Oxlint checks
pnpm lint:fix # Fix auto-fixable issues
pnpm format # Format code with Oxfmt
pnpm lighthouce:ci # Run Lighthouse CI (requires build first)The site uses Astro's Islands Architecture with selective hydration for optimal performance:
- Astro Components (
.astro): Static components rendered at build time - React Islands (
.tsx): Interactive components with client-side hydration
Progressive section reveal pattern:
- Intro - Landing section with typing animation
- Works - Portfolio projects (index > 0)
- History - Work experience (index > 1)
- Skills - Technical skills (index > 2)
- Contacts - Contact information (index > 3)
Each section is conditionally rendered based on the index state managed in HomeClient.tsx React Island. Content is fetched from microCMS API during build time with TypeScript interfaces for all data models.
The project uses Panda CSS for zero-runtime styling with build-time optimization:
- Zero Runtime: All styles are generated at build time, eliminating CSS-in-JS runtime overhead
- Type Safety: Full TypeScript integration with design tokens and utilities
- Design Tokens: Centralized theme system with responsive breakpoints, colors, and typography
- Tree Shaking: Unused styles are automatically removed from the final bundle
- Theme Switching: Dynamic light/dark mode using CSS custom properties
- PostCSS Integration: Seamless integration with Astro build pipeline
panda.config.ts- Panda CSS configuration with design tokens and theme settingspostcss.config.cjs- PostCSS configuration for Panda CSS integrationsrc/styles/index.css- Global styles and CSS layer importsstyled-system/- Auto-generated CSS utilities and design tokens (gitignored)
src/
├── pages/ # Astro pages (data fetching at build time)
├── layouts/ # Base HTML layout
├── components/
│ ├── islands/ # React Islands (interactive: color theme, heading, home client)
│ ├── common/ # Shared UI components
│ ├── {section}/ # Section-specific components (intro, work, history, skill, contact, footer)
│ └── layout/ # Layout wrappers
├── hooks/ # React hooks (intersection observer, sibling index)
├── lib/ # API clients (microCMS, Google Analytics)
├── styles/ # Global CSS
└── types/ # TypeScript interfaces for API data
- Static Site Generation: Pre-rendered at build time with Astro for optimal loading speed
- Islands Architecture: Selective hydration with zero JavaScript by default
- Zero-Runtime CSS: No CSS-in-JS runtime overhead with Panda CSS atomic classes
- Code Splitting: Automatic code splitting for React Islands
- Tree Shaking: Unused code and styles automatically removed
- Lighthouse CI: Automated performance testing in CI/CD pipeline