John Swan

Front End Web-Developer


Top Projects

BlockWatch

BlockWatch

A cryptocurrency watching application

Family Album

Family Album

A clone of Instagram using Next, Recoil, Firebase and Tailwind

Portfolio

Portfolio

My web development portfolio. Built with Next.js, Sanity.io, Tailwind CSS and TypeScript

Mobile First

Fully Responsive

Mobile devices make up 55% of all internet traffic. As more cities nad countries get faster internet access, the necessity for Mobile First Development gets higher and higher. Building an optimized web-app with PWA support is what I do.

iphone with swirl
Laptop with Swirl Design

On the big sceen

More Screen.
More Potential.

More screen space means more opportunity. Desktops, Laptops and Tablets provide an opportunity to do more with websites. Games, animations, and more productive layouts.

My Process

Plan

First I plan the project. This includes figuring out a color theme, creating a mood board to make the "story" of the project, and creating a few more to decide on the best option.

Mockup

After figuring out the overall story and theme of the project, I create a mockup in Figma. Here, the layout, flow and overall design is created. This design will be translated into code.

Tech

Here, the tech stack is planned out. I decide what technologies will be used to build the website. This can include TailwindCSS, Bootstrap, React, Nextjs, Sanity.io and Webflow.

Build

This is the longest step in the process. Here, the website is built. The styling is translated from the mockup built earlier, the CMS and Backend are linked to the Frontend, and everything is tied together.

Iterate & Improve

No website is ever done. After the website is built and deployed, it has to be maintained and improved. Changes to APIs and Frameworks need to be accounted for, tweaks in SEO and performance optimizations need to be made, and new features can be added.

Productive Desk
Productive Desk

Skills
Front End Web Development

Click on a skill to read a little about my experience with it.

Tailwind CSS
Bootstrap
Google Analytics
JavaScript
Next.js
MySQL
SASS / SCSS
Sanity.io
Firebase
TypeScript
React.js