Personal Project
Personal Portfolio
Overview
I built this portfolio to give my work more context than a CV can provide. Alongside experience and skills, it brings individual projects into focus through stories about the problems, implementation choices and outcomes behind them. Building it also became an opportunity to work through the details of a bilingual Next.js application that can be deployed entirely as static files.
My Role
- I developed the site with Next.js App Router, React, TypeScript and Tailwind CSS, creating reusable components for project cards, technology lists, navigation and case-study pages. I kept the portfolio content in structured JSON so that adding a project or updating my experience would flow through the existing pages without requiring a new layout each time.
- I extended the experience with English and Czech routes, language switching and persistent theme preferences. To check how those features behave after deployment, I added Playwright coverage for locale selection, navigation, browser storage restrictions and the generated static pages.
Architecture & Technology
- The site generates its pages at build time and exports HTML, CSS and JavaScript for static hosting. Typed content files supply each language's portfolio data, while next-intl handles shared interface text and locale-aware navigation. Project detail routes are generated from the slugs in the content, connecting the project listing and individual stories through the same data model.
- English and Czech pages live under explicit /en and /cs URLs. A separate entry page chooses a language in the browser using a saved preference, supported browser languages and an English fallback. Separate root layouts give the exported pages the correct document language, while a shared document component integrates theme initialization. Localized metadata provides canonical URLs and language alternatives.
Engineering Challenges
- The main challenge was making language selection feel natural within a static deployment. A visitor opening a direct link needs to see the language in that URL, even if their browser or saved preference suggests another one. I kept automatic detection at the root entry point and made explicit language switches remember the visitor's choice while preserving the current path, query parameters and fragment.
- Preferences also needed to survive the less convenient cases: browser storage can be blocked, and switching between locale layouts can affect theme initialization. I added defensive storage handling and shared theme setup, then covered those interactions in browser tests. Testing the actual export helped check the behaviour visitors receive from static hosting, including document language, metadata and favicon links.
Results & Impact
- The result is a portfolio that connects a concise introduction with deeper project stories, experience and learning history. Its reusable page structure lets the content grow through data changes, while the static export keeps deployment independent of a running Node.js server.
- The project also gave me a practical way to bring localization, browser preferences and static rendering together. Automated checks now cover the supporting behaviour that is easy to overlook when reviewing a page visually, from language resolution to navigation and exported document attributes.