This portfolio.

React and TypeScript

I built this website with React and TypeScript, organising the interface into components and pages for projects, books and personal introductions. I use hooks to manage interface state and effects related to navigation and language.

Vite provides the development environment and generates the production build. The build process checks types with TypeScript and prerenders each page’s content into HTML. React hydrates that HTML to enable interactions.

Design with CSS

The website has a shared entrance and two sections with their own designs: development and writing. I used CSS with Grid, Flexbox, variables and media queries to build the layouts and adapt them to different screen sizes.

The interface includes visible keyboard focus, skip links and styles that respect reduced motion preferences.

Markdown and YAML content

Text lives in Markdown files with YAML headers, separate from the components. Each project, book and stage of the writing journey has its own document.

I use react-markdown to render content and yaml to read header fields. A shared module loads files through Vite’s import.meta.glob and validates their structure and the fields each section needs. This allows text to be edited without changing interface code.

Spanish and English

I integrated i18next and react-i18next to handle both languages. Each language has its own content files. The language is represented in the URL: Spanish routes are preserved and English routes use the /en prefix, so each version can be shared and indexed separately.

Browser navigation

Internal navigation uses the History API, with individual routes for projects and books, page changes without reloads and support for the browser’s back and forward buttons. Route changes reset scrolling and move focus to the content; page titles in the development and writing sections update according to the page and language.

HTML and metadata for each page

The build generates static pages, a sitemap and robots.txt. Each route includes a title, description, canonical URL, alternate language links, Open Graph tags and JSON-LD structured data. Content is available in the HTML before JavaScript runs.