Personligt projekt
Oktober 2023
Portfolio v2
Den næste generation af min portfolio hjemmeside
Jeg har opdateret min porteføljehjemmeside til en ny version, og alt er blevet forbedret. Dette projekt er uden tvivl det mest avancerede webprojekt, jeg nogensinde har kastet mig over. Det er lavet i SvelteKit, som er et fuld-stack webframework og en af de hurtigste i verden lige nu.
01
Hvorfor erstatte den gamle?
Min tidligere version af min porteføljehjemmeside var et af de første webprojekter, jeg lavede. Derfor var der mange ting, der kunne forbedres. Da siden udelukkende var lavet i HTML, CSS og JavaScript, var den heller ikke særlig hurtig.
02
Ydeevne
Siden indlæses meget hurtigt med en imponerende ydeevnescore på 96-100%. Siden bruger Server Side Rendering (SSR) til at generere sidens dynamiske indhold ved første indlæsning på serveren. Derefter fungerer siden som en Single Page Application (SPA), hvilket betyder, at navigation til andre sider sker ved hjælp af JavaScript. Dette giver en hurtigere og mere flydende overgang, når man navigerer mellem sider.
03
Intelligente billeder
Alle pixelbaserede billeder på siden er i webp-format og gemt på Firebase i to forskellige størrelser. For at undgå langsomme billeder og layoutændringer, når et billede pludselig dukker op, bruger jeg en særlig form for lazy-loading. Billederne har et baggrundsbillede med en meget lav opløsning på under 50 pixels, hvilket får billedet til at se sløret ud. Når det rigtige billede så er indlæst, "fades" det ind oven på det andet. Dette giver et hurtigt overblik over billedet, før det er indlæst, og hjælper med at undgå "layoutskift", som refererer til, når elementer flytter sig rundt for at give plads til forsinkede billeder.
04
Backend
Siden bruger en kombination af Firebase's Client Side- og Admin SDK. Data hentes fra backenden, mens billeder hentes via frontenden. Da der ikke er så mange projekter, og projekternes data kun indeholder tekst, fylder det ikke ret meget. Derfor indlæses alle projekternes data ved første indlæsning af siden og gemmes i en Svelte-store. Jeg gør dette for at undgå at skulle indlæse fra serveren hver gang man går ind på et nyt projekt, hvilket resulterer i hurtigere navigation til projekter. Mine Firebase "security rules" er indstillet til kun at tillade "reads" og intet andet.
05
Frontend
Jeg har holdt mig til et rimeligt minimalistisk design. Siden er lavet med Tailwind og DaisyUI og bruger to af Daisy's farvetemaer, "light" og "night." Jeg bruger også “svelte-intersection-observer” pakken fra npm til at lave scrollanimationer.
06
Admin side
Jeg har lavet en adminside til at uploade og redigere projekter, så jeg ikke behøver manuelt at skrive tekst i databasen eller konvertere billeder til webp selv. Jeg kan logge ind i frontend med Firebase-auth og derefter generere en sessionstoken, så jeg kan kommunikere med databasen på backenden. Når jeg opretter og uploader et nyt projekt, tjekker systemet, om min session er godkendt, før det kan bruge databasen. Når et projekt uploades, konverterer det alle billeder til webp og laver en kopi i lav opløsning. Derefter uploades tekst og billeder til Firebase med en procesbjælke, der viser, hvor langt den er nået.
Links