← Back to portfolio

Featured Project

Portfolio Website

My first portfolio project built to present my work in a clear, structured, and visually focused way. The main goal was to create a site that feels responsive, easy to navigate, and strong enough to grow with future projects.

Frontend Development Semantic HTML Responsive Design Localization / i18n Accessibility UI Architecture VCS / Git

Live Preview Source Code

Overview

Why I built this project

This project was created as the foundation of my online presence. I wanted a portfolio that does more than list projects: it should reflect how I think about structure, visual hierarchy, performance, and user experience. Because this is my first showcased project, it also works as a statement of how I approach web development.

Goals

What this project should achieve

Present who I am and what I focus on in a clearer way
Show projects with more structure instead of visual overload
Create a portfolio that feels usable on desktop and mobile
Build a foundation that can grow with future projects and deeper case studies

Click to flip

Summary

How those goals show up here

The page introduces me more clearly than a simple project list would
Project details are broken into sections and cards instead of one long block
The layout is meant to stay usable across desktop and mobile screens
The structure is prepared to grow with more projects and deeper case studies over time

Click to return

Focus

What I paid attention to during development

Keeping the page visually strong without making it harder to read
Structuring content so sections and cards stay easy to scan
Using interactions and transitions with more intention instead of adding effects everywhere
Building a presentation that feels personal, but still controlled and usable

Click to flip

In Practice

What that focus changed on the page

Hero text and CTA area were adjusted to feel clearer and less overloaded
Cards were grouped and reordered to tell the project story more cleanly
Interactions like hover, flip, focus, and motion were refined instead of used randomly
The visual style stayed expressive, but with more attention to readability and structure

Click to return

Features

What is already part of the site

A hero section with clearer self-presentation and direct calls to action
Project cards with dedicated detail pages
A zoomable image preview for project screenshots
Language switching, flip cards, and navigation support across the site

Click to flip

On the Page

How these features support the project

The hero introduces me, my direction, and the next actions visitors can take
Project cards make it easier to scan work first and explore details second
Image preview helps present project visuals without overcrowding the layout
Interactive elements make the portfolio feel more usable, layered, and intentional

Click to return

Tech Stack

What I built this with

HTML, CSS, and JavaScript as the main foundation
A separate translations file for multilingual content
Reusable card and section patterns for project pages
A structure that can be extended with new content over time

Click to flip

Why this stack fits

Why I used this setup

It keeps structure, styling, behavior, and content easier to separate
It gives me control over layout and interaction without relying on a framework
It is flexible enough to grow with more pages, languages, and detail cards
It helps me learn the foundation before adding more complexity

Click to return

Frontend Development

How I approach frontend work here

Combine structure, styling, and interaction inside one project instead of treating them as separate parts
Improve the page step by step through testing, iteration, and refinement
Build interfaces that should feel clearer, more usable, and more intentional over time
Use the portfolio itself as practice for real frontend thinking and problem-solving

Click to flip

In Practice

How that shows up in this project

Layout, visuals, and interactions were adjusted together instead of in isolation
UI decisions were revisited after testing on desktop and mobile
Features like flip cards, image preview, and language switching were integrated into the same overall system
The project became a place to practice both implementation and frontend decision-making

Click to return

Semantic HTML

How I think about structure in HTML

Use meaningful elements like header, main, section, article, and footer instead of relying only on generic containers
Organize content through headings, lists, and clearer grouping
Think about what a block is supposed to represent, not only how it should look
Use structure to support readability, page hierarchy, and accessibility

Click to flip

In Practice

How that shows up in this project

The page is divided into clearer content areas instead of one flat layout
Project information is grouped into sections and cards with a more readable hierarchy
Lists are used where grouped points actually belong together
Semantic structure helps support keyboard use, labels, and the overall accessibility work

Click to return

Responsive Design

How I approach responsive design

Check how the layout behaves across desktop and mobile instead of designing for one screen only
Use media queries to adapt grids, spacing, and content flow when the layout starts to break
Adjust card height and layout behavior when text wraps differently on smaller screens
Treat responsive work as active layout problem-solving, not just automatic scaling

Click to flip

In Practice

How that showed up in this project

Card heights had to be increased so longer content would still fit on smaller screens
Grid layouts were adjusted when side-by-side content no longer felt balanced
Mobile testing revealed issues that were not visible on desktop first
Responsive work became part of checking structure, spacing, interaction, and readability together

Click to return

Localization

How I structured multilingual content

Use data-i18n markers to connect HTML content with translation keys
Keep translation content in a separate file instead of scattering text changes across the page
Translate not only visible text, but also alt texts and aria labels
Apply the same system across the main page and project detail pages

Click to flip

In Practice

How that works in this project

Language buttons switch the visible content without rebuilding the layout
Text, labels, and image descriptions change together through the same translation system
The setup is structured so adding another language would mostly mean extending keys and content
Localization became part of the site structure instead of a last-minute text replacement

Click to return

Accessibility

How I approach accessibility here

Improve keyboard use through focus states and interactive controls that stay reachable
Add alt texts, labels, and state information so content and actions are easier to understand
Support reduced motion so interaction does not rely on strong animation
Use structure and clearer feedback to make the page easier to follow overall

Click to flip

In Practice

How that shows up in this project

Flip cards can be used with click, keyboard input, and visible focus states
Alt texts and labels are part of the translated content instead of being ignored
Reduced-motion support changes scrolling and animation behavior when needed
Accessibility work became part of layout, interaction, and content decisions together

Click to return

UI Architecture

How I think about page structure

Set the content order before styling individual sections
Start with goals, focus, features, and stack before going deeper into badge topics
Use repeatable cards to separate project explanation, technical topics, learning, and next steps
Give each section a clear role inside the overall project story

Click to flip

In Practice

How that shows up on my pages

The index page is split into topbar, hero, project overview, contact, and footer instead of one undirected flow
Project detail pages follow a clearer sequence from goals and focus to topic cards and reflection
Cards are used as repeatable building blocks instead of writing everything in one long section
The structure is meant to make future projects easier to add and easier to read

Click to return

Version Control (Git)

How I use Git in this project

Track progress through commits instead of relying on manual folder backups
Use staging to decide what belongs in the next commit and what is still work in progress
Keep local-only files out of the repository through .gitignore
Use Git as part of a clearer workflow for changes, structure, and project maintenance

Click to flip

In Practice

How that showed up here

Added a .gitignore after Visual Studio created a local .vs folder
Used commits to separate layout, interaction, localization, and accessibility changes more clearly
Checked changes with git status and git diff before staging and committing
Built personal notes around fetch, branching, restore, stash, and commit structure while working on the project

Click to return

Learning

What I learned from building this

A lot of the real work happens at the beginning when structure and page order are being planned
It is easy to stay too long in the open-ended polishing phase because that part can continue almost forever
The important part is the insight, the practice, and the steady improvement that comes from building
Going deeper into one project can teach more than quickly jumping between unfinished ideas

Click to flip

What stayed

What I would carry into the next project

Start with structure and content order earlier instead of trying to fix everything later through styling
Use polishing to refine a project, but do not let it replace actual progress or finished decisions
Treat each project as practice that should improve judgment, not just produce a final screen
Keep moving forward, because growth comes more from repeated building than from trying to perfect one detail forever

Click to return

Next Steps

What I want to add next

Add more finished projects beyond this portfolio page
Use future project pages to show a wider range of work and learning
Make the site feel more balanced by not centering everything around one project
Turn the portfolio into a broader overview instead of one detailed example with placeholders around it

Click to flip

Looking Ahead

How I see this project growing

The portfolio should become a clearer record of both finished work and ongoing learning
Future detail pages can reuse the same structure while becoming more specific and stronger in content
New projects should make the site feel more balanced and less centered around one single example
The goal is not to freeze the page, but to keep evolving it with better decisions over time

Click to return