Hello World!

I'm Melissa Zhu and I am a

<Software

Developer>

01001101

happy robot pointing to itself

Welcome to my

// Portfolio

// Portfolio

// Portfolio

about me

I'm a passionate software developer who loves good design, good movies and good food. I graduated with a Bachelor's degree in Software Design from Queen's University and have some experience building websites for small buisnesses, non profit organizations and personal passion projects. I'm always curious about things I don't know yet, and strive to learn new front-end tools and technologies to stay up to date and to continuously grow as a developer. I've been actively involved in both the design and sofware development processes and get excited seeing cool designs and ideas come to life. I love a good user experience, and believe that understanding design is crucial in software development. I have lots of experience creating user friendly mockups and prototypes in Figma, along with completing a certificate from a UX bootcamp during the pandemic. When I'm not coding, I'm gaming, playing badminton or looking for the next delicious food place to try out!

Melissa sitting in an alien room Melissa with sunglasses in front of a door Melissa on a mountain with a nice fall view

my skills

  • HTML5
  • CSS
  • Sass/Scss
  • Bootstrap
  • Tailwind
  • JavaScript
  • TypeScript
  • React.js
  • Node.js
  • Express.js
  • Next.js
  • npm
  • RESTful APIs
  • Postman
  • MongoDB
  • MySQL
  • Python
  • Java
  • Agile
  • Git/GitHub
  • Figma
  • Jest

my projects

Frontend Mentor

Despite web development not being a prominent focus area in my computer science degree, I found a love for it after joining a web dev club at school and helping some real-world clients build full stack websites. Although I've learned enough to create full blown web apps, I wanted to take some time to go back and solidify my fundamentals, while filling in some knowledge gaps, and learning useful tricks I might have missed over the years. Frontend Mentor is a site I came across that has project briefs and designs to help developers practice their frontend skills and give them project ideas. I was able to accurately recreate several of these designs by translating JPG images and design files into interactive components. I did so using HTML, CSS, Sass/Scss, and JavaScript, as well as applying frontend concepts like responsive and mobile-first development, responsive images, and coding best practices. Below are a few challenges that I completed from the Frontend Mentor site, along with a link to my profile.

QR Code Component

This is a simple card component that features a QR code. I used HTML and vanilla CSS to build it. This project allowed me to practice with CSS positioning and Flexbox, and I was able to make it responsive by using relative units.

GitHub Repo Live Demo

Blog Preview Card

This project was a preview card for blog articles, and I used HTML, CSS and the Sass/Scss preprocessor to build it. I struggled with the notorious newbie issue of centering a div and learned that elements had default padding and margins which I resolved by starting my stylesheets by setting them to 0.

GitHub Repo Live Demo

Social Links Profile

This challenge was a social links profile card that featured an interactive, hover effect on each button, along with a mobile and desktop design. I built it with HTML, CSS and continued to practice using Sass. I was also able to make this solution responsive across different screen sizes.

GitHub Repo Live Demo

Recipe Page

This is a recipe page challenge that mimics many websites out there with online recipe articles. I built this one with HTML, CSS and Sass. For this project, I implemented a mobile-first approach and a responsive solution that works and looks good on different screen sizes. I learned how to style tables, list elements and pseudo-elements.

GitHub Repo Live Demo

Product Preview Card

This project features a product preview card that can be commonly found on eCommerce and product websites. I used HTML, CSS and Sass along with Flexbox and Grid for this solution. I learned a lot about responsive images and srcset in this project, as well as CSS Grid.

GitHub Repo Live Demo

Four Card Feature

This challenge includes creating 4 cards and allowed me to exercise my knowledge of grid and layouts. I used HTML, CSS, Sass, Flexbox and Grid for this solution, which allowed me to gain a better understanding of both.

GitHub Repo Live Demo

Testimonials Grid

This is a testimonial spread commonly found on other websites offering products or services. The main focus of this project was on flexible layout and responsiveness. I used HTML, CSS, Sass, Flexbox and Grid for this solution and was able to get it looking really nice on all screen sizes. Additional to the mobile and desktop designs, I took it upon myself to create a tablet version as I felt that the transition between larger mobile and smaller desktop screen sizes to be awkward. It turned out really well and the media queries flow seamlessly as the screen size grows and shrinks. I was also able to clean up my code, keeping it organized and avoiding any repetitive code by taking advantage of Sass's features.

GitHub Repo Live Demo

Coming Soon...

Article Preview Card

I am currently working on this project, which features an article preview card with an interactive share component. I'm using HTML, CSS, Sass and vanilla JavaScript so far to build it. Stay tuned to see the completed product!

Next Steps

Previous projects have focused on solidifying web fundamentals and responsive design, and I'm currently working on some intermediate and advanced challenges that require more user interaction, thus calling for more JavaScript. I plan to also use TypeScript and React to fill in any knowledge gaps and discover new interesting features that I may not have had the chance to explore previously. I also plan on learning more about NextJS, Node, incorporating backend APIs and databases, animation and video, Flutter and Go in future endevours.

Check out my Frontend Mentor profile to see all the challenges and paths I've completed so far and follow me on my frontend journey.

Larger Full Stack Projects

Little Forests

Little Forests is a non-profit organization that I've had the pleasure to work with, in helping them go from using Excel sheets to a website that can filter and suggest plant combinations based on soil and other environmental condition inputs. This was a full-stack project using the MERN stack (MongoDB, ExpressJS, ReactJS and NodeJS). TypeScript was used as the main development language and RESTful API calls handled the backend logic. I also used Figma for the initial design of the website's information architecture, user experience and various wireframes and prototypes during the collaboration with the client. Git was the main form of version control.

GitHub Repo

Mystic & Magick

Mystic & Magick is a small crystal and jewelry business in Kingston, Ontario. They started selling products on their Facebook page, and I was able to help them develop their own eCommerce website. This project used HTML, CSS, JavaScript and ReactJS. Figma was also used for the inital design of page layout and prototypes to show the client, and Git was the version control system used in this project.

GitHub Repo

Coming Soon...

Pokemon Sleep Guide

As a curious individual who strives to improve everyday, I always have a new projects in the works. I'm currently working on a guide for a cute sleep tracking game developed by the Pokemon franchise. This mobile game appears simple, but has many nuances and tricks that can be difficult to pick up on as a new player, so I've compiled a bunch of data and personal research that I found helpful, and I'm turning it into a planner/guide for players to use.

contact me

Or email me at: your-email@example.com

Connect with me:

LinkedIn GitHub