English · Español

Oscar Lopez's Web Portfolio

My personal portfolio, built as a static page in HTML, CSS and JS exclusively. No framework, no build step, no dependencies to install.

→ ocr99.github.io/portfolio

About me

I'm a Business Intelligence Developer in Barcelona. I build reporting solutions end to end, from data transformation and modelling to KPI logic and the final dashboard, mostly with Power BI, Domo and SQL.

• LinkedIn
• Schedule a call
• CV: English · Español

Portfolio

Homelab

Self-hosted infrastructure I've run since 2021, with Proxmox VE, Docker, Caddy, Cloudflare Tunnel, LLDAP and Home Assistant

• Homelab

El Bon Camí

Rental RV page created with WordPress, Woocommerce and Elementor

• El Bon Camí

The portfolio itself

Portfolio web to show resume online

• Personal Web Portfolio

Tech stack

Languages used: HTML, CSS and JavaScript

Library	Version	Used for
Bootstrap	5.2.1	Grid and utility classes
Bootstrap Icons	1.9.1	Icons
AOS	2.3.4	Animate on scroll
GLightbox	3.3.1	Project pages in an overlay
Swiper	8.4.7	Screenshot sliders

All of it loads from CDN, pinned to an exact version and with an SRI hash. Each page only pulls in what it actually uses.

Styling is plain CSS with custom properties. The whole site runs on four colours:

--maincolor: #100F0F;     /* background          */
--accentcolor: #0F3D3E;   /* cards, nav, borders */
--textcolor: #E2DCC8;     /* text                */
--contrastcolor: #F1F1F1; /* highlights          */

Languages

The site speaks English, Spanish and Catalan. English lives in the HTML itself, and assets/i18n.js picks Spanish or Catalan from the browser language (or from the switcher, which remembers the choice) and swaps the texts in from assets/i18n/es.js and ca.js. Anything missing from a dictionary stays in English, and so does the whole page if the dictionary doesn't load.

Structure

.
├── index.html                  Landing page
├── 404.html
├── robots.txt
├── sitemap.xml
├── assets/
│   ├── styles.css              All the styling
│   ├── main.js                 All the behaviour
│   ├── i18n.js                 Language detection and switcher
│   ├── i18n/                   Spanish and Catalan texts
│   ├── site.webmanifest
│   ├── img/                    WebP screenshots and headshot
│   ├── favicon/
│   └── downloads/              CV in both languages
├── pages/
│   ├── aboutme.html            The main one: about, stack, experience, projects, contact
│   └── projects/
│       ├── elboncami.html
│       └── personal/
│           ├── homelab.html
│           └── personal-portfolio.html
└── .github/workflows/pages.yml

Deployment

Push to master and the workflow uploads the repo as-is to GitHub Pages. Nothing gets built, so what I commit is what gets served.

License

GNU GPL v3