David Pokrajac
@DavidPokrajacAll solutions
Pomodoro App with Next, Zustand, TypeScript, GSAP, BEM naming
#bem#gsap#next#typescript#zustandPSubmitted 6 days agoResponsive Dictionary App with Zustand, TypeScript, Tailwind, NextJS
#next#tailwind-css#typescript#zustand#reactPSubmitted 20 days agoI would like to get some tips about accessibility. In my case of creating custom select box, I did not know what aria role to give it to it, so I just left it as-is. Any other advice is gladly accepted.
Responsive FE Quiz with GSAP animations (NextJS, TypeScript, Tailwind)
#gsap#next#tailwind-css#typescript#reactPSubmitted about 1 month agoI am having difficulties with right answers counting. I often get wrong score count so ideally I would like to get any additional advice about that, and what I could have done better that. Also, would like to know some general tips about how I could further improve and refactor my code.
Animatable Time Tracking dashboard (with dark and light modes)
#gsap#tailwind-css#accessibilityPSubmitted 5 months agoI would like to seek help in three things in particular.
1.) When turning the dark mode on by checking the input checkbox, the dark mode will appear on screen, and it will persist on page refresh, as I set localStorage for it. However, input checkbox will go back to its unchecked state on page refresh, and the result is dark mode appearing although input checkbox is not checked (on page refresh). I tried to use localStorage so that on page refresh input checkbox stays toggled on based on the the value of the checked attribute but I still have not found any solution for that.
2.) Second major problem I had is with gsap animation. I wanted to animate on each button click, that card component hides its content inside and then shrinks down to height of zero, and then wait 0.75 seconds to rise to its normal height, and then display its content again by making it visible. However, it seems that contentVisibility is not animatable (or atleast that is what i think). How could I successfully animate content inside parent to hide and reappear?
3.) I used ref.current.clientHeight to calculate height of a card, when making gsap animation explained in second problem, but as I shrink the window the height is a bit different for mobile and laptop devices and it gets a little distorted. Is there a way that height would readjust dynamically when resizing? Is this something resize event listener would help?
GSAP Animated and Responsive Space Tourism Website
#accessibility#gsap#react#typescript#nextPSubmitted 6 months agoI had a problem of making the image in the technology page to be in the exact or atleast similar size as that shown in snapshots. The image is still too strecthed. Would like to get some tips about that. Also, my useGSAP hooks are a bit too clogged with code. I used switch statement to position a pseudo-like active checkmark based on the position of buttons on page. Would love to know how I could reduce the code inside as it quickly got too messy for one to read.
Responsive 3-themed calculator
#bemPSubmitted 8 months agoWould like to get feedback for my scriptTwo javascript file. Would like to know a better way to change theme styles other than manually changing class names on elements.
Interactive rating component (Next, TypeScript, CUBE CSS)
#cube-css#typescript#nextPSubmitted 8 months agoResponsive testimonials section created with CSS grid and CUBE CSS
#cube-cssPSubmitted 9 months agoI would like to know what I could have done better in terms of organizing the code with grid. I had plenty of lines just for the grid (re-organizing each article inside section individually). Would also like to know regarding CUBE CSS, if I should move grid rulesets defined in globals.css, to composition folder.
Responsive and accessible Grid Layout made with CUBE CSS methodology
#accessibility#cube-css#next#typescriptPSubmitted 9 months agoIntro component with signup form (used SCSS and Vanilla JS) Newbie
#sass/scssPSubmitted over 1 year ago
