Skip to main content

​
Introduction

Welcome to the documentation for Juan Roccia’s portfolio website - a modern, performant personal website showcasing professional work, skills, and expertise in web development, automation, and artificial intelligence.

​
What is This Portfolio?

This portfolio is a professionally designed personal website built with Astro, a modern web framework that delivers exceptional performance through partial hydration and minimal JavaScript. The site serves as a comprehensive showcase of Juan Roccia’s professional work, technical expertise, and professional background.
The portfolio is deployed at juanroccia.github.io and features a fully responsive design optimized for all device types.

​
Key Features

Content Collections

Astro’s content collections provide type-safe content management for portfolio projects with automatic frontmatter validation

Responsive Design

Mobile-first design approach with carefully crafted breakpoints ensures optimal viewing on all devices

Dynamic Routing

Automatic page generation for portfolio projects using Astro’s file-based routing system

Theme Support

Built-in light and dark theme support with user preference persistence via localStorage

​
Technology Stack

The portfolio leverages modern web technologies to deliver a fast, maintainable, and accessible experience:

​
Core Framework

  • Astro 5.11.1 - Static site generator with islands architecture for optimal performance
  • TypeScript - Type-safe development with Astro’s base TypeScript configuration

​
Content Management

  • Astro Content Collections - Type-safe content management with Zod schema validation
  • Markdown/MDX - All portfolio projects are written in Markdown for easy content updates

​
Styling & Design

  • Custom CSS - Hand-crafted CSS with CSS custom properties for theming
  • Responsive Grid Layouts - Modern CSS Grid for flexible, responsive layouts
  • CSS Variables - Comprehensive design system with CSS custom properties
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://juanroccia.github.io'
})

​
Target Audience

This portfolio website is designed for:
  1. Potential Employers - Showcasing professional experience, technical skills, and completed projects
  2. Clients - Demonstrating capabilities in web development, AI, and automation systems
  3. Collaborators - Connecting with other professionals for potential partnerships
  4. Industry Peers - Sharing knowledge and contributing to the developer community

​
Portfolio Sections

The website is organized into key sections:
  • Home (/) - Hero section with dynamic tagline, featured projects, and funding options
  • About (/about) - Background, education, and detailed skill descriptions
  • Work (/work) - Complete portfolio of projects with filtering and categorization
  • Individual Projects (/work/[slug]) - Detailed project pages with descriptions and technologies

​
Design Philosophy

The portfolio follows several key design principles:
1

Performance First

Astro’s islands architecture delivers near-zero JavaScript by default, resulting in lightning-fast page loads
2

Content-Focused

Clean, readable layouts that let the work speak for itself without distracting visual elements
3

Accessibility

Semantic HTML, proper ARIA labels, and keyboard navigation support throughout
4

Mobile-First

Designed for mobile devices first, then progressively enhanced for larger screens

​
Getting Started

To learn more about specific features and implementation details, explore the following sections:
This documentation covers the technical implementation and features of the portfolio website. For information about Juan Roccia’s professional services, visit the About page.

Build docs developers (and LLMs) love

Get started for freeTalk to us