Choose a style with these buttons!




Projects

  • home page freshflix

    Fresh Flix

    React App

    Fresh Flix is a dynamic movie database I made with a group of two others. Using The Movie DB's API connection, this React Application dynamically updates to show the most up to date data dependant on the user's filtering options. A user can filter movies by 'popular', 'top rated', 'upcoming', or movies 'now playing'. A user can also favourite movies that interest them, those movies are stored on their local storage and displayed to them on the 'favourites' page.




    My Design Process

    This project began with a simple wireframe which I then made into a high-fidelity mock-up using photoshop. Using Invision, I then turned my mockup into a prototype. Below are links to my prototypes, feel free to have a click around:

    Mockups:

    fresh flix desktop home mockup fresh flix mobile home mockup fresh flix mobile movie info mockup fresh flix desktop movie info mockup



    Development

    This project was done in a group with two other students. Although they had also made mockup designs and prototypes for a Movie Database, we all agreed to use mine. This project challenged our understanding of both React and Github as we were all new to both tools. I helped the group make a development plan, organizing the project into smaller, easier to manage tasks; this allowed us to properly prioritize tasks that either seemed large or more complicated than others.

    Below you can see some code I used to create the favouriting functionality:


    fresh flix code



    Final Results

    fresh flix desktop home fresh flix mobile home fresh flix mobile movieinfo fresh flix desktop movieinfo



    Reflections

    As I mentioned earlier, our new Github skills were put to the test in this project. We began overly cautious, making a local copy of our work every time we went to merge for fear of losing anything. However, as time went on and we figured out our rythm as a team with Github, it became easier and easier to deal with the occasional merge conflict or accidental merge to the master.

    This was the first major project that I worked with a team on, and although there was some added complication with sharing our work via Github, once we figured that out, the ability to collaborate, share ideas, and see my design grow with their input was very rewarding in the end. I'm very proud of this site. Please enjoy!

  • screenshot of portfolio home page

    Portfolio

    HTML5 | PHP | SASS | JavaScript

    This Portfolio is to showcase my projects and skills in Web Development. In this project I used a base of PHP, SCSS, Javascript, and HTML. My portfolio has had many faces since I began learning these new skills, and it will likely have many more in the course of my career. Read more to see some of the other faces:




    My Design Process

    I began designing my portfolio with a very different idea in mind. Click HERE to see my initial design.

    Before building this site, I redid my wireframes, below you can see the wireframes behind this version of my portfolio:

    portfolio desktop wireframe of home page portfolio mobile wireframe of home page portfolio desktop wireframe of projects page portfolio mobile wireframe of projects page



    Development

    I began this project as a React App but ended up changing my mind to hard coding in order to get more practice with HTML5, SASS, PHP, and JavaScript. I had a lot of ideas that I wanted to try but had three key functionalities that were non-negotiable:

    • A slider for my projects
    • A thumb driven navigation
    • The ability for the user to have styling options

    As I began working on the project, I had the idea of a colour changing background and spend a good deal of time building that and debugging. If you haven't already, please click one of the buttons on the top right of the page and check out my other page styles!

    Below you can see some of the code I used in my portfolio:


    screenshot of code used to change background colour



    Final Results

    portfolio desktop home page portfolio mobile home page portfolio desktop red home page portfolio mobile orange home



    Reflections

    I found this project to be quite difficult, not due to the coding, but in trying to portray my personality and style. However, it was also fun to have the freedom to try new things and really test my skills. I ended up surprising myself with some of the functionality I created and I look forward to see how it progresses as time goes on.

  • splash screen of spring fever javascript game

    Spring Fever

    JavaScript Matching Game

    Spring Fever is a JavaScript card matching game with a twist. Instead of flipping cards to match, you're matching blooming flowers. This project was done early on in the FWD course but is still one I am proud of since I made everything.




    My Design Process

    The design process for this project was a little more simple than the others, I had the idea of blooming flowers instead of flipping cards and drew a quick wireframe on paper:

    splash screen of spring fever javascript game



    Development

    I began this game after only being in the FWD course for a month. We were required to create functionality to switch between screens with no browser redirection, track the player's name and score, and include a help modal that changes depending on the screen the user is currently on. The challenge seemed daunting at first but as I started working, I discovered how exciting it is when some functionality finally works!

    Below you can see some of the code I used in my game:


    code snippet of js game



    Final Results

    splash screen of spring fever javascript game game screen of spring fever javascript game game screen of spring fever javascript game instructions on game screen of spring fever javascript game winning screen of spring fever javascript game  gameoverscreen of spring fever javascript game


    Reflections

    When we were first given this project it felt almost impossible that we'd be able to begin creating a game within our first month; our projects before this point had been HTML and CSS with minor JavaScript functionality. However, once I started building the game and functionality, I discovered that the problem solving and the feeling I got when I solved that problem, were a lot of fun and I even found myself waking up in the middle of the night to try a solution to a bug that I had thought of in a dream!

    This project is still far from perfect, there is a bug that haunts me to this day that I work on every now and then, but I am still very proud of it and like to look at it to see where I started and how far I've come since.

  • Coming Soon!