stylized selfie in black and white color scheme with a stylized landscape background

front-end web developer

Welcome to my personal portfolio.

My name isKieranand I develop performant and scalable websites.

I have always been drawn to solving challenging problems. This is key skill to building sites for the web. Being able to write a solution and instantly see the results in the browser is highly rewarding.

My preference is to build a simple and clean UIthat is interactive, responsive and accessible to all users.

My primary skills:

  • html
  • css
  • javaScript
  • typeScript
  • react
  • git

as well as:

  • tailwindcss
  • sass
  • next.js
  • webpack
  • jest
  • testing-library

working on:

  • blogging
  • interview prep
  • apollo/graphql
  • SEO
  • Design & Figma

I also love to give back by helping aspiring devlopers learn web-development. This is why I post regular blog posts focused on various front-end related topics and learning/ writing tips.

Get in touch

Personal Achievements

Check out my work below

  • Kierans Coffee Collection

    Kierans Coffee Collection

    Cart page on mobile sized device
    Home page in light theme
    Sidebar on mobile sized devices

    project description

    What is Kieran's Coffee Collection?


    Kieran's Coffee Collection is a serverless e-commerce site allowing the fictional company to sell their products online. Users can manage a cart as well as a saved products list and proceed through a checkout process and pay for their goods.

    The site also includes user authentication allowing users to sign-in with accounts and save their details for faster future checkouts and view previous orders placed on the site. The site contains multiple different products where users can leave reviews as well as filter and sort products.

    tech stack

    • next.js logo
      next.js
    • typeScript logo
      typeScript
    • chakra UI logo
      chakra UI
    • apollo graphql logo
      apollo graphql
    • eslint logo
      eslint
    • auth0 logo
      auth0
    • hasura logo
      hasura
    • stripe logo
      stripe
    • jest logo
      jest
  • Kierans SaaS Landing Page

    Kierans SaaS Landing Page

    Landing page home screen at mobile size
    Landing page home screen at desktop size
    Pricing section of my landing page at desktop size

    project description

    What is Kieran's SaaS Landing Page?


    This project is a modern landing page that I first designed myself using the design tool Figma before building it with code based off the design. In order to improve my skills as a front-end developer I wanted to start by designing the desktop version of the site so I could practice working from a specific set design.

    It is built for a fictional product that provides SaaS. The highlights of the landing page includes:

    • * Fully responsive design for small and large screens
    • * Across the board 100 scores in Lighthouse
    • * Less than 1s average page load time
    • * Hero, features, pricing, final call-to-action and footer sections

    tech stack

    • figma logo
      figma
    • html logo
      html
    • scss logo
      scss
    • vanilla js logo
      vanilla js
    • snowpack logo
      snowpack
  • Checkers Board Game

    Checkers Board Game

    checkers mobile version with winner
    checkers desktop version
    checkers desktop version mid-game

    project description

    What is Checkers Board Game?


    This is a web based version of the popular board game checkers to be played between two players where each player attempts to jump and remove all of the other players pieces in order to win. It allows all of the original rules of the game including jumping opponent pieces, turning pieces into a king and is responsive allowing for play on mobile, tablet or desktop.

    tech stack

    • html logo
      html
    • css logo
      css
    • typeScript logo
      typeScript
    • eslint logo
      eslint
    • webpack logo
      webpack
    • jest logo
      jest
  • Turncoat Brewery

    Turncoat Brewery

    Landing page at mobile device size
    Turncoat brewery home page
    Contact page at mobile device size

    project description

    What is Turncoat Brewery?


    Turncoat Brewery is a product focused site built for a brewing company that includes home, products and contact pages as well as a small e-commerce store that houses the companies own products. The site allows its users to manipulate a shopping cart that is persisted in storage, adding and removing cart items and their quantity at will. It also calculates the running total of the cart and users are also able to submit any queries using the contact form provided.

    tech stack

    • html logo
      html
    • css logo
      css
    • vanilla js logo
      vanilla js
    • mongodb logo
      mongodb
    • express.js logo
      express.js
    • webpack logo
      webpack
    • jest logo
      jest

A little about myself

For making it this far

Hi there

I am a self taught front-end web developer who decided to change career paths away from electronic engineering in early 2019. I was looking for something to express my creative side in my work.

My time away

I was taking time out after graduating with my masters degree to travel, leaving the UK to live and work abroad in New Zealand for a year when I found my passion for web development.

Finding web development

After writing my first line of html I knew I was hooked and so set upon spending most of my free time reading, writing and learning all I could about code, specifically front-end web development.

Creative contribution

It's a special feeling when you are able to deploy a site to the web for anyone to see and use. That feeling of being able to contribute something even from the very beginning is unique and keeps me engaged and wanting to improve.

Back to the top