Icon

Manuel Kunert

Persönliche Marke und Portfolio-Website.

Website Vorschau

01

Übersicht

Mein Ziel war es, eine schlichte aber hochwertige Portfolio-Website zu entwickeln, auf der ich mich und meine Projekte vorstellen kann.

Neben der Funktion als Portfolio dient die Website auch als Designprojekt. Alle verwendeten Symbole, Animationen und Oberflächenelemente wurden speziell für diese Seite gestaltet und entwickelt.

Um volle Kontrolle über Gestaltung und Entwicklung zu haben, habe ich die Website von Grund auf mit HTML, CSS, JS und PHP entwickelt. Bereitgestellt wird die Website über einen selbstbetriebenen Debian-Server.

Projektart
Portfolio-Website
Rolle
Design, Umsetzung und Administration
Technik
HTML, CSS, JS, PHP
Status
In Entwicklung

02

Konzept

Die Website sollte möglichst reduziert und persönlich wirken. Statt vieler Elemente und komplexer Navigation soll der Fokus auf den Inhalten liegen. Besucher sollen sich schnell orientieren können und einen direkten Eindruck von mir und meiner Arbeit erhalten.

Gleichzeitig war es mir wichtig, der Website einen eigenen Charakter zu verleihen. Dafür verwende ich meine selbst entwickelten Symbole, die sich durch das gesamte Erscheinungsbild ziehen. Kleine Animationen und Mikrointeraktionen sorgen dafür, dass die Seite lebendig wirkt, ohne dabei von den Inhalten abzulenken.

03

Gestaltung

Das Logo in verschiedenen Varianten

Für meine persönliche Marke habe ich auch ein eigenes Logo entworfen. Ein stilisiertes M, das aus drei Dreiecken konstruiert wird. Die reduzierte Form sorgt dafür, dass das Logo auch klein dargestellt gut erkennbar bleibt.

Die Website dient in erster Linie als Portfolio, ist für mich aber auch ein eigenes Designprojekt. Viele der verwendeten Symbole, Animationen und Oberflächenelemente habe ich speziell für diese Seite erstellt.

Profilkarte mit 3D-Effekt

Besondere Aufmerksamkeit erhielt die Intro-Karte auf der Startseite. Sie greift die Optik einer Profilkarte aus meiner App Kreis auf und reagiert auf Mausbewegungen mit einer leichten räumlichen Neigung sowie einem dezenten Glow-Effekt.

04

Umsetzung

Code-Editor mit HTML und CSS

Die Website wurde von Grund auf mit HTML, CSS, JavaScript und PHP entwickelt. Auf Frameworks oder Website-Baukästen habe ich verzichtet, um Gestaltung und technische Umsetzung vollständig selbst kontrollieren zu können.

Neben Frontend und Design habe ich auch die technische Infrastruktur selbst aufgebaut. Die Website läuft auf einem eigenen Debian-Webserver mit Apache. SSL-Zertifikate, Serverkonfiguration, Firewall und Wartung übernehme ich ebenfalls selbst.

Terminal mit Status des Apache-Webserver

Dadurch war das Projekt nicht nur eine gestalterische Aufgabe, sondern auch eine praktische Auseinandersetzung mit Webentwicklung, Hosting und Serveradministration.