My Portfolio Site Journey - Early Github Days
Published 12 September 2018 in websites
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
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 here. 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.
Here's a screenshot of the whole site using the FireShot FireFox extension:
Version 2.3.0 - Late 2017
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:
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! 🐸
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!
- 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)
- Screenshots and Gifs from my websites