{"id":44262709,"url":"https://github.com/florianbx/portfoliov3","last_synced_at":"2026-02-10T17:38:26.667Z","repository":{"id":306499321,"uuid":"1006767926","full_name":"FlorianBx/portfolioV3","owner":"FlorianBx","description":"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.","archived":false,"fork":false,"pushed_at":"2025-07-25T20:45:36.000Z","size":376,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-05T22:54:49.936Z","etag":null,"topics":["github-api","motion-vue","portfolio","ssg","tailwindcss-v4","vite-ssg","vue3"],"latest_commit_sha":null,"homepage":"https://florianbeaumont.dev","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FlorianBx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-23T00:42:56.000Z","updated_at":"2025-07-25T20:45:40.000Z","dependencies_parsed_at":"2025-07-26T03:56:12.499Z","dependency_job_id":null,"html_url":"https://github.com/FlorianBx/portfolioV3","commit_stats":null,"previous_names":["florianbx/portfoliov3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FlorianBx/portfolioV3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianBx%2FportfolioV3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianBx%2FportfolioV3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianBx%2FportfolioV3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianBx%2FportfolioV3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlorianBx","download_url":"https://codeload.github.com/FlorianBx/portfolioV3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianBx%2FportfolioV3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29309593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T16:09:25.305Z","status":"ssl_error","status_checked_at":"2026-02-10T16:08:52.170Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-api","motion-vue","portfolio","ssg","tailwindcss-v4","vite-ssg","vue3"],"created_at":"2026-02-10T17:38:25.862Z","updated_at":"2026-02-10T17:38:26.651Z","avatar_url":"https://github.com/FlorianBx.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio \n\nA high-performance, statically generated portfolio and blog built with Vue 3, TypeScript, and modern web technologies. Optimized for Core Web Vitals and SEO.\n\n\u003cimg width=\"1920\" height=\"1080\" alt=\"new\" src=\"https://github.com/user-attachments/assets/a9bb38f2-9166-408c-a76a-e9e4509585e7\" /\u003e\n\n\n## 🚀 Tech Stack\n\n### Core Technologies\n- **Vue 3** - Composition API with TypeScript for type safety\n- **Vite** - Ultra-fast build tool with Hot Module Replacement\n- **vite-ssg** - Static Site Generation for optimal performance\n- **TailwindCSS v4** - Utility-first CSS framework with modern features\n- **Motion-v** - Lightweight animation library (migrated from GSAP)\n- **Pinia** - State management for Vue 3\n\n### Development Tools\n- **TypeScript** - Type safety and enhanced developer experience\n- **Vue TSC** - TypeScript compiler for Vue single-file components\n- **ESLint + Prettier** - Code quality and formatting\n- **Vue DevTools** - Enhanced debugging capabilities\n\n### Build Optimizations\n- **Beasties** - Critical CSS inlining\n- **Compression** - Gzip/Brotli compression for assets\n- **Code Splitting** - Automatic bundle optimization\n- **Source Maps** - Production debugging support\n\n## 🏗️ Static Site Generation (SSG)\n\nThis portfolio leverages **vite-ssg** for Static Site Generation, providing several key benefits:\n\n### Why SSG?\n- **Lightning-fast loading** - Pre-rendered HTML eliminates runtime rendering delays\n- **SEO optimization** - Search engines can easily crawl pre-rendered content\n- **CDN-friendly** - Static files can be cached globally for instant access\n- **Zero JavaScript required** - Content is accessible even with JS disabled\n\n### SSG Configuration\n- **Pre-rendering**: All routes are generated at build time\n- **Dynamic routing**: Blog posts use file-based routing (`/blog/:slug`)\n- **GitHub integration**: Contribution data and repositories are fetched during build\n- **Sitemap generation**: Automatic XML sitemap creation for better SEO\n\n## 📊 Core Web Vitals Performance\n\nThis portfolio is optimized for Google's Core Web Vitals metrics:\n\n### Performance Optimizations\n- **Static Site Generation** - Pre-rendered HTML for instant loading\n- **Critical CSS inlining** - Above-the-fold styles load immediately\n- **Image optimization** - AVIF format with multiple sizes\n- **Code splitting** - Only load necessary JavaScript\n- **Compression** - Gzip/Brotli for reduced file sizes\n- **Lazy loading** - Deferred loading of non-critical resources\n\n\u003cimg width=\"1243\" height=\"937\" alt=\"Screenshot 2025-07-20 at 8 12 00 PM\" src=\"https://github.com/user-attachments/assets/7e5ffcf6-1a85-413e-bdb6-786c2a19c029\" /\u003e\n\n\n## 🎨 Features\n\n### Blog System\n- **Markdown-based** - Write posts in Markdown with frontmatter\n- **Table of contents** - Auto-generated navigation\n- **Anchor links** - Deep linking to headings\n\n### Modern UX\n- **Smooth animations** - Motion-v powered transitions\n- **Responsive design** - Mobile-first approach\n- **Dark mode ready** - TailwindCSS v4 theming support\n- **Accessibility** - WCAG 2.1 compliant\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/     # Reusable Vue components\n├── composables/    # Composition API logic\n├── pages/          # File-based routing\n├── posts/          # Markdown blog posts\n├── stores/         # Pinia state management\n└── types/          # TypeScript type definitions\n```\n\n### Key Files\n- `vite.config.ts` - Build configuration and plugins\n- `src/routes.ts` - Manual route definitions\n- `src/composables/usePosts.ts` - Blog post processing\n- `scripts/generate-sitemap.mjs` - SEO sitemap generation\n\n## 🔧 Configuration\n\n### SSG Options\n```typescript\n// vite.config.ts\nssgOptions: {\n  criticalCSS: false, // Handled by vite-plugin-beasties\n}\n```\n\n### TailwindCSS v4\nLatest version with modern features and improved performance. Configuration in `src/assets/css/main.css`.\n\n### Motion-v Animation\nLightweight alternative to GSAP, configured in `src/composables/useMotionConfig.ts`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianbx%2Fportfoliov3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorianbx%2Fportfoliov3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianbx%2Fportfoliov3/lists"}