Om mig: About me:

Jag heter Fredrik och är frontend-utvecklare, med examen från IT-högskolan i Stockholm och LIA-praktik på Delorean webbyrå.

Programmering och design har alltid varit mina primära intressen, då det erbjuder fantastiska möjligheter att realisera idéer. Jag är i grunden självlärd, men valde att fullfölja en formell utbildning då jag bedömde att det skulle vara karriärmässigt fördelaktigt. Med intresset för samspelet mellan design och kod, samt att jag är en visuellt lagd person, föll det sig naturligt att välja Frontend. Utbildningen i kombination med LIA-praktik gav mig värdefulla färdigheter, inte enbart inom den senaste teknologin, utan också agil systemutveckling.

Jag har tidigare erfarenhet av app-utveckling för iOS och Android, främst spel, och många av de kunskaper jag förvärvat under utbildningen hjälper mig utvecklas ännu mer inom detta område. Jag har en hög problemlösningsförmåga, vilket jag ser som en viktig egenskap för att lösa de utmaningar man ställs inför som utvecklare.

Utöver programmering ägnar jag mig även åt digital illustration (både raster och vektor).

I'm Fredrik, a Front-End Developer with a degree from IT-högskolan in Stockholm and internship at Delorean web agency.

Coding and design allows me to create and grow, which is why I've always been very passionate about them. Though originally self-taught, I decided to undergo formal education with the intent of improving my chances at a career. Front-End was the most natural choice, not only because of my interest in code and design, but also because I am a visual kind of person. My education and internship much improved my skills in Front-End technologies as well as agile system development.

I have prior experience with app-development for both iOS and Android, mainly games, and much of the knowledge I've obtained from my education will be of help in this field as well. Additionally, I'm a problem solver, which is imperative when dealing with the challenges you face as a developer.

I'm also a digital illustrator (both raster and vector).

Bloms Trädgård

Joomla, Google Maps

image image

Från idé till färdig produkt:
Den andra fasen i mitt frilansuppdrag för blomsterbutiken var att skapa och publicera en fungerande webbsida, baserat på min tidigare Figma-design. Inledningsvis skapade jag en statisk sajt med basal funktionalitet och responsivitet som jag därefter integrerade i Joomla CMS. Den färdiga sajten är komplett med Google Maps, Cookie Policy, samt kontaktformulär. Jag skötte även publicering av sajt och hantering/inköp av domän.

The second phase of my freelance job was to create and publish a fully functioning website, based on my previous Figma design. Initially, I made a static site featuring basic functionality and responsiveness, which was then integrated into Joomla CMS. The site features Google Maps, Cookie Policy, and a contact form. I also handled the publishing of the site, as well as the purchase and configuration of the domain.

IconLive version

Bloms Trädgård (UI)

Figma

image image

Frilansuppdrag för utformning av design åt en blomsterbutik i behov av ny hemsida. Under samråd med kund fattades beslut om en avskalad och välstrukturerad design med intiutiv navigation. Idéerna konkretiserades därefter i en visuell presentation, med fokus på en ljus och varm atmosfär, tillsammans med innehåll, struktur, och funktionalitet i harmoni. Två versioner skapades: en för desktop och en för mobil. Features för interaktion, så som variants och overlays, användes flitigt.

Freelance job where I created a layout for a flower shop in need of a new website. Consulting with the client, we decided to proceed with a clean and well-structured design featuring intuitive navigation. We settled on a bright and welcoming atmosphere, with content, structure, and functionality in perfect balance. Two versions were created: one for desktop, and another for mobile. Features for interaction, such as variants and overlays, were generously implemented.

IconPDF-version (Desktop)

IconPDF-version (Mobile)

Number Memory

React, Sass, TypeScript

image image

ReactJs-versionen av samma projekt jag tidigare skapat med Vanilla Js. I denna version använder jag även Sass och TypeScript. Live-versionen publicerades på GitHub Pages via npm-paketet gh-pages.

ReactJs version of the same project previously created in Vanilla Js. This version utilizes Sass & TypeScript. The live-version was deployed on GitHub Pages using gh-pages npm package.

Icon Git repo

Icon Live version

Movie Database

HTML5, CSS3, Native JS

image image

Projekt som använder The Movie Database's API och listar titlar baserat på din sökning, eller något av de snabbval som erbjuds. Mer detaljer för varje enskild titel visas vid klick. Du kan även filtrera och sortera sökresultaten.

Project using The Movie Database's API to list titles based on your search, or any of the options available. Details for individual titles will be displayed on click. You can also filter and sort the results.

Icon Git repo

Icon Live version

Number Memory

HTML5, CSS3, Native JS

image image

Idén till detta projekt fick jag när en arbetskamrat berättade att han var bra på att minnas decimaler för pi. Här handlar det om att inom en begränsad tid memorera en slumpmässigt genererad siffersekvens och därefter skriva ut den. Det börjar enkelt, men vid varje vinst skapas en ny, längre sekvens ska memoreras. Vid förlust kan spelaren antingen slumpa fram nya siffror, eller försöka på nytt med den existerande.

A co-worker mentioned that one of his skills was to remember the first hundred digits of pi, and so the idea to this project was born. You'll be shown a randomly generated sequence of numbers until countdown hits zero, and it's time to type it. Easy at first, but with each victory comes a new, longer sequence to memorize. Failing will allow you to either randomize a new sequence, or try again with the existing one.

Icon Git repo

Icon Live version

Pawsome Runner

Game Maker Studio

image image

Ett endless runner, skapat i Game Maker Studio och därefter exporterat till Google Play (via Android Studio) och App Store (via Xcode). Det händer att jag ibland återvänder till detta spel och lägger till/uppdaterar features. Lärorikt projekt som bland annat gav mig insikt i hur processen går till för att publicera en app i respektive store, samt implementering av annonser, in-app purchases och Googles/Apples egna Highscore-tjänster.

Endless runner, created in Game Maker Studio and exported to Google Play (via Android Studio) and App Store (via Xcode). On occasion I revist this game, adding/updating features. This project gave me valuable insights in the process of app-publishing, as well as implementation of ads, in-app purchases, and Google's/Apple's Highscore services.

Google Play App Store

Hamster Wars

React, Node.js Express, Firebase, Railway

image image

Fullstack-webbapp skapat med React och Express. Firebase användes för databasen, och appen publicerades ursprungligen på Heroku (senare på Railway). Appen går ut på att välja den sötaste hamstern av två slumpmässigt utvalda. Det finns även highscore-lista med de populäraste hamstrarna, matchhistorik, samt ett galleri där man inte bara kan se info om enskilda hamstrar utan även lägga till egna. Detta var ett skolprojekt, och jag erhöll högsta betyg.

Fullstack-webapp created with React and Express, and Firebase for the database. The app was originally deployed on Heroku, and later on Railway. Presented with two randomly chosen hamsters, you pick the cutest one. There is also a highscore-list featuring the most and least popular hamsters, match history, and a gallery not only displaying all hamsters available, but also lets you add your own. This was a school-project, and I received the highest grade.

Icon Live version

Sinus Skateboards

Figma, Serif Drawplus

image image

UI-projekt för e-butik med inriktning på skateboard. Produktbilderna var obligatoriska, men i övrigt gavs fria händer. Jag skapade egen vektoriserad logotyp och maskot i Serif Drawplus. Features för interaktion, så som variants och overlays, användes flitigt. Detta var ett skolprojekt, med huvudfokus på känsla för färgkomposition och design, och jag erhöll högsta betyg.

UI-project for e-commerce skateboard website. Product images were mandatory to include, but aside from that I was given free rein. I created my own vectorized logotype and mascot using Serif Drawplus. Features for interaction, such as variants and overlays, were generously implemented. This was a school-project, and I received the highest grade.

Icon PDF-version

Darn-it

Game Maker Studio

image image

Spel skapat i Game Maker Studio och därefter exporterat till Google Play (via Android Studio) och App Store (via Xcode). Konceptet är simpelt: tryck bort alla rutor innan tiden går ut. Spelet använder en lokal highscorelista kodad från grunden samt en lista över namn som kan redigeras. Det finns även ett annat spelläge som går ut på att räkna cirklar av en viss färg.

Game created in Game Maker Studio and exported to Google Play (via Android Studio) and App Store (via Xcode). The concept is simple: tap away all the squares before time runs out. The game utilizes a local highscore system, coded from scratch, plus a list of names that can be edited. There is also a different gameplay, where you count circles of a certain color.

Google Play App Store

Teknologier & kompetenser: Skills:

Frontend

  • HTML 5
  • CSS
  • JavaScript
  • React
  • SASS/SCSS
  • TypeScript
  • Storybook.js

Backend

  • PHP
  • NodeJS (Express)
  • Insomnia

Databases

  • MySQL
  • Firestore

App-dev

  • Game Maker Studio
  • React Native
  • Xcode
  • Android Studio

CMS

  • Wordpress
  • Joomla
  • Craft CMS

Project Management

  • JIRA
  • Trello
  • MS Teams
  • Slack

Code

  • Visual Studio Code
  • Git + GitHub
  • Bitbucket

Design UX/UI

  • Figma
  • Inkscape
  • Serif Drawplus

Frilansuppdrag:

(2023-2024)

React Native, Joomla.

Utbildning: Education:

Frontend-developer:

(2020-2022)

IT-Högskolan, Stockholm

HTML5, CSS3, JavaScript, TypeScript, React, Firebase, Vue, SQL, Agil Utveckling, Visual Studio Code, Node.js + Express, Heroku, Bash, Git, Ubuntu, Figma, CMS (Wordpress), Docker

Webbutveckling 1 & 2: Web Development 1 & 2:

(2020)

NTI-skolan

HTML, CSS, JavaScript, CMS (Wordpress), GDPR.

Programmering 1 & 2: Programming 1 & 2:

(2018)

Miroi

C++

Webbserverprogrammering 1 & 2: Webbserver-programming 1 & 2:

(2017)

NTI-skolan

PHP, MySQL, AJAX, XML.

Grafisk Illustration vektor: Graphic Illustration Vector:

(2016)

InfoKomp

Serif Drawplus, Adobe Illustrator, Inkscape, Gimp.

Praktik: Internship:

Delorean Webbyrå: Delorean Web agency:

(Februari 2022 - juni 2022) (February 2022 - june 2022)

Stockholm

Craft CMS, SASS/SCSS, Storybook.js, Next.js, Clsx, Wordpress, Golang, Scrum, SSH

Kontakta Mig Contact Me

Epost måste vara giltigt format Email must have a valid format
Top