Create an Animation Portfolio Website on the Cheap!

Now, before you read on let me start with one caveat - I’m not a coder or web developer by any stretch of the word. Some of the things I mention below might be extremely rudimentary to you or maybe there are better solutions - but if you are at all interested in learning to build your own website then some of these just might help you along the way.

I enjoy tinkering around and learning stuff through trial and error. There, I said it. I feel that there is something very valuable about learning how things work by just diving into the deep end of a subject and thrashing your way to the surface. Yeah, it’s difficult, and yes, it can be near impossible sometimes but it’s much more satisfying when you finally get an “Aha!” moment. Perhaps I enjoy this way the most because that is how I generally approached learning animation and most of the artistic topics I’ve learned during my career. You’re probably thinking that I could have just used a website builder like Wix.com or Squarespace; Both of these (plus many other platforms) offer great utility, time savings, and bang for your buck; especially for non-coders. My response? - Where’s the fun in that? I would also say that you can get up and running pretty quickly if you know just the basics of HTML while saving a lot of money along the way PLUS maintaining complete control over your site.

Ok, with that out of the way, I’m assuming you are still interested. Read on!

This very website costs me literally $12 a year to maintain. $1 a month. That’s it. I have complete control over the site from literally any web browser, it’s fast and responsive, secure, and fairly well designed if I do say so myself. (I honestly can’t take the credit for 99.99% of the design but more on that below)

So how do I have this site for only 12 bucks a year? You only need three things:

-a web domain purchased through Google Domains ($12 - there it is)
-a GitHub account (free!)
-a website design template (free!)

That’s it. Three steps:

1) Figure out the domain you’d like and purchase it from Google Domains.
2) Sign up for Github, follow this tutorial, and get your website up and running (Well, the skeleton of it at least).
3) Check out HTML5Up or similar free to use template sites, download the website files, upload them to Github and modify to your hearts content!

Finally, the below list are some fantastic resources that can help you get up and running faster and more effeciently.

Chrome Right Click Inspect

See something online you want to replicate like a fancy toolbar or some crazy css effect? If you use Chrome (and you should), this helps you dissect what’s going on. It’s also a great diagnostic tool for your own work too.

Brackets

Taken directly from the website, “A modern, open source text editor that understands web design.” It changed the way I approached coding and I can’t recommend it enough! It has syntax highlighting (highlighting common code based on categories), live site previews without needing to push you content to Github, and all kinds of helpful workflow stuff. If you use anything I recommend in this post, do yourself a favor and grab this tool.

GitHub

This site was extremely foreign to me as a non developed/coder. GitHub is basically a huge open source sharing/hosting website where anyone can host website, code, tools for other programs, you name it. Anyone can also see the source code, download it, modify it at their leisure, etc. Many, many useful tools have come from here and it’s full of amazing content. It is also a super stable platform which means your website will likely never go down! One caveat though is it only allows for a limited amount of storage space, around 1GB. So if you have a ton of self hosted content, it might not be the best route. That said, if all you want is a site to display your reel, personal information and maybe a simple blog? Then it’s more than enough!

There are a lot of tutorials and YouTube channels online that can help get you up and running. I found this channel from Thomas Bradley to be well done and easy to understand from a novice perspective.

HTML5UP.Net

This site contains a huge list of professionally, optimized and overall A+++ website templates. This is where the site I am using now is from (albeit modified a bunch). Take a look and download one of the templates, you won’t be sorry!

SVG Generator on Github

This tool helps to create and edit .SVG texture backgrounds. I use one on my websites main page. SVG, for the unaware, is a vector graphic format that scales perfectly (as it’s vector based) versus regular bitmap images and it’s super light on file size. Like crazy 2kb size small.

Lity

A super minimal lightbox for all kinds of content, oh and it’s free! One simple CSS and JS file to link, then just add three words of code to whatever you are putting in a lighboxt of. It handles images, video, inline content, all sorts of stuff! It’s minimal and doesn’t have as many fancy features as other free to use lightbox options but that’s why I love it. No extra fluff, just the basics.

Formspree

Making a contact form for a static site? (ie Github Pages or a Jekyll Blog) Then this is the tool you need. Since PHP isn’t something that can be used on a static site, this is going to be a prime candidate to get that contact form working as you want it to. All you basically need is an account, which is free and then copy and paste the code to your site. Send yourself an email once and it’ll verify the website and work from there on out.

Cloudflare

A free content delivery network. This is a bit more of a complex topic than just getting your website up and running but in general it will help optimize your site, provide a free HTTPS secure certificate, analytics, and some other crazy cool features.

Webmetrix

This is a website that helps optimize your site and improve its loading speed and overall functionality. It’s free to use, just type in your website’s address, wait a few moments, and it’ll spit out a couple of reports indicating all the ways your website is being slowed down and where it is working nicely!

Stackoverflow

Probably the best site online to visit when you are having trouble figuring out a piece of code. It’s filled to the brim with amazing people that often give multiple correct ways of tackling a difficult subject.

Have any other resources? Leave a comment below and I’ll check them out and update this page. There are thousands upon thousands of resources out there and it’s likely I am forgetting a bunch.

If you have any questions, I’ll gladly offer some help as well, just drop me a line!

Return To Top