Michael's Portfolio Page

Hi y’all! This is my Personal Portfolio page:
The Github link: https://github.com/10high/Portfolio
The live site link: https://www.flyingtens.com/Portfolio/

I actually built it a few months back and forgot that it was part of the curriculum, which is why I’m posting it now.

It took me a couple of weeks to make. Most of that time was trying to build a design in Figma that I was happy with, plus also making a bunch of changes to the design once I’d already built it. I DO NOT LIKE designing! :slight_smile:

The other main time consumer was learning how to apply my newly acquired JavaScript skills to create a site that is easy to update. I settled on a system of using an object that contains objects, each including details about the portfolio item. This means that when I want to update the site, I just have to add the new relevant details and then new item is built and put in the correct order.

It was a great learning experience. I’m pretty happy with the result - but please let me know if you find any bugs or weirdness!

2 Likes

Very cool stuff, 10high! First impression is very good and I’m eager to check out your code under the hood.

Great job! Your JS idea looks very smart, I think I will try to copy it :slight_smile:

Thanks. Sure thing! :smiling_face:

Thanks. Let me know if you have any questions.

Grrr. I just noticed that the link to the live site actually goes to the Github page. Can’t seem to edit the post anymore :sob:
Anyway, the link the live page is: https://www.flyingtens.com/Portfolio/

I have a question. Looking at your github, I saw you split your css into several files for easy readability. But when I checked the head at the live site, I only saw one (truncated) css file. How did you “smosh” the many css files into one for the live site? Did you use a tool to sort this out for you? cheers

Hey - so, I built the page using PostCSS with the plugins: CSS minify, autoprefixer, and PostCSS import.

If you look in the file CSS/PortfolioPage.css, you’ll see all of the other CSS files imported at the top. However, as I understand it, @import has poor performance in CSS. The PostCSS import plugin takes all these imports and makes then inline, so it all becomes one big file (thereby removing the performance hit from @import)

I hope that answers your question?

1 Like

This video by Kevin Powell gave me a good intro to PostCSS I thought: https://www.youtube.com/watch?v=ohJcZW60br0

1 Like

Thanks for your answer, that’s very helpful! I’ll be sure check out the video.