Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 18.x or higher recommended

Package Manager

npm, yarn, or pnpm

Git

For cloning the repository

Code Editor

VS Code, WebStorm, or your preferred editor

​
Installation

1

Clone the Repository

Clone the portfolio repository to your local machine:
git clone https://github.com/gcazin/portfolio
cd portfolio
Make sure you have Git installed and configured on your system.
2

Install Dependencies

Install all required npm packages:
npm install
This will install:
  • Nuxt 3 framework
  • Vue.js and Vue Router
  • TailwindCSS
  • Typed.js for animations
  • All other dependencies
3

Start Development Server

Run the development server:
npm run dev
The application will be available at http://localhost:3000
You should see the portfolio homepage with the hero section and navigation.
4

Explore the Application

Navigate through the different sections:
  • Home (/) - Hero section with animated typing
  • Introduction (#introduction) - About section with stats
  • References (#references) - Company project showcase
  • Experiences (#experiences) - Professional timeline
  • Skills (#competences) - Technology cards
  • Projects (#projets) - Project gallery
  • Contact (#contact) - Contact form
  • CV (/cv) - Resume page

​
Project Structure

Understand the key directories and files: 
portfolio/
├── components/
│   ├── cards/              # Card components (SkillCard, ExperienceCard)
│   ├── elements/           # Basic elements (Button, Icon, Badge)
│   ├── form/               # Form components (Input, Textarea)
│   ├── layout/             # Layout components (Navbar, Footer, Section)
│   └── misc/               # Misc components (Projects, References, Animate)
├── pages/
│   ├── index.vue           # Homepage with all sections
│   ├── cv.vue              # Resume/CV page
│   ├── contact-submission.vue  # Form submission success page
│   ├── legal-notice.vue    # Legal notice
│   └── privacy-policy.vue  # Privacy policy
├── public/
│   └── images/             # Static images (projects, skills, companies)
├── assets/
│   └── css/
│       └── main.css        # Global CSS and Tailwind imports
├── app.vue                 # Root component with Navbar and Footer
├── nuxt.config.ts          # Nuxt configuration
├── tailwind.config.js      # Tailwind configuration
└── package.json            # Dependencies and scripts

​
Configuration

​
Nuxt Configuration

The main configuration is in nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: { lang: 'fr' },
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    },
  },
  colorMode: {
    classSuffix: '',
  },
  css: ['~/assets/css/main.css'],
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-aos',
    '@nuxt/image',
    '@nuxtjs/sitemap',
    '@nuxtjs/color-mode',
  ],
  site: {
    url: 'https://www.guillaume-cazin.fr',
    name: 'Guillaume Cazin',
  },
})
  • app.head: Meta tags, language, and external scripts (Google Analytics, Ionicons)
  • colorMode: Dark mode configuration
  • modules: Nuxt modules for Tailwind, AOS animations, image optimization, sitemap, and color mode
  • site: SEO configuration with site URL and name
  • vue.compilerOptions: Custom element configuration for Ionicons

​
Tailwind Configuration

tailwind.config.js
export default {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  safelist: [
    {
      pattern: /space-./,
    },
  ],
}

​
Development Workflow

1

Hot Module Replacement

The dev server supports HMR - your changes will be reflected instantly without page refresh.
Edit any .vue file and see the changes appear immediately in your browser.
2

Dark Mode Testing

Click the moon/sun icon in the navbar to toggle between light and dark modes.The theme is managed by @nuxtjs/color-mode and persists in localStorage.
3

Component Development

Components are organized by type:
  • Modify components/layout/Navbar.vue to change navigation items
  • Edit components/cards/SkillCard.vue to customize skill displays
  • Update components/misc/Projects.vue to add/edit projects

​
Building for Production

When you’re ready to deploy: 
npm run build
This creates an optimized production build in the .output directory.

​
Preview Production Build

Test the production build locally: 
npm run preview

​
Deployment to Netlify

The portfolio is configured for Netlify deployment:
1

Connect Repository

  1. Log in to Netlify
  2. Click “Add new site” → “Import an existing project”
  3. Connect your Git repository
2

Configure Build Settings

Netlify will auto-detect Nuxt 3. Verify these settings:
  • Build command: npm run build
  • Publish directory: .output/public
  • Functions directory: .output/server
3

Enable Netlify Forms

The contact form uses Netlify Forms (already configured in the code):
<form
  name="contact"
  method="POST"
  data-netlify="true"
  data-netlify-recaptcha="true"
>
  <!-- Form fields -->
</form>
Enable reCAPTCHA in Netlify’s form settings for spam protection.
4

Deploy

Click “Deploy site” - your portfolio will be live in minutes!
Netlify provides a deployment status badge you can add to your README.
Don’t forget to update the site URL in nuxt.config.ts to match your Netlify domain.

​
Troubleshooting

If port 3000 is already in use, Nuxt will automatically try the next available port. You can also specify a custom port:
PORT=3001 npm run dev
Make sure the element with class .typed exists and Typed.js is initialized in the onMounted hook:
onMounted(() => {
  const typed = new Typed('.typed', {
    strings: skills,
    typeSpeed: 150,
    loop: true,
  })
})
Verify that @nuxtjs/color-mode is installed and configured in nuxt.config.ts:
modules: ['@nuxtjs/color-mode'],
colorMode: {
  classSuffix: '',
}
Images should be in the public/images/ directory. Reference them without the public prefix:
<NuxtImg src="/images/misc/avatar.webp" alt="Avatar" />

​
Next Steps

Explore Features

Learn about all the portfolio features in detail

Customization Guide

Customize content, styling, and components (coming soon)

Build docs developers (and LLMs) love

Get started for freeTalk to us