A modern, multilingual digital curriculum vitae built with Jekyll, featuring a single-page application interface with video introductions, resume content in multiple languages, and comprehensive SEO optimization.
- Multilingual Support: Available in English, Spanish, and Portuguese
- Single-Page Application: Tabbed interface with smooth transitions
- Video Introductions: Language-specific video presentations
- Responsive Design: Optimized for desktop and mobile devices
- Theme Toggle: Switch between light and dark themes with one click
- Dynamic Content: Language switching without page reloads
- PDF Downloads: Downloadable resume PDFs for each language
- SEO Optimized: Comprehensive meta tags, structured data, and search engine optimization
- Interactive Elements: Profile picture zoom effect and smooth animations
- Calendar Integration: Professional booking section for meetings
This is a Jekyll-based static site that can be deployed to GitHub Pages or any static hosting service.
- Ruby (for local development)
- Jekyll (for local development)
- Clone the repository:
git clone https://github.com/heyvoon/heyvoon.github.io.git
cd digital-cv- Serve locally (if you have Jekyll installed):
jekyll serve- Open
http://localhost:4000in your browser
The site is configured for GitHub Pages deployment. Simply push to the main branch and GitHub Pages will automatically build and deploy the site.
digital_cv/
├── _config.yml # Jekyll configuration
├── _data/ # Language-specific content
│ ├── en.yml # English content
│ ├── es.yml # Spanish content
│ └── pt.yml # Portuguese content
├── _includes/ # Reusable components
│ └── header.html # Site header with navigation
├── _layouts/ # Page templates
│ └── default.html # Main layout (SPA template)
├── _pages/ # Additional pages (legacy)
├── assets/ # Static assets
│ ├── css/
│ │ └── main.scss # Main stylesheet
│ ├── pdf/ # PDF resume files
│ ├── resumes/ # Markdown resume content
│ └── video/ # Video introduction files
├── index.md # Homepage
└── README.md # This file
- Site title with custom styling
- LinkedIn profile link with official logo
- Language selector (EN, ES, PT) with active state highlighting
- Two-tab interface: Video Introduction and Resume
- Smooth transitions between tabs
- Persistent active tab state
- Embedded video player with language-specific content
- Muted auto-play with user controls
- Responsive video container
- Web-formatted resume content in markdown
- Language-specific content switching
- Download PDF button for each language
- Clean typography and spacing
- Local Storage: Remembers user's language and theme preferences
- Dynamic Updates: Content updates without page reloads
- Responsive: Mobile-first design approach
- Accessibility: Semantic HTML and keyboard navigation
- SEO Optimization: Meta tags, structured data, sitemap, and robots.txt
- Performance: Optimized loading and smooth animations
- Interactive UI: Hover effects and visual feedback
- Theme System: CSS variables for easy theme management
The site supports three languages:
- English (EN): Primary language
- Spanish (ES): Español
- Portuguese (PT): Português
Each language has:
- Complete navigation labels
- Resume content in markdown format
- Video introduction
- PDF download link
- Create a new data file in
_data/(e.g.,fr.yml) - Add the language code to the header template in
_includes/header.html - Create markdown resume content in
assets/resumes/ - Add video file to
assets/video/ - Add PDF file to
assets/pdf/
The site uses SCSS for styling with a dark theme. Key color variables:
- Primary:
#bb86fc(Purple accent) - Secondary:
#89ddff(Blue accent) - Background:
#121212(Dark background) - Surface:
#1e1e1e(Card backgrounds)
All text content is managed through the _data/ YAML files, making it easy to update without modifying templates.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- LinkedIn: André Barbosa
- Live Site: https://heyvoon.github.io/
- Meta Tags: Comprehensive description and keywords for search engines
- Structured Data: JSON-LD markup for rich snippets
- Open Graph: Social media sharing optimization
- Sitemap: XML sitemap for search engine indexing
- Robots.txt: Crawler guidance and indexing control
- Canonical URLs: Prevents duplicate content issues
- Light/Dark Theme Toggle: Switch between themes with one click
- System Preference Detection: Automatically detects OS theme preference
- Persistent Storage: Remembers user's theme choice
- Smooth Transitions: Elegant color transitions between themes
- Professional Design: Both themes maintain professional appearance
Built with ❤️ using Jekyll and modern web technologies.