Personal Website Wireframe

A React-based personal website wireframe using the cyan theme from the greenfield project.

Features

• Cyan Theme: Beautiful cyan color scheme with animated background arcs
• Responsive Design: Works on desktop and mobile devices
• Wireframe Structure: Ready to be extended with your own content
• Modern Stack: Built with React 19, TypeScript, and Vite

Getting Started

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Build for production:

npm run build

Structure

• src/components/ - Reusable components (Header, Footer, BackgroundArcs)
• src/pages/ - Page components (HomePage)
• src/theme.tsx - Theme configuration with cyan color scheme
• src/global.css - Global styles and theme enhancements

Customization

This is a wireframe designed to be extended. You can:

1. Update the content in src/pages/HomePage.tsx
2. Modify the header navigation in src/components/Header.tsx
3. Add new pages and routes
4. Customize colors and styling in src/theme.tsx
5. Add new components as needed

Theme Colors

The cyan theme uses:

• Background: Dark teal (#051616)
• Accent: Cyan (#00f2ff)
• Surface: Semi-transparent dark teal
• Text: Light cyan/white tones