This Website
Ongoing Development
Originally built during my studies, now continuing as a hobby project
Nuxt 3Vue.jsTailwind CSSTypeScriptFile-based Routing
About the Project
This website serves as a showcase for my development projects and technical skills. Built with Nuxt 3, it demonstrates modern web development practices and clean architecture.
The site was originally built with Vue 3 and Vue Router, but I migrated it to Nuxt 3 to leverage server-side rendering, better SEO, and simplified routing through file-based conventions.
You're currently viewing this very project!
Key Features
- Responsive design that works on all devices
- File-based routing with Nuxt pages directory
- Reusable components (ProjectCard, ProjectStatus)
- Composables for shared logic and data
- Dynamic project pages with individual content
- Tailwind CSS for rapid styling
- SEO-optimized with proper meta tags
- Dark mode support (inherited from base CSS)
Technical Journey
Original Stack
- Vue 3 with Composition API
- Vue Router for manual routing configuration
- Vite as build tool
- JSON file for project data
Migration to Nuxt 3
Refactored the entire application to use Nuxt 3 conventions:
- Replaced Vue Router with file-based routing
- Converted JSON data to TypeScript composables
- Created layouts for consistent page structure
- Implemented dedicated pages for each project
- Optimized for SSR and better SEO
Current Architecture
/pages- File-based routing/components- Reusable Vue components/composables- Shared logic and data/layouts- Page templates/assets- Styles and static content
Design Decisions
- Composables over JSON: Type-safe data management with better IDE support
- Dedicated pages: Each project gets its own page for detailed content
- Component-driven: Reusable ProjectCard and ProjectStatus components
- Tailwind CSS: Utility-first CSS for rapid development
- Scalable structure: Easy to add new projects without code changes
Technologies Used
Framework & Tools
- Nuxt 3
- Vue.js 3
- TypeScript
- Vite
Styling
- Tailwind CSS
- PostCSS
- Autoprefixer
- Custom CSS variables
What I Learned
- Nuxt 3 architecture and conventions
- Server-side rendering and static site generation
- File-based routing patterns
- Migrating from Vue Router to Nuxt
- Composables for shared state and logic
- SEO optimization techniques
- TypeScript in Vue 3 projects
- Component composition patterns
Fun fact: This very page you're reading is part of the project being described! It's a recursive portfolio that documents itself. 🎭