Beschreibung

Bei diesem Projekt handelt es sich um meine persönliche Webseite, auf der Sie sich in diesem Moment befinden. Gestaltet wurde die Seite zur persönlichen und beruflichen Präsentation meiner eigenen Person. Wichtig war mir hierbei vor allem ein "Responsive Design", um sicherzustellen, dass die Seite in allen Auflösungen korrekt dargestellt wird und nicht ihre Benutzerfreundlichkeit aufgrund einer schlechten Bedienbarkeit verliert.

Eigenschaften

• Preloader im Design des Logos.
• Hintergrund-Video im oberen Startbereich der Seite.
• Feste Navigation am oberen Bildschirmrand, die ihre Farbdarstellung beim Scrollen ändert.
• Navigation nutzt Hover-Effekte und erkennt und markiert aktuell betrachtete Setenbereiche automatisch.
• Smooth-Scrolling für Navigation, Buttons und bestimmte Links.
  Beim Smooth-Scrolling wird beim Klicken automatisch und vor allem sanft zur jeweiligen Position gescrollt.
• Animierte Fortschrittsanzeigen (Progress Bars).
• Portfolio mit Galleriemodus.
• Kontaktformular
• Google Maps
• Button um wieder zur Startseite zu gelangen (Back-To-Top)
• SSL-Verschlüsselung
• Hover-Effekte für Buttons, Boxes, Bilder und Icons.
• Korrekte Darstellung in allen Auflösungen durch Responsive Design.
• Extra Menü für kleinere Auflösungen wie beispielsweise Smartphones.

Quellen und Danksagungen

Auf meiner Webseite nutze ich viele verschiedene Frameworks, Toolkits, Libraries und Bildmaterialien, die nicht aus meiner eigenen Feder stammen, jedoch trotzdem für private und kommerzielle Zwecke genutzt werden dürfen, ohne dass der Autor explizit erwähnt werden muss.

Ich möchte an dieser Stelle aber trotzdem erwähnen, welche Materialien nicht von mir selber entwickelt wurden, um mich nicht mit fremden Federn zu schmücken und die Arbeit der eigentlichen Entwickler und Desiger anzuerkennen. Mir ist aus eigener Erfahrung bekannt, dass enorm viel Zeit und Mühe in die Entwicklung guter Frameworks, Toolkits, Libraries, Bildmaterialien, usw. investiert werden muss.

Frameworks, Toolkits, Libraries, Software, etc.

jQuery

jQuery ist die meistverwendete JavaScript-Bibliothek. Sie stellt Funktionen zur DOM-Navigation und DOM-Manipulation bereit und wurde von John Resig entwickelt. Mittlerweile wird die Bibliothek von der unabhängigen jQuery Foundation weiterentwickelt und ergänzt. Ich verwende jQuery in vielen Bereichen, beispielsweise um den Inhalt des Haftungsausschlusses ein- und auszublenden und die Beschriftung des Buttons zu verändern.

Die offizielle Webseite von jQuery ist erreichbar unter: https://jquery.com

Bootstrap

Bootstrap ist das beliebteste Open-Source Framework für die Entwicklung von Projekten mit HTML, CSS und JavaScript. Das Framework wurde von Twitter entwickelt und enthält Vorlagen für die Gestaltung von Typografien, Buttons, Formulare und vieles mehr. Ich nutze Bootstrap beispielsweise für die Darstellung meines Kontaktformulars.

Die offizielle Webseite von Bootstrap ist erreichbar unter: https://getbootstrap.com

Font-Awesome

Font-Awesome ist das beliebteste Icon-Set und Toolkit für Vektor-Icons und Social-Logos. Es handelt sich also um eine Icon-Sammlung, die auf eine Typografie basiert und somit wie eine normale Schriftart verwendet werden kann. Die Auswahl an Icons ist groß und die Ladezeiten sind besser gegenüber normalen Bilddateien.

Die offizielle Webseite von Font-Awesome ist erreichbar unter: https://fontawesome.com/

Magnific Popup

Bei Magnific Popup handelt es sich um eine Gallerie mit Popup-Funktion, die sich allen Auflösungen entsprechend anpasst und von Dmitry Semenov entwickelt wurde. Ich nutze Magnific Popup für meine Portfolio-Sektion.

Die offizielle Webseite von Magnific Popup ist erreichbar unter: http://dimsemenov.com/plugins/magnific-popup/

Isotope

Isotope ist ein JavaScript Plugin bzw. eine JavaScript Bibliothek, mit der Elemente einer Webseite sortiert und gefiltert werden können. Entwickelt wurde Isotope von Metafizzy, einem Web-Development Shop. Ich nutze Isotope, um mein Portfolio nach Kategorien zu filtern.

Die offizielle Webseite von Isotope ist erreichbar unter: https://isotope.metafizzy.co/

Waypoints

Waypoints ist ein JavaScript Plugin mit dem der Seitenbereich beim Scrollen überwacht werden können. Durch Waypoints ist es möglich, bestimmte Teilbereiche einer Webseite erst zu laden, wenn der Benutzer diese Bereiche beim Scrollen erreicht hat. Ich nutze Waypoints beispielsweise für meine Progress-Bars, die erst geladen werden, wenn der Benutzer diese auch sehen kann.

Die offizielle Webseite von Waypoints ist erreichbar unter: http://imakewebthings.com/

Easing Plugin

Easing Plugin ist ein jQuery Plugin mit dessen Hilfe sich schönere Animationen in Form von beispielsweise Übergängen erstellen lassen. Ich nutze Easing Plugin, um die Animation der Smooth-Scrolling Funktion zu verbessern, bei der sanft zu den jeweiligen Bereich gescrollt werden soll, auf dem geklickt wurde.

Die offizielle Webseite des Easing Plugin ist erreichbar unter: http://gsgd.co.uk/sandbox/jquery/easing/

Google Maps JavaScript API

Mit der Google Maps JavaScript API können die Maps von Google für eigene Projekte verwendet werden. Ich benutze die Google Maps Javascript API für die Karte in meinem Kontaktbereich.

Die offizielle Webseite der Google Maps JavaScript API ist erreichbar unter: https://developers.google.com/maps

Animate.css

Animate.css ist eine Cross-Browser-Bibliothek mit CSS Animationen, die von Daniel Eden entwickelt wurde. Ich nutze diese Bibliothek für die Animationen auf meiner Webseite, wie beispielsweise bei hereinfliegenden Texten oder Bildern.

Die offizielle Webseite von Animate.css ist erreichbar unter: https://daneden.github.io/animate.css/

WOW.js

WOW.js ist ein JavaScript-Plugin, mit dessen Hilfe Animationen erst ausgelöst werden, wenn die Bereiche durch scrollen erreicht wurden, in denen sich die zu animierenden Objekte befinden. Dadurch wird gewährleistet, dass der Benutzer die Animationen auch tatsächlich sehen kann. Ich nutze WOW.js mit der Animate.css Bibliothek, es kann aber auch eine andere Bibliothek genutzt werden. WOW.js wurde von Matt Dellac entwickelt.

Die offizielle Webseite von Animate.css ist erreichbar unter: https://mynameismatthieu.com/WOW/

Bildmaterialien

Pexels.com

Pexels bietet eine große Sammlung schöner Fotos, die für private als auch kommerzielle Zwecke genutzt werden dürfen. Auf meiner Webseite stammt folgendes Bildmaterial von https://www.pexels.com:

• Taschenuhr mit Sand und Landkarte
  

  Dient als Hintergrundbild für die Zitate-Sektion.

• Silberner Macintosh
  

  Findet verwendung in der Portfolio-Sektion.

Stocksnap.io

Stocksnap bietet ebenfalls eine große Sammlung schöner Fotos, die genau wie bei Pexels für private als auch kommerzielle Zwecke genutzt werden dürfen. Auf meiner Webseite stammt folgendes Bildmaterial von https://stocksnap.io

• Kaffeetasse mit Kaffeebohnen
  

  Kaffeetasse wird in der Portfolio-Sektion verwendet.

• Holztisch mit Kaffeetasse und Kamera.
  

  Das Holz nutze ich als Holztextur für das Clipboard in der Portfolio-Sektion.

Textures.com

Textures.com ist eine Sammlung von Texturen, die für private als auch kommerzielle Projekte genutzt werden dürfen. Es gibt zahlreiche Texturen auf dieser Seite, die nach verschiedenen Kategorien sortiert wurden. Auf meiner Webseite stammt folgendes Bildmaterial von https://www.textures.com

• Feine Holztextur
  

  Ich nutze diese Textur in der Portfolio-Sektion zur Darstellung meiner Visitenkarten.

Rechtliche Formulierungen

eRecht24

Mittels eRecht24 können rechtliche Formulierungen, die beispielsweise für ein Impressum oder eine Datenschutzerklärung benötigt werden, durch ein Tool generiert und kostenlos genutzt werden. Ich nutzte das Tool von eRecht24, um mir einen Haftungsausschluss und eine Datenschutzerklärung für mein Impressum generieren zu lassen. Die Webseite von eRecht24 ist erreichbar unter: https://www.e-recht24.de