Kurzbeschreibung
Meine eigene Website, Hauptziel war es mein Web Development Können zu erweitern und mein Portfolio zu veröffentlichen. Laufendes Projekt, wird noch erweitert. Für diese Website ist auch mein Figma-Prototyp entstanden. Einige Dinge haben sich in der aktuellen Website-Version im Vergleich zum Figma-Prototypen geändert (Beispiel: Portfolio ist jetzt Chronologisch und nach Kategorien sortierbar).
Stand: Dezember 2025
- Alle wichtigen Seiten(Homepage, Portfolio, Projekte, About Me, Kontakt) sind erstellt und funktionieren wie erwünscht.
- Design sollte als nächstes überarbeitet werden.
Homepage
Portfolio-Seite
Projekt-Seite
About Me-Seite
Kontakt-Seite
Technische Details
- IDE: Visual Studio
- Genutzte Programmier-Sprachen: HTML, CSS, JavaScript
- Design in Figma geplant
Learnings
- Web Development Wissen vertieft.
Figma-Prototyp
Kurzbeschreibung
Ein kleiner, in Figma erstellter, Prototyp als Orientierung für meine Portfolio-Website.
Hintergrund
Ich brauchte einen groben Plan wie ich meine Portfolio-Website gestalten möchte. Eine Freundin empfahl mir dafür Figma, daraufhin ist dieser Prototyp entstanden. Als mir bewusst wurde, dass ich das Figma Projekt nicht einfach in ein .html Projekt konvertieren/exportieren kann, begann ich mit dem Entwickeln der tatsächlichen Website.
Struktur
- Homepage: Eine große Card, in der ich mich kurz vorstelle. Außerdem zwei große sichtbare Buttons in der Card: "My Portfolio" und "Contact Me". Unter der großen Card vier weitere cards, mit denen die aktuellsten/neusten Projekte dargestellt werden.
- Portfolio-Übersicht: Alle Game Jams direkt sichtbar als einzelne Cards. "Art" und "Web Development" und "Experimental"(Prototypen) sind jeweils eine Seite mit mehreren Projekten. Projekt-Cards sind anklickbar und führen zu der entsprechenden Projekt-Seite.
- Projekt-Seite: Ein simples projektspezifisches Bild. Text und weiteres Layout habe ich in Figma noch nicht geplant.
- Kontakt-Seite: Ein kleiner Text und ein Formular für die Kontaktaufnahme. Hier wurde mir bewusst, dass Figma alleine nicht reicht um eine Website zu erstellen, sondern lediglich zum Designen der Website gedacht ist.
- Über Mich-Seite: Ein kleiner text Platzhalter.
- Von jeder Seite aus können über den Header rechts "My Portfolio", "About Me" und "Contact" die jeweiligen Seiten aufgerufen werden.
Homepage
Portfolio-Seite
Projekt-Seite
Kontakt-Seite
About Me
Learnings
- Figma eignet sich sehr gut um das Design einer Website zu erstellen.
- Figma bietet keine eigene Möglichkeit um das Design der Website zu einem .html Projekt zu konvertieren/exportieren.