ApplePieGiraffe

Hello, everybody! 👋

I finally completed another challenge! 🎉 I know it's been a while, but I'm happy to submit another solution after taking a little break. 😆

This was a short, simple challenge that I created with Svelte. Svelte is such a joy to use and it worked out really well with GSAP (which I used to add the animations to the site). I also used ScrollTrigger and smooth-scrollbar to enhance the animation and scrolling experience just a bit! 😀

And for a tiny surprise—scroll past the hero section and back again to toggle the avatars of some of your favorite Frontend Mentors! 😆

Of course, feedback is welcome and appreciated! 😊 Do let me know of any issues you find (since I'm afraid I'm bound to have missed something somewhere)! 😅

Oh, yes, and click on the giraffe for the attribution. 😉

Happy coding! 😁

Hello, everybody! 👋

This is my 30th solution on Frontend Mentor! 🎉 (And my first Guru level challenge submission.) 😎 This was definitely a tricky challenge, but I got to learn and try out many new things! 😀

I used React and Next.js to build the site, styled-components to style it, Formik (and Yup) to handle the forms in this challenge, and Framer Motion to add some page transitions and animations. 😄

There were quite a few things I had to learn in order to complete this challenge, and I'm not sure if I did them all correctly. 😥 Looking back, there are a few things I wish I would have differently, but it's a learning experience! 🙂

If anyone could share some resources on how to manage and organize larger projects like this, I'd really appreciate it! 👍 Lots of resources that I find only focus on specific things (like creating a popup or using certain features of a tool) and not so much how to approach and think about an entire app. 🙃

If you'd like to learn more about my project, see the README in my Git repo (where I also list a few quirks in my solution).

Feedback welcome and appreciated! 😊

Happy coding! 😁

BTW, click on the sidebar avatar for the attribution.

Hello, everyone! 👋

This is my first challenge with React and as usual, I learned a lot! 😆

At first, I was pretty confused about how to organize the files in my project and I'm still unsure if my React is very clean in some places (since I just began learning React). My Sass turned out to be, well, kind of messy (and I'll keep in mind to use a better file structure next time because I simply created separate files for my components for this project). 😅

On the bright side, I created this pretty sweet hover effect for the cards in the "Creations" section from scratch, and I quite like it. 😊

Any feedback (especially on React) is welcome and appreciated! 😀

Happy coding! 😄

Yeah, kind-of-almost pixel-perfect—some of the text is slightly misaligned and the progress bar in the hero image is rotated the opposite way in my solution, for some reason. 😅

Anyway, this was such a beautiful design and I learned a lot from creating it! I ended up having to use Sapper and to learn about things like routing and server-side rendering—which spun around my head a little, but I'm hanging in there! 😄

I added some pretty micro-interactions to the buttons and the form as an extra touch! 😉

Of course, feedback is both welcome and appreciated. 😊

And as usual, keep on coding (and happy coding, too)! 😁

BTW, one quirk I'm aware of is that the countdown timer resets when you go back-and-forth between the home and signup pages.

Hey, everybody! 👋

This was a fun little challenge! I used Svelte again and it makes things so much easier—component-scoped styles are like the greatest invention since sliced bread! 😂

I added an intro animation (for the tablet/desktop layout of the site) with GSAP and the little attribution popup. I also just went with the browser form validation for this one. 😀

Feedback welcome and appreciated, of course! 😊

Happy coding! 😁

Hey, everybody! 👋

This was an awesome challenge that I enjoyed and in which I learned a lot! I used Svelte.js for the first time and it was pretty amazing. Svelte's features made it a lot easier to create a todo app like this and it was a lot of fun to learn! 👍

I added some transitions to make the actions smoother and a Christmas theme 🎄 (because it's drawing near to that special time of year) and used local storage to store the state of the to-do list and the most recently used theme. 😊

There are a few quirks that I'm aware of—the order of the items in the to-do list isn't saved in local storage if they are changed via drag-and-drop and there is no transition for the "Clear Completed" action because of the way I passed data around in my Svelte files. I almost wish I could redo this challenge and do a few things differently (such as make my code less ugly), but... IDK. 😅

Feedback is welcome and appreciated (I really hope everything works okay)! 😀

Happy coding (and happy holidays, too 🎅)! 😁