Användningen av onlineportföljer har blivit ett populärt val av många digitala artister. Målet skulle visa dig själv och dina färdigheter till någon nyfiken, kanske anställa företag eller potentiella kunder. Ett annat enklare sätt att uppnå denna uppgift är att skapa din egen digitala vCard-sida. Det är vanligtvis en enda sida som innehåller en kort CV, din arbetslivserfarenhet och några intressanta prat om dig själv.
I den här handledningen vill jag demonstrera hur man bygger en enkel tabbad webbsida layout i stil med en förenklad portfölj. Vi kan införliva jQuery-fadeffekter för att växla mellan flikarna och hålla sig till en formell responsiv design. Ta en titt på min live-demo för att se hur slutprodukten ser ut.
Live Demo - Hämta källkod
Ställa in layout
Bortsett från den enda indexfilen skapar jag också ett separat stilark som heter styles.css. Vi behöver också en kopia av jQuery-biblioteket, antingen lokalt eller värd externt.
Sidan i sig hålls i ett omslag som är fast vid maximal bredd på 700px. Inom denna omslag använder jag en sekundär container div som lägger till den vita bakgrunden och den naturliga sidokroppen.
Du märker varje navigerings HREF-värde pekar mot ID för ett sidelement. Detta kan uppdateras för att länka till separata sidor, sedan överrulleras med jQuery för att hålla de dynamiska effekterna. Om du inte bryr dig mycket om att indexera separata sidor kan Google fortfarande enkelt krypa igenom allt ditt innehåll.
De inre delarna är uppdelade i sektionselement med var och en med ett specifikt ID-värde. Exemplet HTML ovan är från standardprofilvisningen som laddas omedelbart på sidan. Jag vill gå över jQuery först eftersom det är snabbt och enkelt att förstå. Det finns lite för navigering tillsammans med ett annat litet avsnitt för att hantera det icke fungerande kontaktformuläret.
Dynamiska jQuery-effekter
Ned mot längst ner på sidan märker du ett manusblock. Det finns inte något alltför komplicerat men det är värt en förklaring. Jag har kopierat hela delen av koden nedan:
När en användare klickar på någon av navigeringslänkarna använder jag event.preventDefault () för att stoppa åtgärden. Så här kan du inkludera länkar till externa sidor för Google som inte är tillgängliga för de flesta användare.
Jag definierar också 3 variabler som är användbara under hela funktionen. nuvarande representerar den aktuella valda sidlänken och .sel klassen måste tas bort från den länken när man byter till nytt innehåll. De andra två variablerna newpg och oldpg representera den nya sidan vi byter på, och den äldre sidan som behöver döljas. Detta uppnås med hjälp av metoderna fadeOut () / fadeIn () tillsammans med removeClass () / addClass ().
Längst ner jag riktar in sig #Kontaktformulär som en väljare. När någon lämnar kontaktformuläret vill jag stoppa inlämningen eftersom det inte finns någon kod för att skicka ett e-postmeddelande. Om du planerar att genomföra en riktig kontaktblankett, var noga med att ta bort de tre kodrubrikerna.
Inre innehållsdesign
Inte allt i denna vCard-layout är spännande, men det finns några coola CSS-funktioner. Specifikt skulle jag vilja förklara designegenskaperna för kompetenserna tillsammans med de grundläggande responsiva portföljobjekten.
När jag letade på CodePen hittade jag dessa coola animerade barer som hade en mycket polerad design. Jag valde att lämna animationen och förenkla designen ännu mer. Dessa färdigheter ligger på den andra fliken för? Resume ?.
Varje .skillbar är ett unikt objekt med en full längd bakom en annan förlängd bar. Ett inre spänningselement innehåller textmärkning av färdigheten, tillsammans med total års erfarenhet. Färger och breddvärden tillämpas i CSS genom att rikta in speciella klasser för varje färdighet.
Genom att hålla alla bredder vätska kommer allt att viklas naturligt baserat på enhetsupplösning. Detta är en annan anledning som jag har undvikit animering på färdighetsstängerna - även om jag skrev en mycket liknande handledning om den tekniken.
Portföljlayouten är lite förenklad, även om det fungerar bra för den här demo. Bilderna är kopplade till Dribbble-skott med dimensioner på 800? 600. Bilderna kommer att ändras på grundval av behållarens totala bredd. Varje listobjekt är 45% bredden på sidan och de sekundära bilderna svänger rätt för att skapa illusionen av en mellansymbol.
Responsiva uppdateringar
I botten av min CSS-fil finns det några mediafrågor för hantering av mottagliga enheter. Jag jobbar vid brytpunkter på 550px och 450px. När du slår på första rasten vid 550, bryter varje portföljartikel i full längd istället för att stapla som miniatyrbilder.
Vid 450px behöver jag hantera navigeringsobjekten som börjar falla ihop på nya linjer. Nav-länkarna anpassar sig till 100% bredd. Även h1 / h2-rubrikerna ändras så att de blir mer naturliga på smarttelefonens skärmar. Startsidans porträttbild ändras också, och kontaktformulärinsignalerna förkortas i längd.
Några av dessa exempel är mindre kosmetiska touch-ups, medan navigering är en nödvändig funktion. Om du lägger till fler sidelement kan antalet svarande stilar gå upp - tillsammans med möjligheten att skriva nya brytpunkter.
Live Demo - Hämta källkod
Stängning
Från denna grundläggande mall borde du kunna skriva om innehåll eller till och med koda dina egna sidavsnitt. Det finns många sätt att återställa denna webbapplikation till din smak. Du kan ladda ner en kopia av mina källkoder och bygga ovanpå den här grunden för att se vad som är mer möjligt.