Bilingual Portfolio Website Development

Web: https://www.tomiscattini.com/

Platform: Static bilingual website

Project period: September 2026 – Present

My personal portfolio is a focused presentation of my professional work as a full-stack developer. It brings together selected projects, detailed case studies, technical skills, testimonials, professional information, and downloadable résumés in a website designed specifically for recruiters, clients, and product teams.

I built the site with Astro, TypeScript, and Tailwind CSS. Unlike my broader Lydiob7 platform, which includes educational content and full-stack application functionality, this portfolio has a deliberately narrow purpose: present my work clearly and load as quickly as possible.

The main challenge was creating a portfolio that could hold a growing body of detailed work without becoming a heavy application or making projects difficult to browse.

The website needed to:

Present both a concise overview and complete project case studies.

Support English and Spanish across pages, navigation, metadata, and content.

Keep case-study content structured and easy to maintain outside the UI code.

Allow visitors to filter projects by areas such as full-stack, frontend, mobile, and e-commerce development.

Remain responsive, accessible, and usable across screen sizes.

Generate search-friendly metadata, canonical URLs, and language alternatives.

Provide direct access to localized PDF résumés and contact information.

Ship as a lightweight static website without requiring a database or application server.

I developed the portfolio as a statically generated Astro website. Pages are rendered during the build, producing a lightweight deployable site with minimal client-side JavaScript.

Interactive behavior is added only where it provides value, such as project filtering and mobile navigation. This keeps the core experience fast and resilient while avoiding the runtime overhead of a larger client application.

Project case studies are stored as Markdown and loaded through an Astro content collection. A typed schema validates titles, excerpts, categories, clients, dates, and featured images before the site is generated.

Reusable Astro components transform this content into project cards, archive views, detailed case-study pages, and previous/next navigation. This separation keeps editorial content independent from presentation code and makes adding new work straightforward.

The site has dedicated English and Spanish routes, localized interface copy, bilingual case studies, language-aware navigation, and separate résumé files for each locale.

Canonical and alternate-language links are generated for the main pages and each case study, ensuring that the two versions remain connected for both visitors and search engines.

Visitors can browse selected work or explore the complete archive. Client-side category filters update the visible project cards without a page reload while preserving the static nature of the website.

The visual system was implemented with Tailwind CSS and custom styling, using responsive layouts, locally hosted typography, keyboard focus states, reduced-motion support, semantic navigation, and a skip-to-content link.

The result is an independent professional portfolio optimized around a single task: helping people understand what I have built and how I work.

Its static architecture keeps hosting and maintenance simple, while the content-collection approach gives the project enough structure to support a growing archive in two languages. The site also creates a clearer separation between my professional portfolio and Lydiob7's broader educational platform.

From an engineering perspective, the project gave me practical experience designing a content-heavy Astro site around static generation, internationalization, accessibility, SEO, and maintainable content architecture rather than treating the portfolio as a collection of hard-coded pages.

Astro

TypeScript

JavaScript

Tailwind CSS

Responsive Web Development

Progressive Enhancement

Astro Content Collections

Markdown Content

Static Site Generation

Component Architecture

Schema Validation

Content Modeling

Internationalization

Localized Routing

Bilingual Content

Dynamic Project Filtering

Accessibility

Technical SEO

Responsive Design

Performance Optimization

Git