Project Case Study

PortfolioWebsite

A dynamic personal portfolio with CV, resume, and project details.

Project Overview

Personal Portfolio

🌟 Overview

This project is a personal portfolio website. It is designed to showcase personal projects, professional experience, and skills in a clean and modern web interface. The backend is powered by Java and Spring Boot, with a dynamic frontend that leverages Thymeleaf.

Key Features

  • Dynamic Project Showcase: Automatically fetches and displays public project repositories from a Gitea instance.
  • Detailed Project Views: Each project has a dedicated page that pulls in README.md, documentation.md, and other details directly from its repository.
  • Interactive Resume: A digital, easy-to-navigate resume page.
  • Contact Form: A fully functional contact form that sends an email upon submission.
  • Markdown Rendering: Project documentation and details written in Markdown are seamlessly converted to HTML.

Focusing on simplicity, usability, and a clean user experience.

Technology Stack

🛠️ Tech Stack

Backend

  • Language: Java 25
  • Framework: Spring Boot
  • Web: Spring MVC for traditional request handling and Spring WebFlux for the reactive WebClient used to communicate with the Gitea API.
  • Templating: Thymeleaf for server-side template rendering.
  • Email: Spring Boot Starter Mail for handling contact form submissions.

Frontend & Interactivity

  • Styling: Bootstrap 5, HTML5, and custom CSS for a responsive and clean design.

Other tools

  • Markdown Processing: commonmark-java for parsing and rendering Markdown files into HTML.
  • Version Control: Git for source code management.

Build & DevOps

  • Build Tool: Maven

Technical Documentation

📖 Documentation

Project Structure

The project follows a standard Spring Boot application structure:

  • src/main/java/com/example/Portfolio: Root package.
    • Controllers: Contains Spring MVC controllers for handling web requests.
    • Services: Houses business logic, such as fetching project data from Gitea and sending emails.
    • DTO: Data Transfer Objects used to shape data for the views.
    • Component: Contains general-purpose components, like the Markdown service.
  • src/main/resources:
    • static: For static assets like CSS, JavaScript, and images.
    • templates: Contains Thymeleaf HTML templates.
    • application.properties: For application configuration.

The Roadmap

🚀 Future Plans

I am constantly looking to evolve my Personal Portfolio. Here is what is currently on my development roadmap:

User Experience & Features

  • Interactive Project Filtering: Implement functionality on the homepage to allow users to filter projects by technology (e.g., Java, Python) or search by name, making it easier to navigate my work.
  • Blog with Rich Features: Introduce a blog section with support for categories, tags, and a search function to help users easily find articles and tutorials.
  • Theme-Switcher (Dark/Light Mode): Add a user-controlled toggle to switch between a light and dark theme, improving visual comfort and accessibility.
  • Embedded Demo Videos: Enhance project pages by embedding actual demonstration videos, providing a dynamic look at how the applications work.
  • Accessibility Enhancements: Perform an accessibility audit and implement improvements to ensure the portfolio is compliant with WCAG 2.1 standards, making it usable for everyone.

Technical & Operational Enhancements

  • Externalize Resume Data: Refactor the ResumeController to load personal and resume data from an external YAML or JSON file. This will allow for content updates without needing to recompile and deploy the application.

Video Demonstration

Walkthrough Video Coming Soon