New Portfolio Entry -

A personal project that is an ongoing process. My new website, is a portal to a gaming server. I host it off a Linux server I build running an i3-8700 intel processor that has good single core processing speed for the price. The purpose is to host an online real-time map of the game world that I am running, have a point of contact for server issues, as well as disseminate the server address to the public.

mojosquirrel image homepage

A hurdle that I came across when making this website is that a :hover class that works on a computer will not work the same way for a mobile device. So my dropdown menu would not work on a phone. To get around this I used the code below:


When adding the "onclick" attribute to an interactive div, the div becomes clickable on mobile devices while still retaining the :hover functionality in a normal web browser.


New Portfolio Entry -

I have completed version 1.0 of a website for a local business and put it online via Amazon Web Services. It was an interesting challenge working with a client. There was a lot of coordination needed in figuring out what the client wanted and what I could actually do in the timeframe provided. The outcome of this process:

Reformsiding image homepage

One thing that I learned from creating this website was the fact that a website viewed on a mobile device will not automatically format to the smaller size created by the @media tag in the CSS file. What I had to do instead was use a meta tag which changed the dimensions of the website based on the device that is viewing it.

meta name="viewport" content="width=device-width, initial-scale=1"

Adding the above code to the header of the webpages solved the scaling issue I was having with mobile devices.


Cool Code - Show More JQuery:

I added a "show more" button in my blog. It uses JQuery to remove a class I add to posts that I do not want to show initially when the page loads. I decided to do this early so the website looks more streamlined and doesn't eventually become an endless scrolling main-page where the user gets lost.

   $("#showMore").on("click", function() {
   var hiddenDivs = $('div.hidden');
   if (hiddenDivs.length > 0)

This is a cool feature of javascript and JQuery because I am able to actively change the CSS of a webpage while navigating the webpage.


Tool - Adobe XD:

Adobe XD is a cool free tool for making templates for web design. It is very easy to use and is a great prototyping tool for figuring out what a certain website design will look like in different formats. You can even link boxes on one template to act as a button to move to another template in order to simulate how a website would actually work in the real world. This only think I don't like about it is you still have to write out the HTML and CSS in order to actually make the website a reality (life can't be too easy). However, it is a great free-tool to make images and logos to put into the website later.

example template

Example template made in Adobe XD.