Personal Website - Frutiger Aero Edition
A personal website built to explore Svelte while recreating the iconic Frutiger Aero aesthetic of the early 2000s. This project is an homage to the glossy, nature-inspired design language that defined Windows Vista, early iOS, and the optimistic tech designs of that era.
About the Project
This website serves as both a learning project and a nostalgic journey back to the "old web" era. It captures the essence of Frutiger Aero—that mix of sleek tech optimism and organic smoothness, complete with translucent panels, soft gradients, bubbly interfaces, and Comic Sans (yes, really).
The design philosophy embraces:
- Semi-transparent white panels with soft shadows
- Glossy, reflective surfaces and smooth curves
- Nature-inspired blues, greens, and oranges
- That distinctive early-2000s "corporate-but-whimsical" vibe
Tech Stack
- Svelte - A modern JavaScript framework that compiles to vanilla JS
- Rollup - Module bundler for building the application
- Svelte SPA Router - Client-side routing for single-page navigation
- Serve - Static file server for production
Getting Started
Prerequisites
- Node.js (v14 or higher recommended)
Installation
- Clone the repository
- Install dependencies:
npm install
Development
Run the development server with hot reloading:
npm run dev
Then open build/index.html in your browser, or serve the build directory:
npx serve build -p 3000
Production
Build and serve the production version:
npm run build
npm start
Access the site at http://localhost:3000
Project Structure
├── src/
│ ├── components/ # Svelte components
│ └── main.js # Application entry point
├── public/ # Static assets
├── build/ # Compiled output
└── rollup.config.js # Build configuration
Why This Aesthetic?
Frutiger Aero represents a nostalgic time—those years between childhood and early teens when the world felt simpler. It's the aesthetic of family computers, pre-loaded TV displays at electronics stores, and the glossy interfaces of Club Penguin, Moshi Monsters, and early Minecraft.
This project isn't just about recreating a visual style—it's about capturing the feeling of a more optimistic internet, when UI design thought the future would be clean, smooth, and just a little bit wet.
Deployment
This site is deployed on Vercel and automatically builds from the main branch.
