HAkron websites

2016-2018

View the source code for HAkron 3000, HAkron 2.0, or HAkron 1

How it started

The first HAkron hackathon website was the first website I had ever made, and it definitely shows. My sophomore year of college (spring 2017), while helping start this awesome club on campus, I decided to be the one to tackle building and maintaining the event website.

I planned to help develop a website and registration system earlier that year for a 12 hour hackathon-like event in collaboration with a neighboring school, but we ended up just throwing some info on eventbrite and calling it a day.

This first official HAkron event, we outsourced the creation of our main logo, so I had to create a styled website based around it. Don't ask me why I thought a gold gradient was the best way to do that. I think I was going for the look of a light turning on, from the finger pressing the power button on the logo. Luckily this site isn't live anymore, as it was basically my sandbox for anything I wanted to play around with while learning HTML/CSS. If you're really curious, you can download this code and look at the whole thing for yourself.

I was really proud of this website in the moment, and for a first website it honeslty could have been a lot worse. I put a solid amount of effort into thinking about how it should look, how it should work, what the best layout was, etc. I'll probably look back at this current HAkron 3000 site how I look at this first one though. Progress is progress!

I had a lot more to do with the logo design / signage of the second hackathon (fall 2017). That main HAkron 2.0 logo was the first thing I made in Illustrator, and spent probably ~2 hours making it, taking heavy inspiration from google searches of 70s wallpapers and posters.

It's cool because you can see the progress I made in web development just looking through the code itself. All of these websites were based off some kind of Bootstrap template, but the amount of elements I changed from that template increased every hackathon. Everyone really seemed to like the design and color of this website, and I agree. I took time to make it look good and have a pleasing / fitting color scheme (this is how I stumbled across coolors.co).

For the third event (fall 2018), I made 100% of the logos and design. This time I put a LOT of effort into finding fonts, choosing a color scheme, and making the website really cohesive. I even made a pretty unofficial style guide! I was, and still am very proud with how this design came out.

We were obviously going for a space theme, so there's cool planets and moons and stars everywhere. At the event itself, we gave away prizes like dehydrated space food and space shuttle lego sets, which was also a nice touch.

Making these websites is what gave me the basis to be comfortable to whip up this site from scratch, which I talk about in its own post.

How it works

Like I mentioned before, all of these websites are just heavy modifications of Bootstrap templates, since making a website completely from scratch would have been a little overkill for the end goal. For the third website, I know I used a variation of the Maxim template specifically.

As for hosting, the first two were through Digital Ocean, and the third is currently being hosted on AWS using free student credit. The domain was bought and is still currently managed through Namecheap I believe.

Cloudflare has also been a GODSEND this time around, and I'm very upset that I just found out about it for this event.

Specifical cool elements of the website were inspired from posts on Codepen, like the main Devpost button hover animation, and the character flipping queue thing that says "DESIGNERS" in the screenshot above.

Conclusions

I am still a LONG way from being able to make an effective website for other applications. These hackathon websites are just landing pages and have little functionality. To really dive into web dev, I'll have to make some kind of store website, or just one with more interactive functionality than links to other pages.

Either way, I now have a pretty good base of understanding to build off of, and I can thank HAkron for that. Not to mention I can also work my way around designing a logo now ;)