* The project is currently ongoing and still in active development.
Project Overview
For this project, I developed a web-based system that uses a Strapi backend as a content management system (CMS). The goal was to create a flexible and user-friendly platform for the administration and dynamic presentation of projects that meets the requirements of modern and scalable web design.
Projects can be divided into Graphic Design, Web Development, and other categories on the back end. The data is displayed in an elegant front-end interface via a structured API.
Concept and Implementation of Strapi-Backend
-) Implementation of a Strapi system for managing projects and categories.
-) Add relational structures between projects and categories.
-) Extension of the API for individual requirements, including support for images and sorted data.
-) Add relational structures between projects and categories.
-) Extension of the API for individual requirements, including support for images and sorted data.
Content Manager
content-type-builder
Frontend Development
-) Dynamic loading and display of projects by category.
-) Display of project-related data such as title, description, date, thumbnails and other metadata.
-) Display of project-related data such as title, description, date, thumbnails and other metadata.
Fetch data over API and prepare for the Frontend
Data output on the UI
Data from Strapi-Backend over API in JSON format
User Interface and Design
During the project, I specifically used animations to improve the user experience and promote interactivity. These animations were implemented using modern web technologies such as Tailwind CSS and GSAP (GreenSock Animation Platform).
Micro animation demonstration
Design Process
The Figma wireframe served as the basis for the implementation of the front end and as a communication tool between the design and development phases. This structured design process enabled me to ensure that the layout met the requirements both aesthetically and functionally.
Low-Fidelity Wireframes
The design process began with rough hand sketches on paper to define the basic structure and functionality of the website. These low-fidelity wireframes helped me to define the key layout elements and navigation without being distracted by design details.
High-Fidelity Wireframes
After the paper phase, I transferred the sketches to Figma and implemented them as high-fidelity wireframes. In the process I:
-) Refined visual details, such as spacing, content placement, etc.
-) Inserted placeholder content (blindtext, images) to display the project data and other website contents (titles, thumbnails, descriptions, etc.).
-) Inserted placeholder content (blindtext, images) to display the project data and other website contents (titles, thumbnails, descriptions, etc.).
Moodboard
Defined the whole Website CI (typography, Colorsheme, Images, Illustrations, Icons) - including reference images and textes.
background-shapes
colorsheme
phrases
Hyperlinks
Typography
Logos
Conclusion
This project shows my ability to combine complex backend architectures with user-oriented frontend solutions as well as my understanding of UI design and animations. It combines clean data structures, API integration and visually appealing user interfaces. The result is a modern, scalable system that can be used in a variety of ways.
