All solutions

What are you most proud of, and what would you do differently next time?

Learning the SVG path element to a degree where I could create my own (basic) wave animations. I added some UI effects with a draggable progress bar and button clicks that causes a 'loading state' as it recalculates/mimics a call to a server. Not exactly meaningful but just to spruce up the UX a bit. The JS/rendering effects could be cleaned up a bit.

What challenges did you encounter, and how did you overcome them?

Creating a wave animation that didn't 'break' due to 'poor' coordinate values and making the CSS shooting stars animation look even close to worth keeping. Studying others efforts and playing around with some good ol elegant trial and error.

What specific areas of your project would you like help with?

Nothing that comes to mind but I always welcome any feedback or suggestions on things. 🙂

Wanted to refresh myself a bit with Vue. Good exercise for it. Nothing too complex but enough going on to make use of Vue's store manager and update components/UI accordingly. Implemented a basic little carousel effect to create a scrolling space background. Not perfect but somewhat pleased with its result. I also added a UI effect to the navbar/header by injecting the selected planets assigned color. Actually thats one instance Im not thrilled about as there is a fair amount of redundant(ish) CSS in creating these unique classes and I'd imagine something like SASS would have allowed me create something a bit more dynamically. Feedback and suggestions welcomed! 🙂

Took more of a styling cue from the more recent social media links card challenge and added a mock navbar header. Formatted the notifications into a json file and rendered the items via JS and some html templating that I tried to keep as clean as possible but with added skeleton loader fx and unread notification styling it got a little ugly in the one function. Feedback and suggestions welcomed!

Just a little more playing around with the skeleton loaders concept. Added a online/offline button that communicates a status to localStorage so if the page is loaded while status is 'offline' then nothing will load until the user toggles the service back to an on state, to which the browser can 'fetch its data' and populate the card. Feedback and suggestions welcomed!

Kind of stumbled onto skeleton-loaders and thought this would be a fun project to (overly) implement them in. The first render uses the provided data and afterwards upon a refreshing, artificial values are generated with a mock server/loading time behavior. Doesn't make a whole lot of sense beyond just practicing with the loaders. lol. Certainly keeping the event-loop?? busy with a bunch of setTimeouts but think they all stay orderly enough in their behavior. Also added some counting and hover effects for additional UX. Suggestions and feedback welcomed!

Fun design. Good opportunity to try play around with some CSS effects. I added a dark/light theme switch and used <code>localStorage</code> to save users selection. Feedback, suggestions welcomed!

Fun design. I ended up creating a JSON object for the recipe and added one other item to demonstrate a re-usable template added via Javascript. Put an observer onto the sections for some enhanced UX but got a little convoluted on repetitive tasking with class management to prevent re-application of the observer. Nothing crazy but could probably be cleaned up a bit. Feedback/suggestions welcomed!

Animated, responsive solution for Frontend Quiz. Enjoyable state handling with buttons and indicating whether users selection was correct or not. Ended up implementing a few chained ternaries which I didn't feel super great about but figured it was between that or muddying up my jsx with overlay border elements or optional button renderings. Feedback/suggestions welcomed! 🙂

Animated AND 3d Solution

Features

• Timed animations for enhanced UX
• Mobile responsiveness
• Assets loader
• Custom Blender models

Feedback and suggestions welcomed 🙂

Featuring loading animations and scrolling carousel. Also added a 3d solution featuring scrolling animations and a couple of Blender .glb assets. May take a second to load and could certainly use improvement but fun to practice. Suggestions and feedback welcomed! 🙂

Fully responsive

Scrolling Animations

(Minimum) Form Validation/Message Alerts

Feedback and suggestions welcomed!

Solution to Clock App. Features UI animations and setInterval timer that sets a counter and will update time in real time. Feedback and suggestions welcomed!

Responsive solution for Space Tourism via React. Features transition animations and hover effects to help improve user experience! Feedback and suggestions welcomed! 😎

Responsive animated solution to officelite countdown landing page. Includes timer that calculates time left until Nov 3 2023, form validation and a confetti library that celebrates a successful sign-up. Used GSAP for the intro animations. Feedback and suggestions welcomed! 🙂

Used React and Framer-motion to add some page transitions although they could be tidied up/ applied with a bit more style. I haven't found myself falling in love with the library yet but have faith in its supportive testimonials so will try to keep it around and rely less on vanilla css @keyframing. Feedback and suggestions welcomed!

Features @keyframes animations and IntersectionObserver for a fair amount of animations. Some form validation but mostly for UI effect than anything. Feedback and suggestions welcomed! 🙂

Not gonna lie, the darn BMI calculator logic kinda tied me up more than I would have cared. Less in being able to get calculations and more just in that I found with the 2 units I had created a bunch of functions that essentially did the same thing so "enjoyed" trying to clean that up a bit in my JS. Definitely not perfect but a bit tidier. Fun design style with with the bottom cards having a somewhat unique arrangement on desktop. Added a couple of intersectionObserver animations but nothing grand, also added some calculator output logic with different text colors depending on users 'health' status. Feedback and suggestions welcomed! 🙂

Fun design challenge. Just trying to become familiar with gsap at a basic vanilla level as I see it used for pretty cool things in more advanced React/ThreeJS projects. Its definitely pretty plug and play friendly, although a couple of the animations seem to be somewhat sluggish on mobile but I've unfortunately found that in general whether its @keyframes or canvas, any suggestions to mitigate that are certainly welcome as are any suggestions/feedback in general! 🙂

Fun challenge. Tried to keep the time/time-tracking logic as somewhat single-source-of-truth to allow some fun(if not terribly useful) persistence with each selections current progress (if user starts one timer, stops and switches to another category, the old timer doesn't just reset to an initial state). Added some user-preferences on fonts/colors via LocalStorage and a congratulations render for those who make it through their planks/whatever interval.💪.

I think?? my timer logic is simple enough on start/stops to avoid unintentional 'layered interval' bugs but with React, I'm sure there is a more elegant way to do it and definitely curious if a bug is experienced there. The duration is set to 1/10 of a second just for easier demo/user experience. Feedback/suggestions welcomed! 🙂

Fun challenge with some design details and game logic to work through. May be worth trying to refactor the gameWinner functions with something a bit more elegant than the if() train. Would be fun to add a back-end and allow for 2 player via socket.io. Wouldn't be shocked if a bug or 2 is to be found so feedback and suggestions welcomed!

Realized my first solution on this wasn't super ideal so did a re-do. Didn't involve getting too complex with grid so I'm sure there are snazzier ways but it's a bit better than the earlier entry. Added couple (desktop-size) hover-effects for some fun. Feedback and suggestions welcomed!

Mostly an experimental/learning effort with Blender and ThreeJS. Could definitely use some clean up/polish so any 3d maestros out there I'd very much welcome suggestions.

Fun challenge and kind of fun to deviate away from the SPA and actually make separate HTML files. Added some hover effects for some of the sections and put some state logic in the last bit that accepts user inputs towards coffee selection. Feedback/suggestions welcomed! 🙂

Fun challenge with quite a bit of workflow to it. Tried to keep the state management as clean/single sourced as possible using a global provider context store. Probably better ways so any suggestions are welcomed. No persistent data so any refreshes will reset the UI.