I was very driven to design this website for the hackathon team, as I have previously looked at this team's projects on GitHub. They were all very unique, and I was also astounded by the amount of achievements they have in hackathons.

What it does

In this website, it has all the information a person needs about the "World Hackers" hackathon team. This includes a home page, achievements page, a "meet the team" page, and a page to learn more about the team.

How I built it

For the home page, I decided that the best way to go was with a type-writer animation, which already gives the user a sense of a "hacking" environment. I went with the red and black contrast, solely because of my opinion that it looked good. I debated doing a neon green and black, to look like a normal terminal, but I ultimately decided against it. For the "meet the team" page, I used four equally-sized panel, with the GitHub profile picture of each team member, their name, their "position", so to speak, and a quick sentence about them, which was also based off of the GitHub profile of each of them. For the achievements page, I did not want to pile all of their achievements into one column/table, so I split it into the two years of 2019 and 2020 in which they have participated in Hackathons. When a user clicks one of the achievement text, it will go to the "Learn More" page, as if they are clicking, it is most likely the case that they want to know more about the projects that they submitted/more about the team. Lastly, in the "Learn More" page, I have linked a few of their prominent projects, and their email information at the bottom. Additionally, I added media queries to each page in order to fit the screen for not only PC, but for the tablet and phone

Challenges I ran into

At first, I thought that the design looked too simple. At the same time, I'm into a minimalistic look, and I believe that a website looks polished when it's simple, serves the purpose, and at the same time, has a stylish feel to it. Additionally, I had some trouble with the media queries, but I was able to fix them with my DevTools experimentation.

Accomplishments that I'm proud of

I'm proud of the type-writer animation, and the general look of the website. I also like the "Meet the team" button and page, as I feel that helps the user to get to know the team a bit better.

What I learned

I learned a lot about computer science in general, and HTML/CSS bits. In general, I learned that there are a lot of tweaks that have to be made to certain components, such as text/images to make a website's orientation look perfect.

What's next for World Hackers Website

If the team likes my website design, I hope to publish it, and maybe change the look of it based on the feedback from the judges. Thanks!

Built With

Share this project: