Skip to Main Content

Kristen Kriens Front End Developer

Find Out More

About Me

Kristen Kriens Bio Image
Photo credit: Pam Lau

Hi, my name is Kristen Kriens and I’m a Front-End Developer based in Milton, Ontario. I am organized, proactive, detail oriented, creative, and have strong technical skills. With these skills, I enjoy creating beautiful user-friendly websites by writing clean semantic code.

Before attending HackerYou, I worked in the cosmetics industry, which gave me an eye for design and enhanced my creativity. Since graduating the Bootcamp I have been working as a Junior Front-End Developer in the banking and digital marketing industries. I’ve learned some new skills and have honed the skills I acquired at HackerYou and in previous positions.

When I’m not coding, you can find me researching make-up trends, playing with my dog, or spending time with friends and family.

My Skills & Tools

  • HTML5

  • CSS3

  • Sass

  • jQuery

  • Javascript

  • PHP

  • Git

  • GitHub

  • Gulp

  • WordPress

  • Photoshop

  • Illustrator

Recent Blog Posts

Single Page Websites & SEO

Single page websites have been a huge trend in web design for the past few years. While they look great and have features like the parallax scroll effect, they aren’t the best for SEO. Luckily, there are a few ways in which you can optimize your … Continue reading >

Vertically Centering Content

Anyone who has ever tried to vertically center content using css knows how difficult it can be. This article will explain three common ways vertically centering content can be achieved. Technique #1: height and line-height The idea behind this is that you set the height … Continue reading >

View All Posts

Check Out My Portfolio

API Web Application – What To Do

  • HTML5
  • CSS3/Sass
  • jQuery
  • JavaScript/ES6
  • API/AJAX
  • Responsive
  • Git
  • Gulp
  • Geolocation
  • Google Maps

This is a local event finder which uses the users current location (via Geolocation) or a location of their choice to show events . It features real-time filters for location, distance from base location, date or date range, and event categories. Once the user submits their choices, up to 50 events will be mapped and labelled by icons representing their respective categories. Users can click on events to get more info such as event name, venue name and location, date and time of the event, and an event description. From there they can get directions from the base location to the event and email those directions to themselves. This project uses the Google Maps JavaScript API (including the Geocoding Service, the Directions Service, and the Places API), the Eventful API, and the Elastic Email API.

Live Site

JavaScript & jQuery Game – Memory Game

  • HTML5
  • CSS3/Sass
  • JavaScript/ES6
  • jQuery
  • Website Design
  • Responsive
  • Git
  • Gulp
  • Firebase

This is a Memory Card Flipping game featuring a monochromatic UI. There are multiple card types and levels to play, a countdown timer, and a highscores listing which is stored with Firebase. The game board is randomized upon each click and scores are based on the number of clicks they make and the amount of time left. Upon completion of the game, if they get a highscore, they are able to add their name to the scoreboard and view the top 5 scores by difficulty.

Live Site

Single Page PSD to Responsive HTML Site – Abstract

  • HTML5
  • CSS3/Sass
  • jQuery
  • JavaScript
  • Responsive
  • Git
  • Gulp
  • Highcharts
  • Google Maps

This is a PSD to HTML conversion of a single page site. It is fully responsive and features multiple sections, a fixed navigation on mobile that changes as you scroll, a scaling slider, a portfolio section, a custom coded lightbox, percentage pie charts using Highcharts, and a map using the Google Maps JavaScript API. Converted from the Abstract theme mockup which can be downloaded here.

Live Site

Multi Page PSD to Responsive HTML Site – StayFit

  • HTML5
  • CSS3/Sass
  • JavaScript
  • Responsive
  • Git
  • Gulp
  • Google Maps

This is a PSD to HTML conversion of a multi page site for a gym. It is fully responsive and features a large hero image, multiple sections on the home page, an about us page, an our team page, and a contact page with a map using the Google Maps JavaScript API. Converted from the StayFit theme mockups which can be downloaded here.

Live Site

API Web Application – Time for a Movie?

  • HTML5
  • CSS3/Sass
  • jQuery
  • JavaScript
  • API/AJAX
  • Responsive
  • Website Design

This is a fully responsive web application I created with The Movie Database (TMDb) API. The user chooses a genre and enters how much time they have and it will return up to 12 random movie options. It features a material design interface and returns the title of each movie, it’s respective rating out of 10, a short plot summary, and a link to it’s IMDB page.

Live Site

Single Page PSD to Responsive HTML Site – Loose Chain Bike Co.

  • HTML5
  • CSS3/Sass
  • JavaScript
  • jQuery
  • Adobe Illustrator
  • Website Design
  • Logo Design
  • Responsive
  • Git
  • Gulp
  • Google Maps

This is an event site for a fictional bike repair workshop which I designed and developed for a Digital Design course. It features an SVG logo which I designed, a fixed navigation that changes as you scroll, an animated number counter, a testimonials slider, and a map using the Google Maps JavaScript API. The associated assignment information can be downloaded here and the mockups I created in Adobe Illustrator are here.

Live Site

Single Page PSD to Responsive HTML Site – Alicia

  • HTML5
  • CSS3/Sass
  • jQuery
  • JavaScript
  • Responsive
  • Google Maps

This is a PSD to HTML conversion of a single page site. It is fully responsive and features multiple sections, a fixed navigation that changes as you scroll, a masonry style portfolio section with more info on click, and a map using the Google Maps Javascript API. Converted from the Alicia theme mockup which can be downloaded here.

Live Site

Multi Page PSD to Responsive HTML Site – Coursea

  • HTML
  • CSS3
  • jQuery
  • Responsive

This is a PSD to HTML conversion of a multi page site. It is fully responsive and features a large hero image, multiple sections on the home page, a blog page, and a sign up page. The entire site was created using floats and no flexbox. Converted from the Coursea theme mockups which can be downloaded here.

Live Site

Contact Me

I’d love to hear from you! Email me at kristen @ kristenkriens.com or fill out the following form.