Digital CV Workshop

Build Your Digital CV with AI

Create a Production-Ready Portfolio Website in 3 Hours

Master vibe coding with v0.dev to transform your CV into a stunning, animated digital portfolio. Deploy to the cloud and share with the world—no coding experience required.

View v0.dev

Workshop Overview

What you'll build in 3 hours

3 hours

Workshop Duration

Beginner

Difficulty Level

Detailed Steps

Transform your traditional CV into a modern, animated digital portfolio using AI-powered vibe coding. Learn to leverage v0.dev's AI capabilities to generate production-ready code, then deploy it globally using Vercel and GitHub.

What You'll Build

AI-generated modern portfolio website with animations
Responsive design that works on mobile and desktop
Dark/light mode support with smooth transitions
Professional hero section with interactive animations
Deployed to production with custom domain capability
Source code in GitHub for version control
Ability to update and iterate using AI or manual coding

Prerequisites

What you need before starting

Required

GitHub Account

Free account for code repository and authentication

Your CV/Resume

Word document or PDF of your current CV

Optional

VS Code Insider

For local development and advanced editing (optional)

Developer Productivity Guide

What is v0.dev?

v0.dev (now v0.app) is Vercel's AI-powered interface that generates production-ready React code from natural language prompts. It's the fastest way to go from idea to deployed website.

AI Code Generation

Describe what you want, get production-ready Next.js code

Instant Preview

See your website live as it's generated

Iterate with AI

Refine your design through natural language

One-Click Deploy

Publish to production with Vercel instantly

Free Tier

10 prompts per month

Perfect for this workshop - plan your prompt carefully!

Pro Tip: Draft your prompt externally (in Notepad or ChatGPT) before using v0.dev to maximize your free prompts

The Vibe Coding Workflow

From AI-generated code to production deployment

Set Up v0.dev Account

Create your account and explore the platform

⏱️ 10 minutes

Tasks:

Go to v0.app and click 'Sign In'
Sign in with GitHub or Google (GitHub recommended)
Verify your free tier includes 10 prompts
Browse the v0.app interface to familiarize yourself

Tips:

💡Using GitHub for sign-in simplifies the deployment process later
💡You get 10 free prompts per month - plan carefully!
💡Consider drafting your main prompt in ChatGPT or Notepad first

Go to v0.app v0.dev Introduction v0.dev Quickstart

Explore Templates for Inspiration

Browse v0.dev templates to get ideas for your digital CV

⏱️ 15 minutes

Tasks:

Visit the v0.app templates page
Look at hero sections for inspiration
Check out portfolio and blog templates
Note animation styles you like
Save examples that inspire you

Tips:

💡Pay attention to landing page hero sections
💡Look for animation examples (mouse interactions, scroll effects)
💡Consider color schemes and layouts that match your style
💡Note any specific templates you want to reference in your prompt

v0.app Templates Blog & Portfolio Templates Landing Page Templates

Choose Your Starting Point

Decide whether to start from a template or from scratch

⏱️ 5 minutes

Tasks:

Decide: template-based or start from scratch
If using template: click 'Open in v0' on your chosen template
If starting fresh: click 'New Chat' in v0.app

Option 1: Start from Template

Choose a template that closely matches your vision

Pros:

Faster starting point
Professional design foundation
Pre-built animations and components

Cons:

May need more customization
Could feel less unique

Steps:

Find a template you love
Click 'Open in v0' button
Template loads in v0.app editor

Option 2: Start from Scratch

Build completely custom site with AI

Pros:

Fully customized to your needs
Unique design
Learn the full process

Cons:

Requires more detailed prompt
May take more iterations

Steps:

Click 'New Chat' in v0.app
Start with blank canvas
Use comprehensive prompt

Upload Your CV and Generate

Upload your CV and use AI to generate your digital portfolio

⏱️ 30 minutes

Tasks:

Click the '+' icon in v0.app chat
Upload your CV (Word or PDF)
Paste your prepared prompt
Wait for AI to generate your site (1-3 minutes)
Review the generated preview

Tips:

💡Be specific about colors, animations, and sections you want
💡Include your actual social media URLs in the prompt
💡Mention any specific technologies or frameworks you prefer
💡Reference templates you liked in Step 2
💡Don't worry about perfection - you can iterate

Sample Comprehensive Prompt

Customize this prompt with your details and preferences

Sample Comprehensive Prompt

Customize this prompt with your details and preferences

v0-prompt.txt

Create a modern digital CV based on the content of the CV I've uploaded.

Design Requirements:
- Use vibrant colors with a professional feel
- Support dark mode (default) with option to switch to light mode
- Create a compelling hero section about me with an animated background
- Animation: particle effect or gradient animation that responds to mouse movement with repel and attraction effects
- Include smooth scroll animations throughout the site
- Add subtle hover effects on interactive elements

Content Sections:
- Hero/Introduction section with photo and tagline
- About Me summary
- Professional Experience timeline
- Skills & Expertise
- Education & Certifications
- Projects/Portfolio highlights (if applicable)
- Contact information

Footer:
- Links to: LinkedIn [YOUR_LINKEDIN_URL]
- Links to: GitHub [YOUR_GITHUB_URL]
- Any other professional social links

Technical Requirements:
- Make this production-ready for deployment to Vercel
- Responsive design that works beautifully on mobile, tablet, and desktop
- Apply subtle animations and smooth transitions throughout
- Use modern React/Next.js best practices
- Optimize for performance and SEO

Style: Modern, clean, professional with personality. Think startup/tech portfolio aesthetic.

v0.dev Agentic Features

Iterate and Refine

Use AI to refine your design with natural language

⏱️ 30 minutes

Tasks:

Review the generated site in the preview
Navigate through all sections
Test on different screen sizes using the preview controls
Identify changes you want to make
Use chat to request refinements

Tips:

💡Make one change at a time for better control
💡Preview on mobile view to ensure responsiveness
💡Test dark/light mode switching
💡Check all links work correctly
💡Ensure your actual content is showing (not placeholder text)

Example Refinements:

"Make the hero section animation more subtle"

"Change the color scheme to blue and purple gradients"

"Add a projects section with card layout"

"Increase font size in the about section"

"Add email contact form instead of mailto link"

"Make the timeline vertical on mobile"

"Add LinkedIn and Twitter icons to the footer"

"Change the background animation to particle effect"

Connect to GitHub

Create GitHub repository for version control and deployment

⏱️ 15 minutes

Tasks:

Click the GitHub icon in v0.app
Select your GitHub account from dropdown
If not connected: click 'Install' to connect GitHub
Review the default repository name (e.g., 'v0-paper-crane-animation')
Customize repository name if desired
Click 'Create Repository'
Wait for repository creation confirmation
Click 'Set as Active Branch' for the main branch

Tips:

💡Choose a meaningful repository name (e.g., 'digital-cv' or 'portfolio-site')
💡Keep it public if you want others to see your code
💡Make it private if you prefer to keep the source confidential

Why GitHub?

While you can deploy directly without GitHub, using it provides several benefits:

Version control - track all changes to your site
Backup - your code is safely stored in the cloud
Collaboration - others can contribute (optional)
Local development - clone to VS Code for advanced editing
CI/CD - automatic deployments when you push changes
Professional workflow - industry standard practice

Create GitHub Account

Deploy to Vercel

Publish your digital CV to the internet

⏱️ 10 minutes

Tasks:

Click the 'Publish' button in v0.app
v0 automatically deploys to Vercel
Vercel connects to your GitHub repository
Wait for deployment to complete (1-2 minutes)
Look for 'Deployment successful' message
Click 'Visit Site' to see your live website

Tips:

💡Bookmark your live URL
💡Share the link with friends and colleagues
💡The URL is public - your CV is now online!
💡Future changes pushed to GitHub will auto-deploy

What Just Happened?

v0 pushed your code to GitHub repository
Vercel detected the new repository
Vercel built your Next.js application
Your site is now live on Vercel's global CDN
You got a free .vercel.app domain

Vercel Documentation

Clone to Local Development (Optional)

Set up local development environment for advanced editing

⏱️ 20 minutes

Tasks:

Click GitHub icon in v0.app
Click on the repository link
Click the green 'Code' button in GitHub
Copy the repository URL
Choose your cloning method (Terminal or VS Code)

Option 1: Using Terminal/Command Line

Steps:

Open Terminal (Mac/Linux) or PowerShell (Windows)
Navigate to where you want to store the project: cd ~/Documents/projects
Clone the repository: git clone [paste-your-github-url]
Navigate into the project: cd your-repository-name
Open in your code editor: code .

Requirements:

Git must be installed on your computer
For Windows: download from git-scm.com

Windows

terminal

# Windows PowerShell
cd $HOME\Documents\projects
git clone https://github.com/yourusername/your-repo.git
cd your-repo
code .

Mac/Linux

terminal

# Mac/Linux Terminal
cd ~/Documents/projects
git clone https://github.com/yourusername/your-repo.git
cd your-repo
code .

Option 2: Using VS Code Insider

Steps:

Open VS Code Insider
Click 'Clone Repository' or Ctrl+Shift+P → 'Git: Clone'
Paste your GitHub repository URL
Select destination folder
VS Code will clone and open the project automatically

Requirements:

VS Code or VS Code Insider installed

Benefits:

No command line knowledge needed
Automatic project opening
Built-in Git integration
GitHub Copilot support available

Install Git for Windows VS Code Download Developer Productivity Guide

Local Development Setup (Optional)

Run and test your site locally

⏱️ 15 minutes

Tasks:

Open terminal in your project folder
Install dependencies
Run the development server
Open the local preview in your browser
Make changes and see live updates

Tips:

💡Keep the dev server running while you edit
💡Changes auto-reload in the browser
💡Check browser console for any errors
💡Use pnpm for faster installs and better performance

Why pnpm over npm?

pnpm is a faster, more efficient alternative to npm that v0.dev projects use by default.

Benefits:

3x faster than npm for installations
Saves disk space with smart linking (one version per machine)
Stricter dependency management prevents bugs
Used by v0.dev, Vercel, and modern projects
100% compatible with npm - same commands

Install pnpm (if not already installed)

One-time setup - install pnpm globally on your machine

Install pnpm globally

One-time setup - install pnpm globally on your machine

terminal

npm install -g pnpm

Verify installation:

pnpm --version

Skip this step if you already have pnpm installed

Install Dependencies

First time setup only

terminal

pnpm install

This downloads all required packages (may take 1-2 minutes)

Start Development Server

Run your site locally

terminal

pnpm dev

Make Local Changes (Optional)

Edit your site with AI assistance or manual coding

⏱️ 30 minutes

Tasks:

Open your project in VS Code
Explore the file structure
Make changes using GitHub Copilot or manually
Test changes locally with pnpm dev
Commit changes when satisfied

Tips:

💡Start with small changes to learn the codebase
💡Use GitHub Copilot for AI assistance (see /developer-productivity)
💡Test locally before pushing to GitHub
💡Read the Next.js documentation for advanced features

Developer Productivity Workshop Next.js Documentation

Test Production Build

Validate your changes before deploying

⏱️ 10 minutes

Tasks:

Stop the dev server (Ctrl+C)
Run pnpm build to create production build
Fix any errors shown during build
Use GitHub Copilot to fix errors if needed

Tips:

💡Always build locally before pushing to GitHub
💡Production builds are more strict than dev mode
💡Fix all errors before proceeding
💡Use GitHub Copilot to understand and fix errors

Push Changes to GitHub

Deploy your updates to production

⏱️ 10 minutes

Tasks:

Configure Git (first time only)
Stage your changes
Commit with a descriptive message
Push to GitHub
Wait for automatic deployment

Monitor Deployment

Watch your changes go live

⏱️ 5 minutes

Tasks:

Go to vercel.com
Sign in if needed
Find your project in the dashboard
Watch the build progress
Wait for 'Ready' status (1-2 minutes)
Click the domain link to see your updated site

Tips:

💡Vercel sends email notifications on deployment status
💡Each deployment gets a unique preview URL
💡You can rollback to previous deployments if needed
💡Check deployment logs if there are errors

Vercel Dashboard

Sync Back to v0.dev (Optional)

Update v0.dev with your latest changes

⏱️ 5 minutes

Tasks:

Go back to v0.app
Open your project
Click the GitHub icon
Click 'Pull' to sync latest code from GitHub
v0 now has your updated codebase
Continue editing in v0 if desired

Tips:

💡Always pull latest before editing in v0
💡v0 can continue to help with AI-powered changes
💡Local development gives you more control
💡Use the approach that works best for you

Why Sync Back?

This creates a continuous workflow between v0.dev and local development

Use v0 for quick AI-powered changes
Use local IDE for detailed coding work
Keep both environments in sync
Flexibility to choose the right tool for the task

What's Next?

Congratulations! Your digital CV is live. Here's what you can do next:

Easy

Add Custom Domain

Connect your own domain (e.g., yourname.com) instead of .vercel.app

⏱️ 30 minutes

Medium

Add Open Graph (OG) Images

Make your links look professional when shared on social media

⏱️ 45 minutes

Medium

SEO Optimization

Improve search engine rankings with proper metadata and structure

⏱️ 1 hour

Easy

Add Dynamic Sitemap

Help search engines discover and index all your pages

⏱️ 20 minutes

Easy

Add Analytics

Track visitors with Vercel Analytics or Google Analytics

⏱️ 10 minutes

Medium

Add Blog Section

Create a blog using MDX or a headless CMS

⏱️ 2 hours

🎉 Congratulations! Your Digital CV is Live!

You've successfully transformed your CV into a modern, animated digital portfolio using AI-powered vibe coding.

Created a production-ready portfolio website with AI
Learned vibe coding with v0.dev
Deployed to global CDN with Vercel
Set up GitHub repository for version control
Gained skills in modern web development workflow

Share Your Achievement

Post your live URL on LinkedIn or Twitter and tag us!

#VibeCode#DigitalCV#v0dev#AIGenerated

Developer Productivity Workshop