Manuel Samuel Alfaro Sierra - Frontend Portfolio

A technical portfolio and articles site built with VitePress, showcasing frontend architecture, WebAssembly experiments, and practical engineering challenges.

Live site: https://manuel-samuel-alfaro-sierra.porfolio.dkt-mlk.es/

About

This portfolio contains technical articles exploring topics such as:

• Client-side business logic with Rust + WebAssembly
• PDF generation optimization (WebKit vs Chromium)
• Multiplatform C++ UI libraries
• 2D game development with C++ and SDL

Tech Stack

• Static Site Generator: VitePress 2.x
• Runtime: Node.js 20
• Build Tool: Vite
• Deployment: Docker + Nginx (Alpine-based)

Project Structure

.
├── docs/                    # VitePress source files
│   ├── articles/           # Technical articles (markdown)
│   ├── images/             # Article images and assets
│   ├── .vitepress/         # VitePress configuration
│   └── index.md            # Homepage
├── Dockerfile              # Multi-stage Docker build
├── package.json            # Node dependencies and scripts
└── README.md               # This file

Development

Prerequisites

• Node.js 20 or higher
• npm or pnpm

Install Dependencies

npm install

Run Development Server

npm run docs:dev

The site will be available at http://localhost:5173 with hot reload enabled.

Build for Production

npm run docs:build

The static site will be generated in docs/.vitepress/dist/.

Preview Production Build

npm run docs:preview

Docker Deployment

Build Docker Image

sudo docker build -t my-portfolio:latest .

This creates a multi-stage build:

1. Build stage: Installs dependencies and builds the VitePress site
2. Runtime stage: Serves the static files with Nginx (Alpine)

Run Container

sudo docker run -d -p 8080:80 --name portfolio my-portfolio:latest

The portfolio will be available at http://localhost:8080.

Docker Architecture

The Dockerfile uses a two-stage build for optimal image size:

• Stage 1 (builder): Uses node:20-alpine to build the static site
• Stage 2 (runtime): Uses nginx:alpine to serve the built files

Features:

• Gzip compression enabled
• Static asset caching (7 days)
• Minimal image size (~20MB runtime)

License

This portfolio is personal work by Manuel Samuel Alfaro Sierra.

Contact

For inquiries or collaboration, please reach out through the contact information provided on the live site.