Re-Upload (original date: 11/11/2021)
I went off my schedule for about 2 weeks and have been
working on finishing my website instead. I felt like it was reasonable
to
delay my regular routine a bit to get my site up and
ready to present.
I was primarily just trying to recreate the portfolio
site I made during my Associate’s Degree. This site was originally made
using the GUI website builder, Wix (https://www.wix.com/).
I think this is a reasonable tool,
especially to present to a generalized group of game
design students who aren’t necessarily all interested in learning much
programming (though I do personally think all game
design students benefit greatly from learning programming - how else
would a
designer or artist know what is practically feasible to
implement in a video game - but that is a separate topic). However, Wix
forces you to use their given domain name
(‘username’.wixsite.com), as well as having a banner advertising Wix
across the top, or
pay them a monthly subscription to upgrade your account
and allow you to use your own domain with their service. So, I had three
main reasons to build my own site, rather than
continuing to use my Wix set:
1. The domain name/banner was unprofessional, and to
change it to my own domain, I’d have to pay more than I would like. I
had
already done some HTML in high school and knew it’d be
worth it to set it up on my own rather than pay for the service
2. I wanted to have more experience with Web Design/HTML/CSS and to be able to advertise that skill on my portfolio
3. I would have more direct control over my website, rather than using the preset paradigms given by Wix
I purchased a domain quite some time ago. I then spent
some time looking into hosting. I fiddled with Apache for a bit, using
an IP provided by my ISP, but after troubleshooting with
Apache for awhile, I ended up just using GitHub Pages to host my
website.
This ended up working pretty well for me as I had
already started to use GitHub to backup my projects anyway.
I then started to recreate my website using HTML and
CSS. I haven’t used any JavaScript here, yet, managing to get all I
wanted
done just with CSS. There are some points where I’d like
to try implementing some JS in the future, perhaps for showing images
in
a slide-show format.
I learned a lot throughout this process and really
enjoyed it. Each page basically had a new challenge for me. The major
ones
were, using iframes to embed pdfs/video so that they are
readable on most browsers, centering div containers and making columned
image sets, and the bloghome page was a good design
challenge as well. A major point was, optimizing for mobile. I thought I
may
have to use JS to detect what device is being used, but I
ended up using the @media{} tag. This effectively works like an
if-statement, detecting what sort of media the page is
being displayed on and running the CSS within the braces. So, I checked
if
it was displayed on a screen with a viewport width of
under 1000px and if it was in portrait mode and, if so, the CSS would be
changed to accommodate, generally increasing the size of
elements so they could be more visible. If a mobile device is held
landscape though, it just loads the default CSS.
This has been a very productive, fun, and informative project. Thanks for reading about it.