The Feed: A Satirical Look at My Digital Life
Name: Michael H. Smith
The Feed is a satirical social commentary website that humorously critiques modern internet culture through the lens of an alien abduction narrative. The aliens are dissecting humanity’s digital habits, from social media obsession to targeted ads, and presenting their findings to Earthlings in a quirky, tongue-in-cheek way. This project allowed me to explore and enhance my skills in front-end development, with a specific focus on CSS Flexbox, animations, and integrating JavaScript functionality learned in previous full-stack courses.
The Feed stands as a reflection of my growth as a designer, showcasing not only my web development skills but also my passion for 3D animation, utilizing Cinema 4D (C4D) to bring unique elements to life within the site.
- CSS Animations and Flexbox: The project leans heavily on CSS animations and flexbox layouts to create dynamic interactions and smooth, responsive design elements. Animations, like the marquee scrolling text and floating icons, add a playful touch to the overall experience.
- JavaScript Interactivity: Leveraging knowledge from full-stack development, I included interactive elements like a music player, profile swipe actions (Kiss or Kill), and playful spam pop-ups that enhance user engagement.
- 3D Animation Integration: The project incorporates 3D graphics created in Cinema 4D, bringing visual depth to the site, including an animated UFO on the splash page.
- Responsive Design: Although built primarily for a desktop experience, the project makes initial strides toward responsiveness, including a mobile-friendly layout on smaller screens. However, this is a key area for future improvement.
During this project, I deepened my understanding of CSS Flexbox for layout management and CSS animations for creating interactive, visually engaging elements. I also honed my ability to integrate JavaScript to create dynamic components, such as toggling elements and controlling animations triggered by user interactions.
While I had used JavaScript in previous projects, working with it on the front-end allowed me to apply it in more creative ways. Combining this with my knowledge from back-end development enhanced my confidence in building cohesive, full-featured web applications.
One of the main challenges I encountered was ensuring the site’s responsiveness across different devices. While it looks great on my laptop screen, the design could benefit from more attention to responsive design principles, especially for smaller devices like smartphones and larger desktop monitors. Moving forward, I plan to refine the media queries and layout adjustments to ensure The Feed adapts seamlessly to any screen size.
Another area for improvement would be further optimization of animations and potentially integrating more advanced JavaScript frameworks like React for better maintainability and scalability.
The visual design of The Feed was a central focus. I aimed to create a quirky, alien-inspired aesthetic with custom fonts and a bold color palette. The Martian Mono and Mitashi Classic fonts contribute to the futuristic theme, while the color story of dark purples, greens, and glowing effects help capture the feel of an alien invasion.
The playful animations—such as the marquee text scrolling, spam pop-up animations, and floating icons—create a unique user experience that ties into the theme of digital surveillance and abduction.
- HTML5 and CSS3 for structure and styling.
- JavaScript for interactivity, including toggles, audio controls, and dynamic content manipulation.
- Cinema 4D for creating 3D assets that enhance the visual experience.
- Responsive Design with initial flexbox layouts, though future improvements are planned to ensure seamless responsiveness across all devices.
The Feed represents a culmination of my design and development skills, with strong attention to the quirky narrative, user engagement, and visual aesthetics. I'm proud of how it turned out, especially in showcasing my abilities as both a web developer and a designer. While there's still room for improvement in terms of responsiveness and scalability, the project serves as an important milestone in my journey as a UX/web developer.