Skip to content

thounny/30-day-code-challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🏆 Daily Code Challenge Showcase

Welcome to my Daily Code Challenge Showcase! This website is a curated directory of my 30-day coding journey, presenting a range of interactive and creative projects built to demonstrate my development skills, problem-solving capabilities, and attention to detail in UI and animation design. Each project link includes a visual preview, allowing visitors to explore the essence of each challenge.

🌟 Project Overview

This project serves as a showcase for my daily coding challenge, where I worked on a new concept or component each day for 30 days. Built with accessibility and smooth interactivity in mind, this site provides:

  • 🖼️ Centralized Gallery of clickable project links, each leading to its corresponding GitHub page or live demo.
  • Interactive Hover Effects powered by GSAP animations to deliver a dynamic, engaging user experience.
  • 🎨 Project previews that pop and smoothly transition as you navigate through the challenge list.

🔑 Key Features

  • 🎥 Project Previews on Hover: Each challenge link has a unique preview image that appears on hover, giving users a glimpse of the project.
  • 🔠 Letter-Based Animation: Project links are animated at the letter level for added interactivity and polish.
  • 💫 Fluid Transitions: Moving between links triggers smooth transitions for the preview card, enhancing user engagement.
  • 📱 Responsive Design: The showcase is designed to be accessible across devices, ensuring a consistent experience on desktop, tablet, and mobile.

💻 Technologies Used

  • 🖥️ HTML, CSS: Structure and styling, with a minimalist, polished aesthetic.
  • 🟩 GSAP (GreenSock Animation Platform): Animations for smooth transitions, hover effects, and dynamic elements.
  • 🟨 JavaScript: Core functionality for project previews and interactive features.

🚀 Usage

Feel free to explore each link in the challenge list:

  1. 👀 Hover over each link to view a preview of the project.
  2. 🔗 Click any link to be directed to the live demo or GitHub page of that day’s project.
  3. 🎉 Enjoy the fluid transitions and engaging animations as you explore!

🎯 Why This Project Matters

This website is more than a directory; it’s a testament to my dedication to daily practice, creativity, and growth as a developer. By combining technical skills with design sensibility, I’ve crafted a showcase that not only highlights my projects but also aims to inspire others to pursue their passions and reach for excellence in their fields. Each project reflects my commitment to continuous learning and innovation, and I’m excited to share this journey with you all. Thank you for exploring my work!!! I hope it motivates you as much as it has driven me to improve every day.

🛠️ Installation & Setup (Optional)

If you’d like to view or modify this project locally:

  1. Clone the repository:
    git clone https://github.com/thounny/30-day-code-challenge.git
  2. Navigate to the project directory and open index.html in your browser.

🤝 Connect with Me

I’m always interested in connecting with fellow developers, designers, and creative professionals. Feel free to reach out on LinkedIn or check out my other projects on GitHub.

👤 Author

Logo

Thounny Keo
Creative Developer & Designer
Frontend Development Student | Year Up United


Miku