L'uso di portafogli online è diventato una scelta popolare di molti artisti digitali. L'obiettivo sarebbe mostrare te stesso e le tue abilità a chiunque fosse curioso, magari assumendo aziende o potenziali clienti. Un altro modo più semplice per eseguire questa operazione è creare la propria pagina vCard digitale. Di solito è una singola pagina contenente un breve curriculum vitae, la tua esperienza lavorativa e alcune curiosità interessanti su di te.
In questo tutorial voglio dimostrare come creare un semplice layout di pagine Web a schede nello stile di un portafoglio semplicistico. Possiamo incorporare effetti di dissolvenza jQuery per passare da una scheda all'altra, attenendoci a un design reattivo formale. Dai un'occhiata alla mia dimostrazione dal vivo per vedere come si presenta il prodotto finale.
Demo dal vivo - Scarica il codice sorgente
Impostazione del layout
A parte il singolo indice, sto anche creando un foglio di stile separato chiamato styles.css. Abbiamo anche bisogno di una copia della libreria jQuery, locale o ospitata esternamente.
La pagina stessa viene conservata all'interno di un wrapper fissato alla larghezza massima di 700 px. All'interno di questo wrapper sto usando un div contenitore secondario che aggiunge lo sfondo bianco e gli effetti del corpo della pagina naturale.
Noterai ogni punto di valore HREF di navigazione verso l'ID di un elemento di pagina. Questo potrebbe essere aggiornato per collegarsi a pagine separate, quindi sovrascritto usando jQuery per mantenere gli effetti dinamici. Se non ti interessa molto sull'indicizzazione di pagine separate, Google è ancora in grado di eseguire la scansione di tutti i tuoi contenuti con facilità.
Le parti interne sono suddivise in elementi di sezione con ciascuna che utilizza un valore ID specifico. L'esempio HTML sopra è dalla vista profilo predefinita che viene caricata immediatamente sulla pagina. Voglio prima esaminare jQuery perché è semplice e veloce da capire. C'è un po 'per la navigazione insieme ad un'altra piccola sezione per gestire il modulo di contatto non funzionante.
Effetti jQuery dinamici
Giù verso la parte inferiore della pagina noterai un blocco di script. Non c'è nulla di eccessivamente complesso, ma vale una spiegazione. Ho copiato l'intera sezione di codice qui sotto:
Ogni volta che un utente fa clic su uno qualsiasi dei link di navigazione, sto usando event.preventDefault () per interrompere l'azione. In questo modo puoi includere collegamenti a pagine esterne per Google che non sono accessibili alla maggior parte degli utenti.
Definisco anche 3 variabili che sono utili in tutta la funzione. attuale rappresenta il link della pagina attualmente selezionato, e il .sel la classe deve essere rimossa da quel collegamento quando si passa a nuovi contenuti. Le altre due variabili NewPG e oldpg rappresenta la nuova pagina su cui stiamo passando e la pagina precedente che deve essere nascosta alla vista. Questo si ottiene usando i metodi fadeOut () / fadeIn () insieme a removeClass () / addClass ().
In fondo sto prendendo di mira #Modulo di Contatto come selezionatore. Quando qualcuno invia il modulo di contatto, voglio interrompere l'invio perché non c'è alcun codice in atto per inviare una e-mail. Se si prevede di implementare un modulo di contatto reale, assicurarsi di rimuovere quelle 3 righe di codice.
Disegni di contenuto interno
Non tutto in questo layout vCard è eccitante, ma ci sono alcune fantastiche funzioni CSS. In particolare mi piacerebbe spiegare le caratteristiche del design per le barre delle abilità insieme agli elementi base del portafoglio reattivo.
Durante la ricerca su CodePen ho trovato queste fantastiche barre animate che avevano un design molto lucido. Ho scelto di escludere l'animazione e semplificare ancora di più il design. Queste abilità si trovano nella seconda scheda per? Riprendi ?.
Ogni .skillbar è un oggetto unico con uno sfondo a figura intera dietro un'altra barra allungata. Un elemento di span interno contiene del testo che etichetta l'abilità, insieme ad anni di esperienza totale. I colori e i valori di larghezza vengono applicati nei CSS scegliendo come target classi speciali per ogni abilità.
Mantenendo tutte le larghezze di fluido tutto si avvolgerà naturalmente in base alla risoluzione del dispositivo. Questo è un altro motivo per cui ho evitato l'animazione sulle barre delle abilità - anche se ho scritto un tutorial molto simile su quella tecnica.
Il layout del portfolio è un po 'semplicistico, anche se funziona molto bene per questa demo. Le immagini sono collegate agli scatti di Dribbble usando dimensioni di 800? 600. Le immagini verranno ridimensionate in base alla larghezza totale del contenitore. Ogni elemento dell'elenco è pari al 45% della larghezza della pagina e le immagini secondarie vengono posizionate a destra per creare l'illusione di un margine centrale.
Aggiornamenti Responsive
Nella parte inferiore del mio file CSS ci sono alcune query multimediali per la gestione di dispositivi reattivi. Sto lavorando a punti di interruzione di 550px e 450px. Colpendo la prima pausa a 550, ciascun elemento del portfolio si spezza in tutta la lunghezza invece di impilare come miniature.
Per 450px ho bisogno di gestire gli elementi di navigazione che iniziano a cadere su nuove linee. I collegamenti nav si adattano al 100% della larghezza. Anche le intestazioni h1 / h2 vengono ridimensionate per apparire più naturali sugli schermi degli smartphone. Anche l'immagine del ritratto della home page viene ridimensionata e gli input del modulo di contatto sono accorciati in lunghezza.
Alcuni di questi esempi sono ritocchi cosmetici minori, mentre la navigazione è una caratteristica necessaria. Se aggiungi altri elementi di pagina, potrebbe aumentare il numero di stili reattivi, insieme alla possibilità di scrivere nuovi punti di interruzione.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Da questo modello di base dovresti essere in grado di riscrivere il contenuto o persino codificare le tue sezioni di pagina. Ci sono molti modi per ridisegnare questa applicazione web a tuo piacimento. Sentiti libero di scaricare una copia dei miei codici sorgente e di costruire su questa base per vedere cos'altro è possibile.