Added footer + more

I added a footer to the home page to make it feel more complete

Number animations

now the number statistics animate when you scroll upon them. so i attached a video to show u what that looks like. I used the NumberFlow React library–it was pretty intuitive itself but then i had to use useState, useEffect, and useRef hooks and understand how to use those and how to defer the useEffect until the window detects it 😭 😭 u can do it with the native .getBoundingClientRect tho and u have to do it to an element you want to be the trigger, in my case i made the card the trigger, so if it shows then the animation will happen. and then make sure it’s less than window.innerHeight and element’s position.bottom must be greater than 0, which means that the element is below the top edge of ur screen
holy yap but this is how i teach myself bc that was something new for me 😭

Added card types and prop types to specify the kind of card design you want

I added different card types, and so now you can switch between them. So CardGrid is extra reusable LOL
This is through capitalized variables that I just learned! I could work logic between choosing components using a capitalized variable (yk the one that uses PascalCase)

Reworked some card grid component logic

I heard it’s better to create an array of the props rather than an array of the cards, so after struggling a bit I got to do it the conventional way with array mapping!
Not entirely sure what the individual mapping keys are for but I will look more deeply into that. It says online that you have to keep keys stable so that React knows which item you’re referencing but don’t totally understand why it would need to know that lol

Card Component + Card Grid

Both are reusable!

Card Component

I create InfoCard.jsx component which makes these light blue cards. I used props for the first time, so you can pass in an argument making these components completely reusable across the platform!

Card Grid

I created an array of cards and then passed them through the Card Grid. I made it so that the cols prop you pass in leads to the amount of columns created with Tailwind CSS by assigning 1 to “grid-col-1” etc etc in an object and then using that for part of the Tailwind CSS for the Card Grid. super simple logic but im still proud nevertheless LOL

I implemented Splide JS into the website so it could create this photo gallery carousel!! i’m so proud of it! and the syntax for Splide was surprisingly easy and intuitive–I followed a tutorial on Medium to understand how to use it. The home page is already looking more polished.

Added a hero to the website. It’s currently a placeholder, I’m working on a swiping photo gallery as the hero. I also styled everything with tailwind-css because I’m trying to get used to it.

Why is react so painful? anyhow I made a router without styling yet with react-router-dom and so yeah that’s progress :’). I’m getting used to the react-router-dom way of things and having to configure main.jsx and stuff it’s so painful LOL