Persönliche Portfolio -Seite www.fdaviz.com in React.
Installierte neue React -App mit Knoten JS.
Migrierte meine VanillaJS -Portfolio -Version und migrierte sie in eine neue React -Anwendung.
Der erste Ansatz bestand darin, Bibliotheken zum Erstellen von Animationen zu verwenden, da das Erstellen meiner eigenen zeitaufwändig war. Aus diesem Grund habe ich beschlossen, WoW.JS und Animate.css -Bibliotheken zu verwenden.
Verwendete Reags Requisiten, um Komponentenreferenzen in der Anwendung zu verwalten und Komponentendetails zu teilen, um SmoothScroll zu erstellen. Nutzende Nutzung meinen eigenen Code.
Der größte Teil der Seite verwendet Bootstrap, mit Ausnahme der modalen Galerie, die über meinen eigenen CSS3 Flex-Box-Code verfügt.
Erstellte verschiedene Modale für das Galerieprojekt und verwendete React -Event -Handler. Ich konnte jedes Projektmodal zeigen.
Das Formular verwendet formsfree.io für die Backend -Einreichung.
Ich habe Bilder von Unsplash verwendet, die kostenlos zu verwenden sind, und Symbole von Flatricon, die ebenfalls frei zu verwenden sind.
Ich wollte oben auf der Seite einen erstaunlichen animierten Hintergrund erstellen, also habe ich Hilfe von CodePen.io verwendet und den Code an meine Website angepasst.
Die Implementierung von wow.js + animate.css war am Anfang schwierig, aber es lohnte sich. Es dauert Zeit, bis es mit Ihrer App funktioniert, aber es braucht weniger Zeit als die Erstellung Ihrer eigenen Bibliotheken.
Das Teilen von DOM -Komponentendetails wie Höhe, Offsettops usw. zwischen anderen Komponenten war etwas schwierig, da React Refs die IDs der Eltern -Container entsprechen mussten. Ich habe die lange Zeit gebraucht, um herauszufinden.
Nachdem ich Bootstrap für eine Weile verwendet hatte, musste ich einige CSS3-Tricks wie Flex-Box und wie man @KeyFrames + Animation verwendet.
Vielen Dank, dass Sie meinen React-Portfolio-Website besucht haben und sich Zeit genommen haben, um dies zu lesen!