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 the GTA. 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.

I have experience working as a developer in the banking and digital marketing industries. Previously, I went to school for business and math, then later worked in the cosmetics industry. I decided to merge the analytical and creative sides of my personality together to do front end development and I haven’t looked back since! I’ve love learning new things and am currently focused on developing my React and accessibility skills.

When I’m not coding, you can find me researching make-up trends, building miniatures for dollhouses, 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.

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.

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 landing page for a fictional bike repair workshop which I designed and developed for a digital design course. It features an SVG logo which I designed and created, a fixed navigation that changes as you scroll, an animated number counter, a testimonials slider, and a map using the Google Maps JavaScript API.

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.

Live Site

Contact Me

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