My portfolio - Daniel Philip Johnson

The Wave

Co built the-wave, while working as a full-stack engineer at hiyield. Restyled from the ground up and an eCommerce store

WordPress

PHP

Tailwind

JavaScript

Docker

Tribute Page

Kevri

Built a rapid MVP for kevri while working with hiyield

Nuxt

Prismic

Tailwind

Netlify

Typescript

Mailchimp

AWS

Tribute Page

Alomcp

During my first month, I contributed to Future Proof Your Power and eventually took control all the way to phase 3

Vue

Vuex

JavaScript

Prismic

Bootstrap

Netlify

Tribute Page

247 Carbon Free

Worked collaboratively and built a rapid MVP in a week. Mostly responsible for QA and code reviewing

Nuxt

TypeScript

Prismic

Tailwind

Netlify

Tribute Page

xigxag

Joined this project midway through, jumping onto creating the ability to search, logic to download the app and integrating the website with Algolia search. Then I became the sole maintainer.

WordPress

PHP

JavaScript

Tailwind

Algolia

Firebase

Docker

Tribute Page

Twitter Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the first in the series.

HTML

Tailwind

Tribute Page

Spotify Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the second in the series.

HTML

Tailwind

Tribute Page

Paypal Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the third in the series.

HTML

Tailwind

Tribute Page

Linkedin Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the fourth in the series.

HTML

Tailwind

Tribute Page

Dropbox Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the fifth in the series.

HTML

Tailwind

Tribute Page

Dribble Tailwind Clone

Built as part of a week challenge. Clone a website login page in two hours during a stream. This was the sixth in the series.

HTML

Tailwind

Tribute Page

Simon

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I used Vanilla Js to build a functional Simon game.

HTML

CSS

JavaScript

FreeCodeCamp

Tribute Page

Recipe Box

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I used React and gained a better insight into local storage to save recipes.

HTML

CSS

JavaScript

FreeCodeCamp

React

Tribute Page

Pomodoro Clock

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project I used vanilla JavaScript to build a functioning Pomodoro Clock.

HTML

CSS

JavaScript

FreeCodeCamp

Tribute Page

Javascript Calculator

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project I wanted to use my React skills to build a functioning calculator. The react app was styled with CSS.

CSS

JavaScript

React

FreeCodeCamp

Tribute Page

Drum Machine

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I wanted to improve my React skills and gain experience using a frontend framework. With the styling, I kept it simple with CSS.

CSS

React

JavaScript

Tribute Page

Markdown Previewer

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project, I wanted to improve my React skills and gain experience using a frontend framework. With the styling, I kept it simple with CSS.

CSS

React

JavaScript

FreeCodeCamp

Tribute Page

Random Quote Machine

For this project, I decided to make the random quote machine mirror a Twitter post. You can generate a new quote via a button and click the share button which will make a Twitter post you can then publish.

HTML

CSS

JavaScript

Tribute Page

Trillo

In this project, I wanted to heavily focus on using flexbox for layout. To continue to build with mobile-first design in mind and progressively build the design up. Looking for ways to improve the performance of CSS queries and render quickly in google lighthouse. Furthered, my experience of the architectural structure 7-1 CSS Architecture and Block-Element-Modifier. Use Sass more efficiently.

HTML

SASS

Tribute Page

Nexter

In this project, I wanted to heavily focus on using the grid for layout and now I wanted to tie all my knowledge together. Mobile-first, CSS media queries,7-1 CSS Architecture and using Sass

HTML

SASS

Tribute Page

Scenic Cornwall

To build with mobile-first design in mind and progressively build the design up. To ensure my CSS queries are rendered quickly. Start to apply an architectural structure 7-1 CSS Architecture and use Block-Element-Modifier in my Sass. To think about how CSS is parsed while making styles and heavily use Sass.

HTML

SASS

Tribute Page

Tribute Page

I wanted the colours to reflect Juice Wrld posthumous album 'Legends Never Die. For the website, I included youtube iFrame linking to top songs from the album. Then I used Spotify embed and blended them into the website. I decided to use only vanilla CSS, test my knowledge of flex and grid for the layout and to make it fully responsive on all devices.

Html

CSS

JavaScript

Tribute Page

Survey Form

I wanted to make a great form that was responsive and worked on all devices. To use both flex and grid for the layout. I used a column for layout for the main content using 1fr for mobile and for tablet and for desktop 1fr 2fr. I also wanted to style form elements and make a custom select to make it visually appealing.

HTML5

CSS

JavaScript

Tribute Page

Product Landing

My goal for this project was to implement a sticky navbar that drops down on scroll, to make a hamburger button with JavaScript, to use CSS with variables in my stylesheet and to mimic Apple design. As a bonus, I added an embedded youtube video that links to an Apple product.

HTML5

CSS

JavaScript

Portfolio

Work Projects

The Wave

Kevri

Alomcp

247 Carbon Free

xigxag

Twitter Tailwind Clone

Spotify Tailwind Clone

Paypal Tailwind Clone

Linkedin Tailwind Clone

Dropbox Tailwind Clone

Dribble Tailwind Clone

Simon

Recipe Box

Pomodoro Clock

Javascript Calculator

Drum Machine

Markdown Previewer

Random Quote Machine

Trillo

Nexter

Scenic Cornwall

Tribute Page

Survey Form

Product Landing