Welcome to part 2 of my portfolio site journey! It sure took a while to get this one out. I had some other blog posts I wanted to write, and college just started up again for me. This part focuses on the first half of my Github days when I finally started making my portfolio sites using code.

The Github Days

Eventually I got tired with the limited customizeability I got out of using WordPress because the learning curve was too steep for me at this point. During my advanced web design course, I learned about Bootstrap and their grid layout system, so I felt way more able to make something from scratch. I also learned how to use Github Pages thanks to my object oriented programming course, which allowed me to host and run my site live for free. I ditched the paid hosting plans and bought my own domains from Namecheap and proceeded to practice my raw HTML skills more. My designs slowly got better and better with practice, thinking about what I wanted, and studying others' portfolio sites.

Version 2.1.0 - Mid 2017

I think this is the earliest screenshot I have from my early attempts at making a website with a proper design from scratch. I tried to go with a minimalist modern design with lots of white space again, but I wasn't happy with the loose and sloppy way the pages behaved. In retrospect, the index page does look pretty cool, and if I only still had the source code I would share it with you over on my Github. In fact, I may try to remake it sometime. I do recall that I used bootstrap to center the elements on the page and make the buttons, so this places this design somewhere in mid to late 2017.

Version 2.2.0 - Late 2017

Visit Site • Source Code

My first stable portfolio site was made thanks to the work of Tania Rascia, a web developer who makes extremely useful tutorials for web development and design. This particular theme was made available by her for free on Github. She has a Patreon, so you can support her there!

This theme is a trendy one page theme that looks fabulous on mobile with its sliding menu. Because at this point I was learning about the importance of responsiveness in modern web design, I took apart and reassembled this code with some modifications to learn further. Its simplicity makes it best for a resume-style personal website.

With this theme I got to experiment with a little bit of Javascript and jQuery, making my project descriptions toggle on and off. I actually started making tons of progress GIFs at this point with ScreenToGif, and it's thanks to that that I'm able to recover bits of my progress to make this blog!

Here's a screenshot of the whole site using the FireShot FireFox extension:

Version 2.3.0 - Late 2017

Visit Site • Source 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:

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.

And if you mouse over my initials...

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.

Conclusion

In the span of only a year I went from knowing only the basics of HTML and CSS and playing around on WordPress to making my own websites from scratch. The process wasn't easy, and my designs weren't great, but it was definitely a fun learning experience. I'm happy I devoted some of my free time to make stuff like this. I soon realized that no matter what stage you are in your life, it's never too late to learn something completely new. In a few months after this period, I would learn even more and create some designs that I was more satisfied with and use some software that made my code more efficient and less bloated. But, I will be covering that in the next blog post. (Come on, I have to make this material last, right?) Stay tuned 'til then!

Resources

Inspirations:

• Example Portfolio Resume by Tania Rascia (her Patreon)
• Arial Beninca's Portfolio

Software:

• Github Pages by Github (free static website host)
• FireShot webpage screenshot browser extension by Susbox (FireFox and Google Chrome)
• ScreenToGif (easy screen-captured GIFs)
• Namecheap (cheap domains and hosting)
• Bootstrap (great mobile-first CSS framework with an awesome and easy grid layout system)

Images:

• Screenshots and Gifs from my websites