Been a long, long time since i last completed a frontend mentor challenge, this time i tried using svelte instead of react and i gotta say, i absolutely loved it! Definently will start learning it. About the solution, i hope it looks fine, any feedback or good resources for learning svelte are welcome! ;)
fantastic work. I love the Svelte + Tailwind combo, I also used that. Great job with the store and all the details, I took a lot from your code. Only nitpick I find is that the order confirmation modal flickers to the top of the screen when you close it but that's all. Thanks for sharing!
First time with vue.js
Nice job, super clean code. It doesn't look like you did the responsive part of the design.
I had some styling issues since with focus controls, there's still a little radio button appearing on firefox even with putting appearance-none, so I used buttons with role radio instead, which is kinda bad. Even tho the clock type thing to switch from pomodoro to short break, etc. is still using radio because I'm too lazy to change that.
This is awesome, great job with the timer circle and adding the multiple languages. I want to learn Astro. The tech is really well done, my only comments are on the layout. I have a tall screen so the elements are very far apart on it, maybe have them closer together? Maybe show the default timers instead of 0:00 display before they start? Amazing work!!
I had a tough time getting the masonry layout to work well. Libraries didn't quite do the design justice, nor did various CSS Grid-based workarounds. There were a couple of other CSS-only solutions that could maybe have worked, but felt hackier than what I ended up with. The main problem with my solution is tab order--it goes down each column rather than left-right through the "rows".
Getting the transitions to run correctly when moving forward/backward through the "slides" was a challenge, but overall, working with animations/transitions in Svelte is really nice.
The site is prerendered and (I think) totally usable without JavaScript enabled
*** oops just saw you did this one two years ago lol ***
Heyyy! I knew right away you used Svelte, very nice site and clean, smooth transitions. You nailed the gallery image load transition.
For your slideshow, I have a solution for the wonky 'two elements in the DOM at once' issue that forces vertical space and makes your page flicker. Here's a REPL example: https://svelte.dev/playground/92647d0aa8d94aae84e70e374405233d?version=5.1.9
Keep it up!
Nice job using Svelte and Tailwind, I think those are the libraries of the future, good to get fluent in them. I noticed the images didn't load on your live site and I have the same issue. What I do is after the first push to Github, I'll go into my Github files and replace the images in my code with the raw image link (like https://github.com/35degrees/space-fem/blob/main/src/lib/assets/home/background-home-tablet.jpg?raw=true) and it works. Annoying extra step but it does the job. You have some mobile size layout overlap when the screen size is too small and the elements overlap, Tailwind has some great resources for that.
I'm proud that I used anchor positioning for the first time (using it on the mobile hamburger menu). I strengthened my a11y code with strong use of semantic headers.
What challenges did you encounter, and how did you overcome them?ensured the page was SR friendly
Very helpful feedback, I appreciate the insight and support!
I wasn't that excited about using Tailwind but I'm so glad I did. It's a clean, efficient and sometimes fun way to write code. It makes container sizes so easy.
What challenges did you encounter, and how did you overcome them?Getting animations right was challenging but I like a few that I came up with, like the FAQ dropdown.
What specific areas of your project would you like help with?Any feedback is welcome to improve my skills.
I appreciate the feedback! Your detailed review is helpful to my development, I will look into these issues.
Wow, really nice site! The animations are cool like the rotating arrow in FAQ. Your code is very clean and you seem very comfortable and efficient with Tailwind. The desktop width goes really large, out to 2000+ px so maybe you could put a max desktop width on it, but I can't find any feedback outside of that, very impressive.
Nice job with the mobile menu overlay and making it the perfect desktop size. Maybe set the desktop and mobile elements to a fixed width? The layout gets jumbled on smaller sizes with some elements overlapping text, making it hard to read.
I can't see your layout, looks like your Netlify link is down. In your code, I like how you separate media queries into their own folder and your accessibility and syntax header structure looks organized.
I've used BEM methodology on this project and would like to know if I applied it correctly.
Since it's a small project, I didn't use Modifiers just to change colors, should I?
Your BEM looks good. I didn't use any modifiers on this project either. I guess it could have been added to the hovered eye image but I prefer to add that in CSS so I'm not sure. The one thing you should add to your CSS that I see is variables for colors. Nice job!
