FrontendDeveloperPortfolio

Hello, I'm Jonas, I build engaging, user-centric web solutions. Check out my portfolio to see my work in action.

About

From Concept to Code: My Journey

Hello, I'm Jonas, a front-end developer with a foundational background in civil engineering. Bridging the gap between structured engineering and creative web development, my career transition is driven by a passion to merge technical precision with aesthetic design. Skilled in HTML, CSS, JavaScript, and React, I focus on creating digital experiences that prioritize beauty and functionality. Join me as we delve into my professional journey, explore my evolving skill set, and look towards future aspirations in the dynamic field of technology.

I began my professional journey as a civil engineer, but my passion for technology and design led me to transition into front-end development. With a strong foundation in analytical thinking and problem-solving, I embarked on this exciting new path to combine creativity with technical skills. Today, I am a dedicated front-end developer with a keen eye for detail and a love for crafting beautiful, user-friendly web experiences.

Portfolio

Highlightedprojects

Portfolio Website

Portfolio Website

Website

Personal Portfolio
React
Tailwind CSS
GSAP
React Router
shadcn/UI
Figma

This portfolio project showcases a comprehensive range of frontend development and design skills, utilizing a variety of modern tools and best practices to create a responsive, interactive, and well-structured website.

Vanlife

Vanlife

Website

React Router
HTML
CSS
JS
React

VANLIFE is a website for people to rent out camper vans for their next road trip adventure. This is a learnining-focused project and is part of the Frontend Developer Career Path on Scrimba.

Multi-Step Form

Multi-Step Form

Web App

Form Navigation / Firebase Integration
React
SCSS
Firebase

Multi-Step Form is a React-based web application that guides users through a series of steps to complete a form. Users can input personal information, select a subscription plan, choose add-ons, and confirm their selections. Key takeaways include React component development, form validation, and Firebase Firestore integration.

Quizzical

Quizzical

Trivia App

State Management / API Fetching
HTML
CSS
JS
React

QUIZZICAL is a trivia app that fetches questions from the Open Trivia Database API. This is a learnining-focused project and is part of the Frontend Developer Career Path on Scrimba.

Watchlist

Watchlist

Web App

Local Storage / Data fetching
HTML
CSS
JS
React

MOVIE WATCHLIST is a website for people to add movies to their watchlist. This is a learnining-focused project and is part of the Frontend Developer Career Path on Scrimba.

Airbnb Clone

Airbnb Clone

Website

React props / Reusable components
HTML
CSS
JS
React

AIRBNB CLONE is a website that mimics the Airbnb website. This is a learnining-focused project and is part of the Frontend Developer Career Path on Scrimba.

Add to Cart

Add to Cart

Web App

Real-Time Data Handling
HTML
CSS
JavaScript
Firebase

Add to Cart is a real-time shopping list application that allows users to add, display, and remove items from a list. Built using HTML, CSS, JavaScript, and Firebase, this project demonstrates dynamic data management with a modern web stack.

Blackjack Game

Blackjack Game

Web App

Interactive Game Development
HTML
CSS
JavaScript

A simple web-based Blackjack game to practice DOM manipulation, event handling, and game logic implementation using HTML, CSS, and JavaScript. Key learnings include dynamic content updates, user interaction management, and conditional logic for game states.

Password Generator

Password Generator

Web App

Customizable Secure Passwords
HTML
CSS
JavaScript

A web-based application to generate secure, random passwords with customizable preferences. Key takeaways include DOM manipulation, event handling, form input synchronization, random character generation, conditional logic, and responsive CSS styling.

Unit Conversion

Unit Conversion

Web App

Unit Conversion
HTML
CSS
JavaScript

Metric/Imperial Unit Conversion is a web-based tool that allows users to convert units between metric and imperial systems. The application supports conversions for length (meters/feet), volume (liters/gallons), and mass (kilograms/pounds). Key takeaways include DOM manipulation, event handling, and unit conversion logic using JavaScript.

CSS Fundamentals

CSS Fundamentals

Web Page

CSS Fundamentals
HTML
CSS

CSS Fundamentals is a personal portfolio webpage demonstrating essential CSS skills. It showcases responsive layout, typography styling, reusable utility classes, hover effects, and semantic HTML. Key takeaways include mastering basic CSS techniques for layout and styling.

Meme Picker

Meme Picker

Web App

Emotion-Based Meme Selection
HTML
CSS
JavaScript

Pumpkin's Purrfect Meme Picker is a web-based tool that lets users select their current emotion and receive a matching cat meme. Features include emotion selection, GIF filter, and random meme display. Key takeaways include DOM manipulation, event handling, and array methods using JavaScript.

Restaurant App

Restaurant App

Web App

Online Food Ordering System
HTML
CSS
JavaScript

Restaurant Ordering App is a web-based tool that allows users to browse a menu, add items to their cart, and complete an order with payment details. Key takeaways include DOM manipulation, event handling, and form processing using JavaScript.

Let's WorkTogether

I'm excited to work on new projects and challenges.
Let's talk about how I can help.