Canvas hero code-rain effect with a spotlight reveal on hover
NuxtVueHTMLPortfolio
portfolio-emeric-guyon — Nuxt Portfolio Template
By emricooo
A freelance fullstack developer portfolio site built with Nuxt, featuring dark/light themes, French and English bilingual support, a canvas hero effect, and GSAP scroll animations.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
GSAP ScrollTrigger for word reveal, letter reveal, and fade scroll animations
Dark and light theme switching, persisted via cookie
French (default) and English bilingual support, with English paths prefixed by /en/
Responsive layout covering mobile, tablet, and desktop
Separation of components and data: homepage sections, project details, UI components, and the data directory
Template Details
This template is the source code for the personal portfolio site of developer Emeric Guyon, built with Nuxt and using Vue, TypeScript, Tailwind CSS, and GSAP. The page structure is concentrated in the app directory: components/home contains homepage sections such as Hero, About, Services, Skills, Projects, and Clients; components/project provides project detail components; there are also UI components (Badge, ThemeToggle), icon components, and application-level components such as AppNavigation, AppFooter, AppContact, and AppPageTransition. The composables directory provides reusable logic including useScrollAnimation, useTheme, useSeo, and useCustomCursor; pages includes the homepage and the projets/[slug] project detail page; the data directory stores project, skill, client, and hero code data; and i18n/locales provides French and English language files.
In terms of features, the hero uses a custom canvas code-rain effect with a spotlight reveal on hover; scroll animations are implemented via GSAP ScrollTrigger for word reveals, letter reveals, and fades; theme switching supports dark and light and persists to a cookie; bilingual support uses French as the default language, with English paths prefixed by /en/; and the layout is responsive for mobile, tablet, and desktop. The README also mentions section lazy loading, a canvas frame rate cap, and reduced-motion support.
Usage limitations: the repository is under the MIT license, and this version of the code may be used, modified, used commercially, and distributed for free, but the copyright notice and license notice must be retained when distributing. Third-party assets such as demo images, fonts, and icons must be checked separately for licensing, and external services such as domains and hosting may incur additional costs. The materials do not describe production deployment configuration or content management approach, so dependencies and asset sources should be confirmed before actual use.
NuxtVueHTMLPortfolio
Is it right for your project?
Use Cases
- Building a personal developer portfolio site to showcase projects, skills, and clients
- Learning how to integrate GSAP scroll animations and a canvas hero effect in Nuxt
- A reference implementation for dark/light theme switching and multilingual routing
- As a site foundation for freelancers to present services and project case studies
Suitable For
- Frontend or fullstack developers who need to quickly build a personal portfolio
- Developers who want a reference for the Nuxt + Vue + TypeScript + Tailwind CSS combination
- Personal site projects that need bilingual support and theme switching
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Run npm install to install dependencies, and npm run dev to start the development server, with the default address at http://localhost:3000
- 2
Build methods: npm run build generates an SSR build, and npm run generate generates a static site
- 3
Project data is located in the app/data directory, and language files are fr.json and en.json under i18n/locales
- 4
Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses and cannot be judged solely by the code's MIT license
- 5
External services such as domains and hosting may incur additional costs and must be prepared separately
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.
Must comply with when using
- This version of the code may be used, modified, used commercially, and distributed for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional costs.
View Original Text Basis
https://github.com/emricooo/portfolio-emeric-guyon/blob/main/LICENSEhttps://github.com/emricooo/portfolio-emeric-guyon/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 88 / 100
- Technologies
- Nuxt · Vue · HTML
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-09-11
- Screenshot last checked
- 2026-10-13
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Nuxt as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: fffdc77c9dc8897a0dbaa5f8b7b7c7d4f4b63f1789d6f22b83e3085bc1affe0f
2026-10-13T08:52:51.879Z
Source file / repository<div align="center">
# emericguyon.com
**Freelance Fullstack Developer Portfolio**
Dark theme | Bilingual FR/EN | GSAP Animations
[](https://emericguyon.com)
</div>
---
## Tech Stack
<div align="center">
</div>
## Features
- **Canvas Hero** — custom code rain effect with spotlight reveal on hover
- **Scroll Animations** — word reveal, letter reveal, fade-in via GSAP ScrollTrigger
- **Dark / Light Theme** — toggle with smooth transitions, persisted via cookie
- **Bilingual** — French (default) + English with `/en/` prefix
- **Responsive** — optimized for mobile, tablet and desktop
- **Performance** — lazy-loaded sections, FPS-capped canvas, reduced-motion support
## Getting Started
```bash
npm install
npm run dev
```
Dev server runs on `http://localhost:3000`.
## Build
```bash
npm run build # SSR build
npm run generate # Static generation
```
## Project Structure
```
app/
components/
home/ # Hero, About, Services, Skills, Projects, Clients
project/ # ProjectDetail
icons/ # SVG icon components
ui/ # Badge, ThemeToggle
App*.vue # AppNavigation, AppFooter, AppContact, AppPageTransition
composables/ # useScrollAnimation, useTheme, useSeo, useCustomCursor
pages/ # index, projets/[slug]
data/ # Projects, skills, clients, hero code
i18n/locales/ # fr.json, en.json
public/ # Images, fonts, favicon
```
## License
[MIT](LICENSE)
Explore similar templates
Compare previews and descriptions within the same stack and category.
canvas
Canvas is a Nuxt-based portfolio template that uses Nuxt Content for content management and Nuxt UI with Tailwind CSS for pages.
Nuxt · Portfolio
portfolio
A Nuxt portfolio template using Nuxt UI for interface components and Nuxt Content for content, intended to showcase projects, skills, and blog.
Nuxt · Portfolio
nuxtjs-tailwindcss-portfolio
A Nuxt.js and Tailwind CSS personal portfolio starter theme with dark mode, theme switching, Vuex state management, reusable components, project category filtering and title search, Vue transition animations, a project carousel, smooth scrolling, a dynamic form, a counter, and back-to-top and download…
Nuxt · Portfolio
nuxt-resume
A personal resume website template built with Nuxt and Vue, with i18n multilingual support. Resume copy and page text are maintained through JSON files under locales, with English and Spanish provided by default; new languages can be registered in nuxt.config.js.
Nuxt · Portfolio
nano-portfolio
Nano Portfolio is an open-source developer portfolio template built on Nuxt 3, TypeScript, Nuxt UI, Tailwind, MongoDB, and Resend.
Nuxt · Portfolio
super-portfolio
Super Portfolio is a personal portfolio website template built with Nuxt 3, Tailwind CSS, and TypeScript, using Iconsax icons and Nuxt Google Font.
Nuxt · Portfolio