Personal Portfolio - Shade Github Page

Hello everyone! It’s been a while, but I’m still grinding out projects and moving forward. I’ve finally completed the last project in responsive design.


Some notes:

  • This is hosted on GitHub Pages, so the site can be inspected through your browser dev tools, or click on the FCC Project 5 card to be taken to the GitHub repository with all files.

  • Site is fully responsive! At all sizes! (minimum size is around 350) Completely! No errors! If you see anything please let me know.

  • Site is coded completely in HTML and CSS with no outside tools used. Recommendations that include any other languages or tools are completely welcome, this is just a disclaimer. Built from scratch using Visual Studio Code!

Indeed, nicely responsive. :tada:

I noticed that your freecodecamp icon is not aligning well with other sns icons. Perhaps increase its size if it’s a svg?

You’re right about this. I’ve been having trouble getting the 3 images to have the same height. They are all the same width, but their heights differ based on the original image file. So GitHub is 99.9 pixels height, freeCodeCamp is around 60 pixels, and LinkedIn is about 91 pixels.

Since these images change width based on the size of the page, it makes it difficult to set their height as well. The trick might be to make this area a grid where the picture can have a set width/height in their cell and the text is contained in another cell.

Also, I could probably do an easy fix of just editing all these images to be the same size before being added to the site.

I’ll take another look at this and see what I can do.

Thanks for the feedback!

Edit: Fixed. Used a CSS grid to align the image and text vertically with the images having a set height.

1 Like

Looks good and very minimal, I like it.

In my opinion the footer and the icons are too big; And while having your projects on GitHub is a smart idea, I would put the projects thumbnails linked to CodePen for easy visualisation of the UI, and a icon to your GitHub in the footer as you did.

Also when I click contact me it goes nowhere, and I think it could lead to a contact form. And you definitely should add an about me section!

@shadew did you use GitHub Desktop or did you use Git and the Command Line to put your projects on Github? I am asking it because I would like to learn the basics and get familiar with Git and GitHub and I am looking for the best possible beginner friendly resources to learn them as fCC does not include Git and GitHub in the curriculum.

Thanks for the feedback!

You actually reminded me of a change I was planning to make in the future, but was not necessary to pass the project specs. Now that I know how to use GitHub Pages, I plan on making all of my projects available as pages (I find these much nicer to view than CodePen, and also allows for local files such as images). The project link would then go to the webpage itself for nicer viewing as you stated, while my GitHub link at the bottom of the page goes to the projects. I love the concept behind your suggestion and will roll this into a future update. I’d like to make my other projects more refined before hosting them as pages to publicly view.

Woops! The contact form was a mistake, and this was a great find. I will have to add a section at the bottom of the page, or perhaps a separate page completely. I’d like to learn Javascript before implementing a form as well.

Added an About Me section to the to-do list as well. I will have to think about how to keep my simple design and include some info as well.

I use Git through Linux and Windows command lines. I just recently switched back to 100% windows as I don’t have the time to upkeep a Linux installation and do 24/7 research on how to operate simple tasks such as updates and installations.

I used the Git handbook on GitHub to get started with Git. I have not done any research on how to use Git without GitHub (such as local repositories). It only took a couple hours to gain a firm understanding of what GitHub is and how it works in order to implement it into my design flow. Right now I’m using Visual Studio Code which has its own terminal (command line) to run Git commands while working on a project. I prefer the command line personally because it can be used the same across any system, and understanding the commands helps to understand what Git is and what it is really doing, avoiding mistakes in the future.

1 Like
html {
  scroll-behavior: smooth;

This is perfect, thanks!

The website has a nice solid, consistent design in desktop and mobile view.

  1. I am not a fan of the font “Playfair Display” but that is just my opinion.
  2. You could add some kind of hover effect to the portfolio items.
    Other than that you did a great job.


I will add on my to-do list a hover effect for the project cards. Perhaps a filter or highlight border on the images? I’ll try out some different ideas.

I’ll add the font as well. It was mentioned that an About Me section would be useful, so I’ll need a paragraph font for the page anyways. I’ll see if I can find a header/link/text font package that flows better here.