Front-end development / Creative interfacesSelected work · 2026

Hi, I'm Pedro, a Front-End Developer

Creating modern, dynamic websites with HTML, CSS, and JavaScript.

See My Work

HTMLCSSJavaScriptCanvas / SVG

FIG. 01Interface study

Structure. Interaction. A little character.

12projects to explore

Built with intent. Refined in the details.Explore the craft

DESIGN SYSTEMS✦ INTERACTIVE UI✦ FRONT-END CRAFT✦ MOTION & DETAIL✦ HTML & CSS✦ JAVASCRIPT✦ WEB APIS✦ RESPONSIVE DESIGN✦

01 / ExpertiseThe capability index — 12 skills / 12 projects

Skills, in practice.

From the first line of HTML to the final interaction. A closer look at the craft behind these projects.

01Foundations

HTML & semantics

HTML5
Semantics
Forms

structure.html•••

<main id="content">
  <section aria-label="Gallery">
    <figure>
      <img src="forest.jpg"
        alt="A quiet alpine lake"
        loading="lazy">
      <figcaption>Field Notes</figcaption>
    </figure>
  </section>
</main>

Illustrative snippet / real project skills

Clear structure is the first interaction. I build meaningful documents, labelled controls and image-led layouts that stay useful across screen sizes.

Landmarks and heading hierarchy
Native forms and descriptive labels
Image alternatives and lazy loading

See it in action

Field Notes Table Notes

02Foundations

CSS & layout

Grid
Flexbox
Responsive

layout.css•••

.collection {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .collection {
    grid-template-columns: 1fr;
  }
}

Illustrative snippet / real project skills

Layouts that adapt without losing their rhythm. I use grids, flexible spacing and theme variables to connect strong typography with reliable responsive behaviour.

Grid, Flexbox and fluid typography
Light/dark themes and design tokens
Responsive galleries and product UI

See it in action

Common Ground Component Portfolio

03Foundations

JavaScript

ES6+
DOM
Events

interaction.js•••

const form = document
  .querySelector('form');

form.addEventListener('submit', e => {
  e.preventDefault();
  const data = new FormData(form);
  const note = document
    .createElement('p');
  note.textContent = data.get('text');
  form.after(note);
});

Illustrative snippet / real project skills

Small interactions, complete flows. I connect browser events, interface state and safe DOM updates to build chat prototypes, timed quizzes and responsive controls.

Event handling and DOM composition
Timers, progression and feedback
Text rendering with textContent

See it in action

Common Room Trivia Quiz

04Product UI

UI systems

Design tokens
Components
i18n

tokens.css•••

:root {
  --surface: #111b2c;
  --ink: #f3f7ff;
  --accent: #74e1c2;
}

[data-theme='light'] {
  --surface: #ffffff;
  --ink: #182537;
  --accent: #087e6a;
}

Illustrative snippet / real project skills

A shared visual language across different screens. I organise reusable patterns, colour tokens and translated copy so the interface remains coherent as the content changes.

Reusable cards and navigation patterns
Theme tokens and consistent controls
English, Spanish and French copy

See it in action

Component Portfolio ASM Observatory

05Product UI

State & storage

CRUD
localStorage
State

state.js•••

const key = 'saved-tasks';
let tasks = [];

try {
  const saved = JSON.parse(
    localStorage.getItem(key) || '[]'
  );
  tasks = Array.isArray(saved)
    ? saved : [];
} catch {
  tasks = [];
}

Illustrative snippet / real project skills

Interfaces that remember the useful things. I manage task edits, product variants, saved recipes and local conversations, with recovery when stored data is unavailable.

Create, edit, complete and remove
Persistent carts, favourites and drafts
Storage validation and safe defaults

See it in action

Daymark Common Ground

06Product UI

APIs & async

REST
Async / await
JSON

request.js•••

async function getJSON(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Request failed');
  }
  return response.json();
}

// Loading → result → empty / error
// Keep a useful fallback visible.

Illustrative snippet / real project skills

Live data needs more than a fetch call. I build searches around OpenWeather, TheMealDB and OMDb, with loading, empty and error states that explain what happened.

REST requests and JSON rendering
Search, pagination and request states
Explicit network and sample fallbacks

See it in action

Atmos Table Notes Frame

07Experience

Accessible UX

Keyboard
ARIA
Focus

dialog.js•••

const dialog = document
  .querySelector('dialog');
const trigger = document
  .querySelector('[data-open]');

trigger.addEventListener('click', () => {
  dialog.showModal();
});
dialog.addEventListener('close', () => {
  trigger.focus();
});

Illustrative snippet / real project skills

An interaction should work beyond a mouse. I give dialogs, forms and controls clear names, visible focus and keyboard paths, with meaningful status and error feedback.

Keyboard navigation and focus return
Dialog semantics and live feedback
Reduced motion and readable contrast

See it in action

Field Notes Contact

08Experience

Motion & detail

Keyframes
Easing
Timeline

motion.css•••

.detail {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .32s ease,
    transform .42s cubic-bezier(.2,.8,.2,1);
}
.card:hover .detail {
  opacity: 1;
  transform: translateY(0);
}

Illustrative snippet / real project skills

Movement gives an interface rhythm. I build typing reveals, seamless marquees and controlled transitions, then give interactive scenes a timeline, easing and playback controls.

Typing, hover transitions and loops
Play/pause and timeline scrubbing
Motion preferences and stable layouts

See it in action

Form / Motion Lab Portfolio hero

09Experience

Canvas & SVG

Canvas 2D
SVG
PNG export

canvas.js•••

const canvas = document
  .querySelector('canvas');
const ctx = canvas.getContext('2d');

function draw(time) {
  ctx.clearRect(0, 0, 800, 600);
  ctx.fillStyle = '#74e1c2';
  ctx.beginPath();
  ctx.arc(200, 200, 40, 0, Math.PI * 2);
  ctx.fill();
  requestAnimationFrame(draw);
}

Illustrative snippet / real project skills

Graphics built in the browser. I combine generative Canvas scenes with SVG charts and vector previews, exposing colour, grid and composition controls plus useful exports.

Canvas rendering and animation frames
SVG charts and scalable interface art
PNG snapshots and layout CSS export

See it in action

Form / Motion Lab Signal / Data Studio

10Delivery

Data & discovery

Charts
URL state
CSV

filters.js•••

const params = new URLSearchParams(
  location.search
);
const source = params.get('source');
const filtered = rows.filter(row =>
  !source || row.source === source
);

filtered.sort((a, b) =>
  b.sessions - a.sessions
);

Illustrative snippet / real project skills

Make information easier to explore. I connect filters, charts and paginated tables, preserve a view in its URL and let users take filtered records away as a CSV.

Linked charts and sortable tables
Shareable filters and URL state
Pagination and CSV export

See it in action

Signal / Data Studio Frame

11Delivery

Browser APIs

Web APIs
Permissions
JSON export

platform.js•••

const support = {
  location: 'geolocation' in navigator,
  clipboard: 'clipboard' in navigator,
  online: navigator.onLine,
  language: navigator.language
};

// Detect support before using an API.
// Ask only when location is requested.
// Keep unavailable states explicit.

Illustrative snippet / real project skills

Understand the platform before using it. I work with browser capabilities, optional location and device readings, explaining unsupported features and permission outcomes clearly.

Capability detection and device readings
Optional geolocation and permission states
Clipboard actions and JSON reports

See it in action

ASM Observatory Atmos

12Delivery

Forms & services

Validation
Node.js / PHP
SMTP

contact.js•••

const fields = new FormData(form);
const body = new URLSearchParams(fields);

const response = await fetch(
  form.action, {
    method: 'POST',
    body
  }
);

// Confirm success before resetting.
// Keep the draft if delivery fails.

Illustrative snippet / real project skills

Useful forms need a complete delivery path. I connect validation and honest status feedback to an Express mail service, alongside PHP endpoints for browser diagnostics.

Validation, drafts and submission states
Express, Nodemailer and SMTP replies
CORS, rate limiting and PHP endpoints

See it in action

Contact ASM Observatory

02 / Selected WorkInterfaces · data · motion

Projects, with character.

Twelve working explorations. Each with its own identity, each built around a different part of the front-end craft.

01 /Photo Gallery

Field Notes

Filter a 36-image local collection by chapter or search term, move through paginated results and open an accessible keyboard lightbox.

Local data
Filters
Lightbox

Explore

02 /Weather App

Atmos

Search live OpenWeather conditions by city or use location, switch °C/°F and keep recent places with a labelled sample fallback when the API is unavailable.

OpenWeather
Units
Fallback states

Explore

03 /Chat Interface

Common Room

Write to local browser channels with named messages, keyboard-first submission, reactions and persistence. It is a single-user interaction study, not a live chat service.

Local state
Keyboard UX
Feedback

Explore

04 /Task Manager

Daymark

Create, edit, complete and remove tasks with due dates and priorities; filter and sort them while resilient local storage preserves the list.

CRUD
Local storage
Task state

Explore

05 /Web Observatory

ASM Observatory

Inspect browser-reported readings, test platform capabilities, switch languages and themes, and export a local JSON report. Optional address and location checks are explicit.

Web APIs
Accessibility
PHP endpoint

Explore

06 /Recipe Discovery

Table Notes

Discover recipes through TheMealDB by ingredient, cuisine or surprise; save favourites locally and open a safe, detailed recipe view with fallback content.

TheMealDB
Search
Saved state

Explore

07 /Component Portfolio

UI System

A static component-system study with reusable project cards, category filters, theme tokens and a local contact draft. The original React source remains separate.

UI system
Components
Responsive

Explore

08 /Product Experience

Common Ground

Select product images, colour, size and quantity; add variants to a persistent browser bag and review a prototype checkout with no payment processing.

Product UI
Variants
Cart state

Explore

09 /Trivia Quiz

Trivia Quiz

Answer ten timed questions, receive immediate right/wrong feedback, track progress and finish with a local score and restart flow.

Timer
Game state
Feedback

Explore

10 /Movie Explorer

Frame

Search the OMDb catalogue with pagination, handle missing posters and open a focused film detail view; blocked or empty responses remain explicit.

OMDb
Pagination
Detail view

Explore

11 /Data Studio

Signal

Explore 360 synthetic traffic records through linked SVG charts, URL-synced filters, a sortable paginated table, keyboard selection and CSV export.

SVG charts
URL state
CSV export

Explore

12 /Motion Lab

Form

Build a generative Canvas scene with play/pause, timeline scrubbing, easing, palettes, pointer depth and grid controls; export a PNG and layout CSS.

Canvas 2D
Animation
CSS export

Explore

Independent projects. Real interactions. Built to be explored.Have something in mind?

03 / Get in touchIdeas become interfaces

Something in mind?Let’s make it happen.

A new website, a better interface or a thoughtful collaboration. Tell me what you are working on.

GitHub ↗LinkedIn ↗