Portfolio
Ett urval av mina projekt som jag hoppas illustrerar mina kreativa förmågor, min ambition och min passion för formgivning.
Royal Riddles
HTML
CSS
JavaScript
React
Personligt projekt. Här har jag skapat en digital version av Pawn = Queen. Syftet med projektet var att fördjupa mig i Javascript och React och att utmana mig själv genom att skapa ett spel med isometrisk grafik.
Grafiken har jag skapat själv med hjälp av färdiga 3D-modeller som jag har renderat i isometrisk vy och sedan redigerat i Photoshop.
En stor utmaning var att få alla element placerade enligt isometriska koordinater och att få allting att överlappa korrekt med z-index.
En annan utmaning var att skapa ett system som spårar pjäsernas koordinater och som kontrollerar vilka pjäser som har giltiga drag.
Funktionen för att skapa ett spelbräde är dynamiskt vilket tillät mig att skapa egna pussel.
Visa projekt
Visa på GitHub
Tic-tac-toe
HTML
CSS
JavaScript
Inlämningsuppgift för The Odin Projects JavaScript-kurs. Här skapade jag en stilren version av det klassiska spelet. Jag använde kreativa lösningar för att skapa animationer och 3D-effekter med CSS.
En stor del av projektet ägnades åt att utveckla en AI-motståndare för att göra spelet mer utmanande och interaktivt.
Nostromo Terminal
HTML
CSS
TypeScript
Angular
Detta projekt var en skoluppgift med syftet att skapa en väldigt enkel blogg med valfritt tema.
Jag valde att designa bloggen som en version av datorn ombord på rymdskeppet "Nostromo" från filmen Alien.
Bloggen fungerar som en databas där alla besättningens loggar finns sparade så att man kan följa händelserna i filmen genom inläggen, sett ur olika besättningsmedlemmars perspektiv.
Mitt mål var att skapa en interaktiv upplevelse genom att använda många animationer och effekter för att förstärka temat och inlevelsen. Alla animationer och element är skapade från grunden med CSS, och SVG-filter.
Etch-a-sketch
HTML
CSS
JavaScript
Inlämningsuppgift för The Odin Projects JavaScript-kurs.
Uppgiften var att skapa ett rutnät av div-element som skulle fungera som "pixlar". Dessa pixlar skulle ändra färg när man klickade på dem så att man skulle kunna rita bilder.
Till designen hämtade jag inspiration från gamla tv-spel och CRT-skärmar för att skapa en retro-look.
Alla element förutom sladden är skapade med hjälp av CSS.
Calculator
HTML
CSS
JavaScript
Inlämningsuppgift för The Odin Projects JavaScript-kurs.
En simpel miniräknare med ett lekfullt utseende. Grafiken är helt och hållet vektorgrafik som jag har skapat från grunden med hjälp av Inkscape. Denna bild användes som inspiration.
Eftersom uppgiften var väldigt simpel ville jag försöka sticka ut lite genom att ha en snygg design. Tanken är att imitera en billig och plastig miniräknare. Därför “vickar” knapparna på sig när man för muspekaren över dem och skärmen blinkar till när man klickar på en knapp, precis som de gamla räknarna från skolan.
Sten, sax, påse
HTML
CSS
JavaScript
Inlämningsuppgift för EC Utbildnings JavaScript-kurs.
Eftersom jag redan hade skapat ett sten, sax, påse-spel (se nedan) ville jag nu försöka komma på en twist på spelet. När man spelar sten, sax, påse mot en människa så handlar det om psykologi men när man spelar mot en dator är det ren och skär tur.
Av den anledningen skapade jag den här varianten av spelet som är en typ av reaktionsspel. Du kan alltså bli duktig på spelet och bli bättre än datorn.
Läs beskrivningen noga innan du spelar.
Animationer från dribbble.Ikoner från Flaticon.
Spelachicago.se
HTML
CSS
JavaScript
React
En stilren poängräknare för kortspelet Chicago. Detta är ett personligt projekt som jag skapade för att komma igång med React och det är således mitt första react-projekt.
Lägg till spelare, klicka sedan på varje spelares kort för att dela ut poäng. Spelarnas ordning justeras automatiskt efter antal poäng.
Spelkorten har jag skapat i Figma. Ikoner från Flaticon.
Darionvaldez.se
HTML
CSS
JavaScript
React
Denna hemsida har jag designat själv och utvecklat från grunden med vanilla JS och React.
Rock, paper, scissors
HTML
CSS
JavaScript
Inlämningsuppgift för The Odin Projects JavaScript-kurs.
Här ville jag skapa en snygg tolkning av sten, sax, påse. I de flesta stex, sax, påse-spel online gör datorn sitt val omedelbart. För att undvika detta lät jag datorns val “snurras” fram för att skapa en form av spänningsmoment.
Ikonerna har jag hämtat från Flaticon och sedan redigerat dem i Photoshop för att få ett lysrörsutseende och neonljus när de är tända. Ljudet har jag klippt ihop från diverse YouTube-klipp på gamla lampor.
Idén till utseendet kom när jag letade efter ikoner och hittade dessa ikoner som ser ut som neonskyltar.
Split flap display med CSS
HTML
CSS
JavaScript
React
Personligt projekt för att öva på React och CSS.
Här har jag försökt efterlikna en split flap display. Med en del trix med CSS har jag skapat en trovärdig effekt.
Bildspel
HTML
CSS
JavaScript
Inlämningsuppgift för EC Utbildnings JavaScript-kurs.
Uppgiften var att skapa ett simpelt bildspel. Här vill jag visa att trots en enkel uppgift vill jag gärna göra mer än vad som förväntas. För mig är det viktigt att oavsett uppgift är det alltid viktigt att lösningen är snygg och stilren. Visst hade det räckt med en enda bild i mitten som ändrar sig när man klickar på en knapp men hur kul är det?
Bilder från Unsplash.