Website

Believe it or not, this website was coded from scratch, by me, and is hosted on a raspberry pi in my living room. I utilized bootstrap to make my website look acceptable on any size display. I wanted to learn about networking, so I bought a domain name and started off on my long, long journey to get to this point.

Journey

Idea

I had this novel idea that I wanted a website. I also thought it would be cool to have it hosted on my mineral oil cooled computer, which you can learn more about here. Long story short, I set up a LAMP server to handle the hosting and bought a domain at Namecheap. It all worked relatively well, other than some overheating problems I had with the computer. That said, the website I put up was far from perfect, and more an inside joke with my friends. If you want to see it, go here, but do yourself a favor and don't click the link. About a year later, I saw that having my own website could be a great way to market my skills to employers. I took that opportunity to revamp my website and make it something that I could be proud of.

Hardware

Bringing my website to a new level took more than just software. Although adequate for occasional use, the now 10 year old Dell tower was not in the greatest of shape. So I went with the next best thing, a Raspberry Pi. I began by setting up Raspbian with NGINX. I used this very helpful guide for reference. I chose to use NGINX instead of APACHE because of its focus on doing the most with minimal hardware like the raspberry pi.

Programming

Although hardware was needed for the project, the main aspect of revamping my site was on the software side. Namely where to begin. I started by looking at well designed websites. I found a few that I liked the look of. This and this were my favorites and the main ones I based my design off of. I also had heard of Bootstrap from a friend and decided to give it a try as well. From a mixture of trial and error, as well as sample code, I was able to make my template. With the template, I began to add content like the page you are reading right now. Overall, the design process was a fun and frustrating experience that I had never had before.

Features

Navbar

It just completes the look. I chose to put my logo on the bar, so wherever you go on the page, you can see it. At first I settled on a navbar that started lower on the page and stuck to the top as you scrolled past. I didn't like this design because it only looked good on my home page which had the nice header with my picture. I changed it to the static-top-bar so it could be consistent on every page, despite not having much functionality.

Project Pages

For these, I didn't just want to have a list of centered pictures with links. I got the idea to do a tile design from one of the websites I linked to above.

Footer

At first I contemplated putting my contact info on a section on the home page, but decided to put it in the footer so it would be on every page and easier to find. The copyright was a nice touch too.

Theme

For the theme, I chose neutral colors mainly because they never look bad. Light and dark grey look much better than white and black, and have a little more class than a bunch of random colors. I chose to center everything in a small column because otherwise the page starts to feel crowded and unprofessional.

Conclusion

The final product is what you see here and now. Hackerlife.tech is a constantly changing and evolving thing as it was since I began the project. I hope to come back to this project multiple times in my life to test out the new skills I have gained. But this is where it stands: a portfolio for my greatest achievements in tech.