This page details the process of creating this portfolio website for the purpose of showcasing my work.
Web Design
โข
Content Management
Overview
Scope
I created this portfolio website as a small-scale student project using WordPress in combination with Local WP for the purpose of showcasing my projects and work experience.
Since the goal was to have a portfolio website where updating and managing content can be done with minimal upkeep, I used the opportunity to get familiar with the WordPress ecosystem.
Involvement
Web design, content management
Date
February 2025
Tools and Technologies
Figma, WordPress, LocalWP, GitHub
The Problem
Portfolio websites need to balance professional presentation with easy content management. For this student project, I created a WordPress-based portfolio that serves as a central hub for my projects and work experience, with a focus on minimal upkeep and a mobile-first design approach.
Creating A Minimal-Upkeep Portfolio Website
Objective
The objective of this project was to design and implement a personal portfolio website that provides a professional and central place to showcase my work experience, skills, and project contributions. Beyond serving as a visual presentation, the site was intended to be easy to maintain, allowing for quick updates as new projects and experiences arise. A secondary goal was to gain hands-on experience with WordPress as a content management system and to explore how its ecosystem supports flexibility, scalability, and a mobile-first design approach.
Target Users
The primary audience for the portfolio website includes recruiters, potential employers, and potential clients. These users require a clear and efficient way to assess my skills, past work, and relevant experience. For this reason, the site should have clearly structured content, consistent and memorable design, and responsiveness to ensure that information can be quickly found and understood across devices.
Gathering Inspiration
At the beginning, I looked at various UX/UI design and developer portfolios. On the one hand, I gathered inspiration for design options and, on the other hand, I analyzed what characteristics make a great portfolio.
Another step in the preparation process was to familiarize myself with WordPress. Since I had never really worked with WordPress before, the wealth of information, platforms, plugins, and extension options was initially quite overwhelming. Based on various guides, I decided to use the WordPress theme Astra in combination with Elementor to take advantage of its strong support for responsiveness and mobile devices. For local development, I chose the LocalWP tool, which enabled user-friendly and uncomplicated local use of WordPress. I also created a GitHub repository for versioning.
Design
After creating a style guide to define the desired look and feel, I started designing the layout and components. I first created the mobile versions of the pages in line with the mobile-first approach. That turned out to be quite tricky because I didn't really know what technical limitations I would face with the free versions of Astra and Elementor. So I first created a test page to get an overview of the options actually available to me. I then adjusted my approach accordingly.
Colors
Typography
Arriving at the final design
Although I had a fairly solid idea of what I wanted the website to look like, it did take me several iterations and tweaking to arrive at a version that I felt satisfied with. Unfortunately, the limitations of what I could get out of the free WordPress theme did limit my initial plans somewhat, such as a filtering system that I scrapped in favor of getting the website up and running in the amount of time I had available to me.
Development
After preparing the content in Figma, it wasn't too complicated to transfer it into WordPress. Although this process was relatively straightforward, it quickly turned out to be tedious. What bothered me most was that I couldn't find a way to create the right components for individual elements that would update themselves across all instances with global editing. Apart from the footer, header, and individual basic elements such as headings and buttons, I was limited to copy-paste. Custom CSS also proved to be cumbersome, and I often searched in vain in Elementor for settings for certain CSS properties such as a simple max-width.
Since I could only host static pages on the free plan of my hosting provider of choice, I first used the WordPress plugin WP-Optimize to optimize the file size and formats of the embedded media. I then generated a static version of the website with the Simply Static plugin for deployment.
Retrospective
Overall, I am satisfied with the end result and am glad that I took the opportunity to familiarize myself with WordPress. One lesson that I will definitely take with me for future projects is that thorough preparatory work in the Theme Customizer and careful creation of templates can save a lot of frustration and time when working with WordPress. I found the LocalWP tool particularly useful, as it made creating and maintaining a local development server for WordPress sites really easy and straightforward.
The End Result
Look at that, youโre already here! Have a look around to see which other corners in this portfolio might interest you.