Blog by Liz Lorena

About


Hey! I'm Liz Lorena. I'm a May 2019 ITI program graduate from Rutgers University who makes websites and aspires to be a game developer. This is my blog about art, programming, and working on the Web. I have a YouTube channel and also plans for a WordPress theme store and some small games. You can find more information about me here.

I started this blog and my YouTube channel because one of my creative outlets is writing, and I wanted my own little spot on the Web where I can share with others the things I have learned in web and game development and my thoughts on other topics. Posts and videos on this blog are not sponsored unless otherwise stated in the post or video. There are no ads on this site, but my YouTube channel may run ads at some point in the future. I'm transparent about my affiliate/referral codes and links.

Contact Me

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.

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 SiteSource 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 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.

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 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:

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:

Software:

Images:

  • Screenshots and Gifs from my websites

Hey! I'm Liz Lorena. I'm an ITI major who makes websites and aspires to be a game developer. This is my blog about art, programming, and working on the Web. I have a YouTube channel and also plans for a WordPress theme store and some small games. You can find more information about me and this blog here, including how to contact me!


Search Site

Archives

Blog Stats

The Blog by Liz Lorena has 26 posts. It was started on 28 July 2018, and the latest post was on 14 October 2019. The website was last updated 29 January 2020.

Support Me

If you enjoy my content, please consider hiring me to make your website!

About


Hey! I'm Liz Lorena. I'm a May 2019 ITI program graduate from Rutgers University who makes websites and aspires to be a game developer. This is my blog about art, programming, and working on the Web. I have a YouTube channel and also plans for a WordPress theme store and some small games. You can find more information about me here.

I started this blog and my YouTube channel because one of my creative outlets is writing, and I wanted my own little spot on the Web where I can share with others the things I have learned in web and game development and my thoughts on other topics. Posts and videos on this blog are not sponsored unless otherwise stated in the post or video. There are no ads on this site, but my YouTube channel may run ads at some point in the future. I'm transparent about my affiliate/referral codes and links.

Contact Me