Professional Portfolio Website

Bilingual portfolio development with Quarto and GitHub Actions

Web Development
Quarto
R
GitHub Actions
Author

Frank Leyva

Published

October 16, 2024

Project Overview

This project documents the development of my professional portfolio website, built from scratch using Quarto, an open-source scientific and technical publishing system. The site is fully bilingual (Spanish and English) and designed to showcase my data science and quantitative analysis projects to international hiring teams.

Objectives

  1. Modern Professional Portfolio: Create an aesthetic and professional website that effectively showcases my data science skills
  2. Bilingual Experience: Provide complete content in both Spanish and English to reach broader audiences
  3. Responsive Design: Ensure optimal user experience across all devices
  4. Automated Deployment: Implement CI/CD with GitHub Actions for automatic publishing
  5. Easy Maintenance: Organized project structure for efficient content updates

Technologies Used

Core Stack

  • Quarto: Pandoc-based technical publishing framework
  • R Markdown: For reproducible analytics and data visualizations
  • Bootstrap/Cerulean: CSS framework for responsive design
  • GitHub Pages: Free and reliable static hosting
  • GitHub Actions: Automated CI/CD pipeline

Development Tools

  • RStudio: Integrated development environment
  • Git/GitHub: Version control and collaboration
  • Custom CSS: Tailored design with cerulean theme

Project Architecture

FrankLeyva.github.io/
├── Portafolio/
│   ├── _quarto.yml          # Main configuration
│   ├── styles.css           # Custom styles
│   ├── index.qmd            # Home (Spanish)
│   ├── index.en.qmd         # Home (English)
│   ├── about.qmd            # About (Spanish)
│   ├── about.en.qmd         # About (English)
│   ├── images/              # Visual assets
│   └── *.qmd                # Individual projects
├── .github/
│   └── workflows/
│       └── quarto-publish.yml  # CI/CD workflow
└── docs/                    # Compiled site (generated)

Key Features

1. Complete Bilingual Design

The site implements a robust bilingual navigation system:

  • Separate content files for each language (.qmd for Spanish, .en.qmd for English)
  • Language switcher in navigation bar
  • Language-specific configuration in Quarto metadata
  • Consistent navigation across both languages

2. Modern Design System

Cerulean Color Palette: - Primary color: #2FA4E7 (Cerulean blue) - Dark color: #1E88C7 - Accent color: #0E4C92

Design Components: - Hero section with gradient and profile photo - Project card system with hover effects - Professional typography and spacing - Fully responsive layout

3. Project Organization

Projects are categorized by industry:

  • Survey Analytics: Quantitative research and survey data analysis
  • Web Development: Web development and deployment projects
  • Manufacturing (Future): Manufacturing-focused demonstrations

4. Automated Deployment Pipeline

The site uses GitHub Actions for continuous deployment:

# Automated process:
1. Push to 'main' branch
2. Setup R environment
3. Install R dependencies
4. Render Quarto project
5. Deploy to GitHub Pages

Technical Challenges and Solutions

Challenge 1: Bilingual Content Management

Solution: Implement consistent naming convention (.en.qmd for English) and separate language profiles in Quarto configuration.

Challenge 2: Custom CSS Styling with Bootstrap

Solution: Use CSS variables and custom classes that integrate with Bootstrap’s Cerulean theme, maintaining design consistency.

Challenge 3: R Project Rendering

Solution: Properly configure R dependencies in GitHub Actions to ensure all packages (tidyverse, ggplot2, etc.) are available.

Sample Code

Custom Navigation Configuration

website:
  navbar:
    background: primary
    left:
      - text: "Projects"
        menu:
          - text: "Survey Analytics"
          - href: Projecto1.en.qmd
            text: "Response Scale Analysis"
    right:
      - icon: github
        href: https://github.com/FrankLeyva
      - text: "ES"
        href: index.qmd

Hero Section CSS

.hero-section {
  background: linear-gradient(135deg,
    var(--primary-color) 0%,
    var(--primary-dark) 100%);
  color: white;
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 0 0 20px 20px;
}

Results and Metrics

✅ Successful Deployment: Live site at frankleyva.com ✅ Responsive Design: Tested on mobile, tablet, and desktop devices ✅ Build Time: ~2-3 minutes with GitHub Actions ✅ Complete Bilingual Support: Full content in Spanish and English ✅ Performance Score: Fast load times with static site

Future Work

Skills Demonstrated

This project showcases proficiency in:

  • Modern Web Development: HTML, CSS, responsive design
  • Data Science Tools: Quarto, R Markdown, reproducible analytics
  • DevOps: CI/CD with GitHub Actions, version control with Git
  • UI/UX Design: Color palettes, typography, user experience
  • Technical Documentation: Clear project and code documentation
  • Project Management: Structured project organization and workflow

Conclusion

This portfolio website project demonstrates my ability to combine technical data science skills with modern web development. By building a fully functional, bilingual, and automatically deployed site, I’ve created a platform to effectively showcase my work to potential employers and collaborators worldwide.

The site not only showcases my projects but is itself a demonstration of my technical capabilities, attention to detail, and commitment to code quality and user experience.

Technologies: Quarto, R, GitHub Actions, Bootstrap, CSS Repository: github.com/FrankLeyva/FrankLeyva.github.io Live Site: frankleyva.com