Website
Mein digitales
Portfolio
28.12.2023
31.03.2024
Information
Seit einigen Jahren steht die Erstellung meiner eigenen Website auf meiner To-Do-Liste. Die Website soll vor allem als Portfolio und Dokumentation meiner Projekte dienen. Durch die Verwendung von React und dem Next.js Framework erhalten nicht nur ich, sondern auch andere Entwickler, die ähnliche Projekte und Ziele verfolgen, einen Mehrwert. Die Website wird bei Ionos gehostet.
~ 270 Hours
Planung
Inhalt
Ich habe in meinem Notizprogramm Notion eine Datenbank für alle meine Projekte. Die einzelnen Projekte sollten übersichtlich dargestellt werden. Ich habe mich dafür entschieden, die Projekte mit einem "Bilder-Karussell" darzustellen. Jedes Projekt wird nach einem festen Layout hinzugefügt. Dieses beinhaltet allgemeine Informationen über das Projekt und die einzelnen Schritte von der Planung bis zur Fertigstellung.
Figma
Figma ist ein Programm, mit dem man unter anderem Websites gestalten kann. Bevor ich auch nur eine Zeile Code geschrieben habe, habe ich das allgemeine Layout der Website einmal in Figma erstellt, sowohl für Desktop als auch für Mobile.
Coding
React
Obwohl ich durch mein Smart Home Projekt schon etwas Erfahrung mit React hatte, musste ich mich dennoch durch einige Dokumentationen und Tutorials arbeiten, um React richtig zu beherrschen. Neben React benutze ich das Next.js Framework und Tailwind, um das Figma Design schnell und einfach umzusetzen.
Ionos Deploy Now
Für das Hosting der Website habe ich mich für Ionos entschieden, da Ionos eine einfache Deployment-Now-Funktion bieten und es daher relativ einfach ist, die Website zu ändern, wenn sie einmal eingerichtet ist. Ich muss nur das Github Repository ändern und die Website wird automatisch von Ionos neu aufgebaut.
Fertigstellung
Responsive
Nachdem ich die Website für den Desktop programmiert hatte, habe ich sie responsiv gemacht, das heißt, ich habe die einzelnen Elemente und Bereiche für kleinere Bildschirme wie Handys und die Portiat-Ansicht so angepasst, dass sie zu der Figma-Design-Datei passen und nicht unlesbar klein oder ähnliches sind.
Feinschliff
Um der Website den letzten Schliff zu geben, bin ich gerade dabei, einige Dinge anzupassen, wie z.B. das Hinzufügen von Speicherplatz, um Bilder direkt von der Website laden zu können, etc.
Fazit
Zusammenfassend bin ich mit dem derzeitigen Stand des Projektes sehr zufrieden und bin der Meinung, dass sich die Arbeit für die Programmierung meines Portfolios gelohnt hat.
