https://github.com/florianbx/portfoliov3
High-performance Vue 3 portfolio with static site generation. Built with TypeScript, TailwindCSS v4, and optimized for Core Web Vitals. Features markdown blog, GitHub integration, and modern animations.
https://github.com/florianbx/portfoliov3
github-api motion-vue portfolio ssg tailwindcss-v4 vite-ssg vue3
Last synced: about 1 month ago
JSON representation
High-performance Vue 3 portfolio with static site generation. Built with TypeScript, TailwindCSS v4, and optimized for Core Web Vitals. Features markdown blog, GitHub integration, and modern animations.
- Host: GitHub
- URL: https://github.com/florianbx/portfoliov3
- Owner: FlorianBx
- Created: 2025-06-23T00:42:56.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-25T20:45:36.000Z (8 months ago)
- Last Synced: 2025-08-05T22:54:49.936Z (8 months ago)
- Topics: github-api, motion-vue, portfolio, ssg, tailwindcss-v4, vite-ssg, vue3
- Language: Vue
- Homepage: https://florianbeaumont.dev
- Size: 367 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio
A high-performance, statically generated portfolio and blog built with Vue 3, TypeScript, and modern web technologies. Optimized for Core Web Vitals and SEO.
## 🚀 Tech Stack
### Core Technologies
- **Vue 3** - Composition API with TypeScript for type safety
- **Vite** - Ultra-fast build tool with Hot Module Replacement
- **vite-ssg** - Static Site Generation for optimal performance
- **TailwindCSS v4** - Utility-first CSS framework with modern features
- **Motion-v** - Lightweight animation library (migrated from GSAP)
- **Pinia** - State management for Vue 3
### Development Tools
- **TypeScript** - Type safety and enhanced developer experience
- **Vue TSC** - TypeScript compiler for Vue single-file components
- **ESLint + Prettier** - Code quality and formatting
- **Vue DevTools** - Enhanced debugging capabilities
### Build Optimizations
- **Beasties** - Critical CSS inlining
- **Compression** - Gzip/Brotli compression for assets
- **Code Splitting** - Automatic bundle optimization
- **Source Maps** - Production debugging support
## 🏗️ Static Site Generation (SSG)
This portfolio leverages **vite-ssg** for Static Site Generation, providing several key benefits:
### Why SSG?
- **Lightning-fast loading** - Pre-rendered HTML eliminates runtime rendering delays
- **SEO optimization** - Search engines can easily crawl pre-rendered content
- **CDN-friendly** - Static files can be cached globally for instant access
- **Zero JavaScript required** - Content is accessible even with JS disabled
### SSG Configuration
- **Pre-rendering**: All routes are generated at build time
- **Dynamic routing**: Blog posts use file-based routing (`/blog/:slug`)
- **GitHub integration**: Contribution data and repositories are fetched during build
- **Sitemap generation**: Automatic XML sitemap creation for better SEO
## 📊 Core Web Vitals Performance
This portfolio is optimized for Google's Core Web Vitals metrics:
### Performance Optimizations
- **Static Site Generation** - Pre-rendered HTML for instant loading
- **Critical CSS inlining** - Above-the-fold styles load immediately
- **Image optimization** - AVIF format with multiple sizes
- **Code splitting** - Only load necessary JavaScript
- **Compression** - Gzip/Brotli for reduced file sizes
- **Lazy loading** - Deferred loading of non-critical resources
## 🎨 Features
### Blog System
- **Markdown-based** - Write posts in Markdown with frontmatter
- **Table of contents** - Auto-generated navigation
- **Anchor links** - Deep linking to headings
### Modern UX
- **Smooth animations** - Motion-v powered transitions
- **Responsive design** - Mobile-first approach
- **Dark mode ready** - TailwindCSS v4 theming support
- **Accessibility** - WCAG 2.1 compliant
## 📁 Project Structure
```
src/
├── components/ # Reusable Vue components
├── composables/ # Composition API logic
├── pages/ # File-based routing
├── posts/ # Markdown blog posts
├── stores/ # Pinia state management
└── types/ # TypeScript type definitions
```
### Key Files
- `vite.config.ts` - Build configuration and plugins
- `src/routes.ts` - Manual route definitions
- `src/composables/usePosts.ts` - Blog post processing
- `scripts/generate-sitemap.mjs` - SEO sitemap generation
## 🔧 Configuration
### SSG Options
```typescript
// vite.config.ts
ssgOptions: {
criticalCSS: false, // Handled by vite-plugin-beasties
}
```
### TailwindCSS v4
Latest version with modern features and improved performance. Configuration in `src/assets/css/main.css`.
### Motion-v Animation
Lightweight alternative to GSAP, configured in `src/composables/useMotionConfig.ts`.