By
@adwitha
A blog website focused on making the reading experience both fun and more approachable by making it heavily interactable and visual focused
The Pixel Corner is an interactive blog website that discusses the design and development of entertainment in a way that makes it fun. I built this website because I found that reading huge walls of text with an image or two sprinkled in here and there wasn’t keeping me engaged or helping me grasp what I was reading. To fix that issue, The Pixel Corner introduces articles that feel alive. There are many interactive elements to solidify understanding of the reading, and the article’s look and feel change as the reader moves through different sections. I feel that this helps the reader understand the material much better and also enjoy their experience reading through it. Through this project, I’ve learned a lot about JavaScript DOM manipulation to make many of the interactive elements work, and also dynamic element creation using JavaScript to make new HTML. I also got much better at styling elements with CSS, as there was a ton of custom styling that went into making this webpage look the way it is. This isn’t a complete project as I plan to make more articles over time, but what is currently present is fully functional. Please provide any feedback on what you didn’t like or what improvements you would like to see. I hope you enjoy the article!
9h 12m 36s logged
For this devlog, I was only planning to have the article done, but I ended up finishing both the homepage and the article as I was enjoying designing them!
Personally, I’ve always found it hard to really understand and retain the information I read from a wall of text, so I wanted to take the opportunity to bring to life how I wish all blogs and articles would look and feel. I’ve always loved interactive websites that let you interact with the items the article discusses, as they’ve always helped me understand the concept better. I’m also very passionate about JoJo’s Bizarre Adventure (It is my favorite anime lol), so I took this opportunity to use it to explain how I think a great power system is built. I’ve included all kinda of interactive activities throughout the article, like a cool animation of how Hamon works.
I made this section interactive by making a Hamon observer that checks if the reader has scrolled to the div of “hamon-section” and creates the sun-like overlay shown in the second image below. Once the button saying begin breathing is pressed, the CSS for the glow effect around the GIF is set to opacity 1 from 0, there is a flash of white, and the GIF is switched to the Hamon-activated one after a few seconds’ delay.
I also made a stand card section where the user can use a stand arrow on themselves and choose a stand from the provided options, a section where the reader gets asked about when a “useless” seeming power could be useful, and a section where the user gets to build their own power and give it a limitation which the website will then provide a comment on. All of these were achieved through using JavaScript DOM manipulation by hiding and making elements appear, as well as applying CSS to them. Furthermore, for the section where the user gets to choose a stand, I used dynamic element creation in JavaScript to make new HTML elements in the JavaScript itself.
I learned many new things through this project. I learned how to make effects that appear as the user gradually scrolls through the page, and pretty much everything about mouse hover effects lol. I also feel like I have gotten a good understanding of how to have a cohesive design language that sticks throughout the home page and article to provide a professional user experience. This project also allowed me to get practice with JavaScript DOM manipulation, as I have used it extensively in the stands sections and also at the end.
The theme of this website is like a starry night sky, but if it were from a retro video game. The reason I thought of this is that I wanted to have a theme of retro sprites and pixel art in all the articles I write, as I think it supports the “Pixel Corner” name of the website. The colorway of the website was actually inspired by JoJo lol, as I felt like the colorway looked great after designing the article, and I decided to make that the core colors and theme of the site itself. I also took full advantage of hover effects everywhere to give the website a more lively feeling than just a static page.
I am very glad that I took on this project, as I have learned valuable skills and really enjoyed designing this blog website. I enjoyed it so much that I plan to continue making more blogs and officially launch this website soon! I think it could be really cool to launch this website and add to it with more fun and interactive articles that make people want to engage with reading a blog article rather than shy away from a wall of text!
3h 11m 55s logged
I’m creating a blog page focused on visual effects and interactivity to make reading more approachable and fun. So far, I have set up a simple main page and written the first article in simple HTML. This blog is about how to make a great power system, using JoJo’s Bizarre Adventure’s power system to discuss what makes one. I plan to heavily stylize the page for each section, add a little minigame near the end, and add many interactable buttons and objects throughout the blog.
The goal of this blog website is to talk about the creation of entertainment and how to make it the best it can be. I plan to add more and more posts over time and deploy the website. By the next devlog, my goal is to complete the styling and interactivity of the blog I’ve written and also
