← Back to portfolio

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
Screenshot of the portfolio homepage

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.

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

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

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

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

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

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

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

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

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

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

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

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 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