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!
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!
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
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)
