Frontend & Web Case Study
Professional Portfolio Website
A responsive personal CV and portfolio website created to present professional experience, technical skills, certifications, and project case studies through a clear and accessible interface.
Project Overview
The project began as a personal CV and portfolio assignment and was developed into a professional website for presenting work experience, certifications, technical competencies, and detailed project case studies. The current version focuses on a lightweight static architecture, responsive design, accessibility, maintainability, and reliable deployment.
Objectives
- Create a professional personal website suitable for recruiters and hiring managers
- Present About Me, CV, and Portfolio content through separate semantic pages
- Provide at least five project entries with clear descriptions and technologies
- Build a responsive layout for mobile, tablet, and desktop screens
- Use Flexbox, CSS Grid, and media queries appropriately
- Keep the initial implementation free from JavaScript and external frameworks
- Create a maintainable structure that can support future functionality
Information Architecture
The website is organized into separate pages with shared navigation: an About Me page for professional positioning and skills, a CV page for experience and qualifications, a Portfolio page for project summaries, and dedicated case study pages for detailed project documentation. The site uses a shared external stylesheet and consistent semantic structure.
Frontend Implementation
Semantic HTML5 elements structure the site, with one shared external CSS file. The design follows a mobile-first approach using Flexbox for navigation and alignment and CSS Grid for project cards and content groups. Media queries support 375px, 768px, and 1024px breakpoints. File names and CSS classes use lowercase, hyphenated conventions, and images are stored locally under the assets directory.
Accessibility
- Skip-to-content links
- Visible keyboard focus styles
- Descriptive image alternative text
- Sensible heading hierarchy
- aria-current for active navigation
- Links with clear and descriptive text
- Responsive layouts that avoid horizontal scrolling
Deployment and Domain Configuration
The source code is managed with Git and GitHub. Development changes are made in feature branches and integrated through pull requests. The website is deployed from the main branch using GitHub Pages, with a custom domain connected through DNS and HTTPS enabled for encrypted delivery.
Local development in IntelliJ IDEA
→ Git feature branch
→ GitHub pull request
→ Main branch
→ GitHub Pages
→ Custom domain with HTTPS
Technology Stack
Core Web
Layout
Development and Version Control
Deployment
Engineering Decisions
Static HTML and CSS were chosen for the first version to meet the assignment constraints and keep the site lightweight. A shared stylesheet and reusable classes support consistency and maintainability. Separate project detail pages prevent the main Portfolio page from becoming overcrowded. Feature branches and pull requests provide controlled integration into the main branch. GitHub Pages provides an appropriate deployment platform for the current static architecture. The project structure allows JavaScript or a frontend framework to be introduced in a future version without changing the public domain.
Current Status and Future Development
The current version is live and actively maintained. Future development may include JavaScript-based interaction, project filtering, improved content management, automated testing, performance optimization, and a future migration to a component-based frontend architecture if the project requirements justify it.