All solutions

I posted this project early because I'm looking for a back-end developer who has some professional experience to help build this project to be truly multiplayer. The game works perfectly but I want to collaborate. If we are a great fit, we can work on more front-end mentor projects together and share experiences.

This is a fullstack site which all the content comes from a CMS which there is a reverse proxy server talking between the client and CMS to add extra security for example DOS attack. I used react-hook-form to build the checkout and the payment endpoint is not connected to stripe or paypal but it does double check prices between the database product prices and what the client sent by checking item ids. I call this MVP since its a usable site but its not styled perfectly or has all the content because its busy work and plan to work on a more challenging project. Will work on it more little by little.

This is my new portfolio site based off of the design. In the future, will add a CMS and gather images to do the project details page but I have a more important project to complete.

Any feedback is welcome, I plan to work on this more when I learn more about Next.js and go through those courses but I got an MVP at least and just pushed through it. I plan to update the readme but too tired lol. Here is what I learned about from this project:

• SVG Animations and Accessibility
• Using CSS Modules
• How to use the animation and @keyframes
• Clip Paths
• Intersection Observer for the navigation bar
• CSS Grid
• Using Next.js <Image /> and <Link /> components
• What _document.js is and how to import fonts into there.
• The difference between getServerProps and getStaticProps.

Here is what I struggle with:

• Organizing css through modules, it felt like a lot of manual work mixing classes for the animations. I'm now wondering if styled components is the way to go.

Any feedback is cool. I just wanted to speed run this design and time myself on how much I can accomplish in a short period so there might be a glaring mistake maybe.

I would like feedback on how accessible my site is for example keyboard users. Also I would like to know how you guys controlled the grey block svgs which I used pseudo classes. Another thing is how anyone moved their image off screen a little bit, I used negative margins for that task which I think isn't the best because I had to use overflow: hidden for the mobile then unset it on bigger screens. If there is any SCSS tips or accessibility tips let me know. :)

When hovering over the Learn More button, I had to use a box-shadow instead of border to make sure the button doesn't have a position offset and sometimes it grows the card's height. Not sure if there is a way to use border for this part of the code without it acting funky: .card__cta:hover { background: none; box-shadow: 0 0 0 0.2rem var(--white); color: var(--white); }

I tried using box-sizing: border box but that didn't do the trick. Anyway if there is anything that could be better let me know. :)