Skip to content

Learnings from Building My Portfolio Site

This file summarizes what I have learned while building and deploying this project, and what problems it solves for me as a professional.

Why I Built This Project

The main goal was to create a personal portfolio site to: - Showcase my projects and technical learnings - Build a place to document and share my professional journey - Have a single link to share with employers and collaborators

Key Learnings

1. Creating a Portfolio from Scratch

  • Planned the structure and content for a personal website
  • Designed and implemented a modern, responsive portfolio using HTML, CSS, and JavaScript

2. Free Hosting with GitHub Pages

  • Learned how to host static sites for free using GitHub Pages
  • Understood the workflow of pushing changes to GitHub and seeing them live on the web

3. Custom Domain Setup

  • Bought my first custom domain for a personal website
  • Learned how domains work, including DNS basics
  • Configured my domain provider to route the custom domain to my GitHub Pages site
  • Set up the CNAME file and verified HTTPS/SSL for a professional appearance

3. Custom Domain Setup

  • Bought my first custom domain for a personal website
  • Learned how domains work, including DNS basics
  • Configured my domain provider to route the custom domain to my GitHub Pages site
  • Set up the CNAME file and verified HTTPS/SSL for a professional appearance

    Cost: The only expense for this project was the custom domain, which cost 10 EUR per year. All other services (GitHub Pages, Formspree basic tier) were free.

4. Setting Up a Contact Form (for Free)

  • Learned how to use Formspree to add a contact form to my site without a backend
  • Configured the HTML form to send messages directly to my email using Formspree's free tier
  • Now visitors can easily reach out to me through the website

5. Hosting and Managing a Static Website

  • Learned how to host a static site on GitHub Pages for free
  • Understood how to manage project files and directory structure for a static website

6. Modern HTML & Semantic Structure

  • Used semantic HTML5 elements (section, header, nav, etc.) for accessibility and SEO
  • Organized content into logical sections (hero, projects, skills, contact)

7. Responsive CSS & Design Systems

  • Created a responsive layout using flexbox and grid
  • Used CSS custom properties (variables) for a maintainable color palette and theme
  • Implemented dark mode with CSS and toggling classes
  • Designed visually appealing cards, buttons, and section dividers
  • Worked with media queries for mobile, tablet, and desktop breakpoints

8. JavaScript for Interactivity

  • Added event listeners for navigation, smooth scrolling, and mobile menu toggling
  • Handled AJAX form submission and provided user feedback
  • Used localStorage to remember user preferences (like dark mode)

9. Integrating Third-Party Libraries & APIs

  • Used Font Awesome for icons
  • Loaded Google Fonts for custom typography
  • Fetched and displayed data from the GitHub API (latest commit activity)

10. User Experience (UX) Improvements

  • Provided downloadable content (CV)
  • Added visual feedback for actions (form submission, GitHub activity loading)
  • Ensured accessibility through color contrast and semantic markup

11. Coding Frontends with Agentic LLM and Prompt Engineering

  • Learned how to design and code frontend solutions using Agentic LLM (Large Language Model) development methods
  • Incorporated prompt engineering to achieve desired coding results and improve development efficiency

Last updated: 2025-05-31