> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use ?format=html.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.
# Event: Deploy Your Portfolio
[GitHub](https://github.com/GDG-UAM/portfolio-workshop)
**Date:** March 2026
**Collaborators:** [José Arbeláez Nieto](https://josearbelaez.com/)
**Technologies:** Astro, TypeScript
---
## Project Overview
A production-ready portfolio template and workshop delivery system built on Astro 5 with a strict separation between content and presentation. The project was designed for a GDG UAM employability event with [SEIDOR](https://www.seidor.com/es-es) as a guest company, where the goal was to take students from no portfolio to a live, personalized site in under two hours without touching HTML, CSS, or JavaScript.
The architecture centers on content collections: all personal data lives in YAML and Markdown files under `src/data/`, while the theme engine swaps visual identities via CSS custom properties alone. This means a participant can change their entire site's look by editing a single file, or add a new theme without modifying a single layout component. The template ships with seven built-in themes, a `ThemeSwitcher` component with `localStorage` persistence, and full CI/CD via GitHub Actions for zero-config deployment to GitHub Pages.
The workshop itself was structured in two phases: SEIDOR gave a session on CV and interview strategy, and then we did a portfolio theory briefing and a hands-on build-and-deploy block where every participant forked the repo, edited their YAML, and pushed to production before leaving the room. The [blog entry](https://gdguam.es/blog/evento-portfolio) at the GDG UAM website covers more takeaways from the event.
## Motivation
Student portfolios typically fall into two categories: (1) cobbled-together HTML/CSS that looks unprofessional and never gets updated, or (2) nonexistent. We needed a third path: something that looked polished out of the box, required no framework knowledge to customize, and could be deployed with a single `git push`.
The SEIDOR collaboration reinforced a key insight from their recruitment team: personal projects are one of the strongest signals of curiosity and growth potential, but only if they are discoverable. A GitHub profile full of repos is not a portfolio. A live URL with structured content (experience, projects, writing) is. The template was built to close that gap at scale.
## Core Architecture
### Content-First Design
All user-facing content is declarative. The participant never edits a component:
| Section | File | Format |
| ---------- | -------------------------- | -------- |
| Profile | `src/data/profile.yaml` | YAML |
| Experience | `src/data/experience.yaml` | YAML |
| Education | `src/data/education.yaml` | YAML |
| Projects | `src/data/projects.yaml` | YAML |
| Blog posts | `src/data/posts/*.md` | Markdown |
Astro 5's Content Layer validates these against `content.config.ts` schemas at build time. Type mismatches (e.g., an invalid date string) fail the build with a clear error, catching data issues before deployment.
### Theme Engine
Themes are pure CSS custom property overrides. The active theme is set via `data-theme` on `` and consumed everywhere:
```css
[data-theme="theme-name"] {
...
}
```
Adding a theme requires four steps: copy a CSS file, change the selector, register in `constants.ts`, and import in `BaseLayout.astro`. No layout changes, no conditional rendering logic, no prop drilling.
### Zero-Client-Framework Performance
The template ships with zero client-side JavaScript by default. Astro's islands architecture means only interactive components hydrate as isolated islands. The result is a Lighthouse score in the high 90s on stock hardware, even with image-heavy portfolios.
## Workshop Infrastructure
### Event Flow
The GDG UAM employability session was structured to maximize conversion from attendee to deployed portfolio:
| Phase | Duration | Content |
| -------------------- | -------- | ----------------------------------------------------------------- |
| **SEIDOR Briefing** | 45 min | CV customization, keyword alignment, authenticity in recruiting |
| **Portfolio Theory** | 30 min | What portfolios are, anti-patterns, why they beat "trust me, bro" |
| **Build & Deploy** | 60 min | Fork repo, edit YAML, push via GitHub Actions |
The SEIDOR session provided the strategic framing: their recruiters emphasized that hobbies and personal projects are not filler - they are signals of team discipline and curiosity. The portfolio template became the tactical execution of that advice.
### Deployment Pipeline
GitHub Actions handles the entire deploy chain:
1. **Fork** the template repo
2. **Enable Actions** in the forked repository
3. **Configure Pages** to use GitHub Actions as source
4. **Push:** the workflow runs Astro build and deploys to `https://<.github.io/`
No Vercel/Netlify accounts, no CLI tokens, no DNS configuration. This was critical for a student audience where friction at any step kills completion rates.
## Technical Stack
- **Astro 5:** Static site generation with Content Layer schemas
- **TypeScript:** Strict mode with validated content types
- **YAML / Markdown:** Human-editable content with no markup required
- **CSS Custom Properties:** Runtime theme switching without JS state management
- **Vitest + Playwright:** Unit and E2E test coverage for template integrity
- **GitHub Actions:** Zero-config deployment to GitHub Pages