Personal Portfolio Website

Hi There!

A couple of months ago, I decided to pause upon the completion of the A11Y section of the full-stack course. So much information to be digested, and I felt I had to try and put it to good use. I had already started putting together a personal website as a playground for learning things and applying them. I’m now feel pretty good about this first release. I’ve sort of developed my own way of doing things, short of having to use an actual framework like Bootstrap. At first, the code was like a bowl of spaghetti, and so tracking down a problem was more often than not a nightmare. Over time, I learned to standardize my design approach with reusable elements. For example, every page uses the same ‘content-wrapper’ and ‘content’ divs. Most of the content uses a standardized ‘card’. Should the card design on one page be slightly different than on another, I tweak it with additional styling instead of creating a whole new set of ‘card’ selectors for every page. Reusability is key, as I’ve come to find out. A link to my GitHub repo is provided at the end of this post.

A few things to take a look at:

  • Responsiveness: I’ve added a toggle-style mobile menu. It’s got a little jQuery behind it. (See main.js).
  • I used a carousel to showcase my projects, and I’ve added a “?” button on each slide to pop up a description box. There’s JS code behind all this behavior, which is also in main.js.
  • For the Mixed Messages project, I embedded a ‘pen’ (codepen) to display the html/css/js code along with the result.
  • I used formspree (formspree.io) for the email form, but I plan on reimplement it using php once I move the site to an actual host. (github pages do not support php).
  • Having to copy over the header and footer sections to every page every time you make a change is a real pain. So, I used header.js and footer.js to “innerHTML” the header and footer contents upon page load. Also notice the header behavior as you scroll-up/down the page. That’s in fixed-header.js.

Other than that, there’s not a whole lot. Thanks a lot for any feedback, good or bad. It’s all welcome.

Site: Peter Ghostine's Personal and Professional Page
Repo: GitHub - peterghostine/peterghostine.github.io

Have a great day!

Peter

4 Likes

Great job Peter!!! It is cool to see how someone has built a website from scratch and understanding some of the learning that goes with it!
You have some really good resources on your page :smiley:

1 Like