Clackybara: My Click-clack Journey from Idea to Website
Chapter 1: Eureka Moments
For our final project in the Web Development course, we were tasked with creating a functional website utilizing what we had learned throughout the semester, including languages and tools such as HTML, CSS, JavaScript, Sass, and libraries like jQuery.
I asked myself, what kind of website would I want to make? I wanted to create a website about a hobby or topic I am passionate and knowledgeable about, where I could share my interest and potentially inspire others to explore the hobby.
I narrowed down my hobbies, which include biking, running, art, football, reading, keyboards, and gaming. In the end, I chose keyboards. It was the perfect content for my website because I had great sources and lots of information to share. So, keyboards it is!
Then came the title. I still needed a title for my keyboard website. One day, I stumbled upon a capybara in an Instagram reel, and in a eureka moment, the word “ClackyBara” came to mind. I immediately decided that would be the name of my website.
Chapter 2: Research, Research, Research.
I had a concept, a broad idea of what my website would look like, but still no actual content or detailed plans. So, I took inspiration from other websites, such as KBDFans, Glorious, Zion Studios, Drop, Logitech, and even Apple.
Then came the images. I needed captivating, high-quality photos for my website, and websites like Unsplash were very useful for sourcing them. Surprisingly, Reddit, specifically r/customkeyboards, also had some posts with high-quality images that would fit perfectly on my website.
As for the UI/UX of my website, I still had to research. Though I had prior knowledge for good lay outing and graphics designing, it felt somewhat lacking. Upon searching YouTube and stumbled upon a couple of videos which helped me tremendously.
Chapter 3: Planning and Designing
For Planning and Designing, Figma was a game changer, it made the process a lot easier with its tools and plugins which made implementing designs I had in mind easier.
Chapter 4: Coding and Building the website
Development Approach:
The website was built using HTML, CSS, and JavaScript. Sass helped streamline the CSS code. Libraries like Swiper (carousels), Animate on Scroll (AOS), and jQuery simplified development compared to vanilla code.
Design Tools & Resources:
- Tabler Icons provided a comprehensive icon set.
- CSS Gradient Generator aided in creating custom gradients.
- CodePen played a crucial role in developing the “Capybara” typing test section. This section leveraged resources by Miodec for the typing test functionality and Ricardo Oliva Alonso for the keyboard and screen models.
Chapter 4: Deployment
For deploying the website I made a repository for my website uploaded my files, and deployed the website using Vercel.
You can check out my Website at https://bilan-final-website.vercel.app/ !
My GitHub repo is also available here!
That wraps up the initial journey of building Clackybara! The website is live, but the development continues. I’m excited to keep adding new content, features, and resources to make Clackybara the ultimate hub for mechanical keyboard enthusiasts. Stay tuned!
