Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thounny/30-day-code-challenge
Showcase directory for my 30-day Daily Code Challenge
https://github.com/thounny/30-day-code-challenge
30dayscodechallenge 30daysofcode css dailycodechallenge dailyprogrammer gsap html javascript scrolltrigger yearup yearupunited
Last synced: 5 days ago
JSON representation
Showcase directory for my 30-day Daily Code Challenge
- Host: GitHub
- URL: https://github.com/thounny/30-day-code-challenge
- Owner: thounny
- Created: 2024-10-30T18:41:56.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-30T18:58:05.000Z (about 2 months ago)
- Last Synced: 2024-10-30T19:33:19.803Z (about 2 months ago)
- Topics: 30dayscodechallenge, 30daysofcode, css, dailycodechallenge, dailyprogrammer, gsap, html, javascript, scrolltrigger, yearup, yearupunited
- Language: HTML
- Homepage: https://thounny.github.io/30-day-code-challenge/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏆 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:
```bash
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](https://www.linkedin.com/in/thounny/) or check out my other projects on [GitHub](https://github.com/thounny).
## 👤 Author
**Thounny Keo**
Creative Developer & Designer
Frontend Development Student | Year Up United
---
