Liz Lorena Berberena

HomeAll ProjectsCVAboutContact

My Second Portfolio

Developed Fall 2017

My second portfolio was an original multi-page design made with HTML, CSS, Bootstrap, and jQuery. I had fun trying to add creative flairs to this one. When the website loads, you must click an arrow to reveal my portfolio items and a minimalist white theme. I also made a handmade image toggler of example commissions. I might go back and implement Jekyll on this one to be more space-saving.

Screenshot of Second Portfolio

Visit SiteSource Code

The final portfolio of mine from 2017 was a more ambitious and complicated theme for me to do. I had figured out that naming your pages index.html and placing them inside a folder with the name of the page made it so that you wouldn't need to type .html in the URL, but this got a little bit out of hand as I found myself making copies of the same code again and again. Ultimately this portfolio was a failure for me, but I was trying to get more creative with it. I had been looking for inspiration online and came across Ariel Beninca's awesome portfolio website. At the time, her site was mainly white with graphics of her work in an alternating pattern, so I just had to try to replicate the layout. I began making some colorful graphics to represent my items, which I still use on my current portfolio. One of the bad choices I made, however, was making not only a fixed menu, but a fixed footer.

This was the result courtesy FireShot, with a little editing because the fixed footer really botched the screenshot:

Screenshot of Entire Second Portfolio

Gif of Social Buttons

Having fun with image opacity.

The landing page and other pages used a different design, however. I tried to do something fancy with a black background with an inner white border and gold lettering. When you clicked on the white arrow, the landing page would hide, change the colors of my navigation links, and show my work page below it.

Screenshot of Second Portfolio Landing Page

And if you mouse over my initials...

Gif of Animated Logo on Second Portfolio

You get a smug little froggy smile! 🐸

The other special thing I tried to do for this version of my portfolio was attempt to make a system of terms, prices, and examples for illustration and web design commissions that never really panned out. The system was too complicated because I tried using these tabs that would swap the content on the screen using Javascript and also my own gallery and preview image script.

Gif of Custom jQuery Gallery on Second Portfolio

HomeAll ProjectsCVAboutContactScroll to Top

cozymaus.com © 2014–2020