Die Verwendung von Online-Portfolios ist bei vielen digitalen Künstlern beliebt. Das Ziel wäre, sich und Ihre Fähigkeiten jedem Interessierten zu zeigen, der möglicherweise Firmen oder potenzielle Kunden anstellt. Ein einfacherer Weg, um diese Aufgabe zu erledigen, ist das Erstellen einer eigenen digitalen vCard-Seite. Normalerweise handelt es sich um eine einzige Seite mit einem kurzen Lebenslauf, Ihrer Arbeitserfahrung und einigen interessanten Hinweisen auf Sie.
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie ein einfaches Webseiten-Layout mit Registerkarten im Stil eines vereinfachten Portfolios erstellen. Wir können jQuery-Überblendeffekte integrieren, um zwischen den Registerkarten zu wechseln, wobei wir uns an ein formales responsives Design halten. Werfen Sie einen Blick auf meine Live-Demo, um zu sehen, wie das Endprodukt aussieht.
Live Demo - Quellcode herunterladen
Layout einstellen
Neben der einzelnen Indexdatei erstelle ich ein separates Stylesheet mit dem Namen styles.css. Wir benötigen auch eine Kopie der jQuery-Bibliothek, entweder lokal oder extern gehostet.
Die Seite selbst befindet sich in einem Wrapper mit einer maximalen Breite von 700 Pixeln. In diesem Wrapper verwende ich einen sekundären Container div, der den weißen Hintergrund und die natürlichen Seitenkörpereffekte hinzufügt.
Sie werden feststellen, dass jeder Navigations-HREF-Wert auf die ID eines Seitenelements zeigt. Dies könnte aktualisiert werden, um auf separate Seiten zu verlinken, und dann mit jQuery überschrieben, um die dynamischen Effekte beizubehalten. Wenn Sie sich nicht besonders für die Indizierung separater Seiten interessieren, kann Google trotzdem problemlos Ihren gesamten Inhalt durchsuchen.
Die inneren Teile werden mit jeweils einem bestimmten ID-Wert in Abschnittselemente aufgeteilt. Das obige Beispiel-HTML stammt aus der Standardprofilansicht, die sofort auf der Seite geladen wird. Ich möchte zuerst die jQuery durchgehen, weil sie schnell und einfach zu verstehen ist. Es gibt etwas für die Navigation und einen weiteren kleinen Abschnitt, um das nicht funktionierende Kontaktformular zu bearbeiten.
Dynamische jQuery-Effekte
Ganz unten auf der Seite sehen Sie einen Skriptblock. Es ist nichts übermäßig komplexes, aber es ist eine Erklärung wert. Ich habe den gesamten Abschnitt des Codes unten kopiert:
Immer wenn ein Benutzer auf einen der Navigationslinks klickt, verwende ich event.preventDefault (), um die Aktion zu beenden. Auf diese Weise können Sie Links zu externen Seiten für Google einfügen, auf die die meisten Nutzer keinen Zugriff haben.
Ich definiere auch 3 Variablen, die in der gesamten Funktion nützlich sind. aktuell stellt den aktuell ausgewählten Seitenlink dar und die .sel Die Klasse muss von diesem Link entfernt werden, wenn Sie zu neuen Inhalten wechseln. Die anderen beiden Variablen newpg und oldpg repräsentieren die neue Seite, zu der wir wechseln, und die ältere Seite, die nicht sichtbar sein muss. Dies wird mithilfe der Methoden fadeOut () / fadeIn () zusammen mit removeClass () / addClass () erreicht.
Ganz unten ziele ich ab #Kontakt Formular als Selektor. Wenn jemand das Kontaktformular abschickt, möchte ich die Übermittlung abbrechen, da kein Code zum Versenden einer E-Mail vorhanden ist. Wenn Sie ein echtes Kontaktformular implementieren möchten, müssen Sie diese 3 Codezeilen entfernen.
Innerer Inhalt Designs
Nicht alles in diesem vCard-Layout ist aufregend, aber es gibt einige coole CSS-Funktionen. Im Besonderen möchte ich die Designmerkmale der Skillbars zusammen mit den Basiselementen des responsiven Portfolios erläutern.
Bei der Suche nach CodePen fand ich diese coolen animierten Bars, die ein sehr poliertes Design hatten. Ich habe mich entschieden, die Animation wegzulassen und das Design noch einfacher zu gestalten. Diese Fähigkeiten befinden sich auf der zweiten Registerkarte für "Resume".
Jeder .skillbar ist ein einzigartiger Gegenstand mit einem Hintergrund in voller Länge hinter einem anderen verlängerten Balken. Ein inneres Feldelement enthält einen Text zur Kennzeichnung der Fertigkeit sowie über jahrelange Erfahrung. Farben und Breitenwerte werden in CSS angewendet, indem für jede Fertigkeit spezielle Klassen ausgewählt werden.
Wenn Sie alle Breiten flüssig halten, wird alles natürlich auf der Grundlage der Geräteauflösung verpackt. Dies ist ein weiterer Grund, warum ich Animationen auf den Skill-Leisten vermieden habe - obwohl ich ein sehr ähnliches Tutorial über diese Technik geschrieben habe.
Das Portfolio-Layout ist etwas vereinfacht, obwohl es für diese Demo gut funktioniert. Die Bilder sind mit Dribbble-Aufnahmen mit Abmessungen von 800 bis 600 verknüpft. Die Größe der Bilder wird basierend auf der Gesamtbreite des Containers geändert. Jedes Listenelement ist 45% der Breite der Seite, und die sekundären Bilder werden nach rechts verschoben, um die Illusion eines mittleren Rands zu erzeugen.
Responsive Updates
Am Ende meiner CSS-Datei befinden sich einige Medienabfragen zum Umgang mit responsiven Geräten. Ich arbeite an Haltepunkten von 550px und 450px. Beim Erreichen der ersten Pause bei 550 bricht jedes Portfolioelement in voller Länge ein, anstatt wie Miniaturbilder zu stapeln.
Bei 450px muss ich mit den Navigationselementen umgehen, die auf neuen Zeilen auseinander fallen. Die Navigationslinks passen sich der Breite von 100% an. Auch die Kopfzeilen von h1 / h2 werden so angepasst, dass sie auf Smartphone-Bildschirmen natürlicher erscheinen. Die Größe des Homepageporträts wird ebenfalls geändert, und die Eingaben für das Kontaktformular werden verkürzt.
Einige dieser Beispiele sind kleinere kosmetische Ausbesserungen, während die Navigation ein notwendiges Merkmal ist. Wenn Sie weitere Seitenelemente hinzufügen, kann sich die Anzahl der responsiven Stile erhöhen, und Sie können auch neue Haltepunkte schreiben.
Live Demo - Quellcode herunterladen
Schließen
Von dieser einfachen Vorlage aus sollten Sie in der Lage sein, Inhalte umzuschreiben oder sogar Ihre eigenen Seitenabschnitte zu kodieren. Es gibt viele Möglichkeiten, diese Webanwendung nach Ihren Wünschen umzugestalten. Fühlen Sie sich frei, eine Kopie meiner Quellcodes herunterzuladen und auf dieser Grundlage aufzubauen, um zu sehen, was sonst noch möglich ist.