Hope you're having a great time working on Frontend Mentor challenges :)
I'm finally back with another lovely challenge that I had a blast working on, though it took me quite a while to finish it for reasons that you'll discover once you see the website and its Github repo :D
Frankly, I still wanted to try out a few more ideas, but at the same time, I had pretty much implemented all the features/customizations I wanted for this project.
Feel free to check it out and let me know what you think works / doesn't work for this project and where I could make further improvements/tweaks! :)
P.S: Thank you, to each one of you who checked out my previous challenge (QR Code Generator) and supported me. I appreciate it a lot and I hope these kinds of projects will also inspire you to try out your own unique and creative ideas! :D
See you in the next challenge - happy coding, y'all! :)
This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D
Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.
From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)
There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!
Here are the technologies / tools I've used for it:
- QR API
Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!
Thanks a lot for checking out my project and see you in the next challenge!
Hey guys! Hope you're having a great time here on Frontend Mentor!
I'm back with another awesome Frontend Mentor challenge - the Project Tracking Intro Component.
I always enjoy building these projects, but I enjoyed building this one even more because it was the first project in which I've used Svelte, Typescript, SCSS, GSAP, and Vite all in one place. All I can say is that I'm in awe at how fast the development has become thanks to Vite and it's really a powerful match coupled with Svelte.
Since most of the project was mainly focused on the design and not any heavy data structures/logic, I'm naturally interested in the feedback regarding the SCSS I wrote for this project and what improvements I could make for the responsive design. I struggled in those regards mainly because of the background shape and devices illustration.
Let me know what you guys think about the project.
Thanks for taking the time to check out my project and see you in the next challenge! :)
I decided I should work on my CSS Grid skills a bit more and this challenge was the perfect use-case for it.
This project has a lot of technologies in it:
The AJV and Typescript weren't required for such a project, but I decided I should finally work with Typescript and learn how to implement it in an actual project. I only started learning it two days ago, so I'm definitely eager to hear more about the best practices for this.
Also, there's an issue caused probably by the clip-path property that I'm using with GSAP. The two box shadows I used on the third and last card don't show anymore. If you know a fix to this issue, please let me know.
Hope to hear your feedback soon - thanks a lot! ;)
I'm back with another lovely Frontend Mentor challenge. This is the last Newbiew challenge on my list and I decided to give it my best shot in building it.
If you're checking out the solution on a laptop / desktop screen, you'll get to see the scroll-based animation that I've implemented. I got the idea for the animations after seeing @ApplePieGiraffe's solution for this challenge. (obviously his solution is much better than mine :D) He's truly an incredible developer and his work has inspired me a lot. If you haven't checked out his work yet, I highly recommend you do.
I had a lot of fun building this project using Svelte and GSAP, even though it was quite difficult at times because it was my first time using GSAP on such a scale and also, it was my first using the ScrollTrigger plugin. You can imagine how many hours I've spent going through the documentation and watching tutorials ;)
The animations aren't yet available on the smaller screen sizes because the layout becomes quite messy. I'll need to see how to fix that. On top of that, I think the code for the GSAP animations can be improved, but since I'm still a beginner with this technology, I'm not quite sure how to approach it.
Any feedback about this or any other aspects of my project would be much appreciated.
Thanks for checking out my solution. See you in the next challenge! :)