I revamped the ruralcoderssociety.org nonprofit website to be fully on the React framework + use tailwind CSS
This was my first time using React for an actual project so there was a huge learning curve! I hope you like it!
I added mobile compatibility
The site was looking really good until someone looked on it on their phone or something other than a desktop, so this was the final element to ship it!
The fixed widths, I found, were the culprit for all the breaking when the website was viewed in other dimensions, so I made use of sm:some property and md:some property and lg:some property in tailwind and also w-full and max-w-some number to make the cards flexible depending on the dimensions it’s viewed from
I’m really proud of this because I used useState for the first time on an actual website to create the hamburger navigation thing. It opens like a set of links if you click it and the text changes from a three-line hamburger thing to an x. useState is actually amazing so many use cases
The main challenge was just tweaking what text/font sizes should go with sm/md/lg displays–just a lot of trial and error
Another challenge was making the hamburger opening look good because the background was only coloring to the height of the navbar,, I realized that I needed to move the appearing navigation outside of the navbar and it worked wonders
Just if the nonprofit gets more metrics or after outreach initiatives it’s apparent we’re missing some important content. but it’s done and I’m going to ship this!!
It’ s a simple about me page; I got inspiration from other NPO about me pages online!
I’m trying to use the same components across two pages for information cards on the programs we do, but the cards need to be two different heights. I’ve been hacking at this for a while but I’m going to rest before I try resolving this problem again :’)))))
(as you can see the images go off the cards for this second component. I want each card to be a standardized height but differ across pages. gl to me in the future lol)
After I finish adjusting these card heights, my website will be finished! I just need to hook it to our website domain and replace our outdated website!! yayyy
I used React to make a reusable image carousel thing where you can pass an array of photos as an argument and it will put it into the the SplideJS slides
Added a featured projects carousel that has some cool projects that our Code Without Borders Bootcamp participants made!!
Added arrows to the carousel too
Added a gradient background for aesthetic purposes :)
I generally had a hard time figuring out how to style the features component–it was really looking rough to start with but we landed on something 😭 I think the gradient helped a lot
I added a footer to the home page to make it feel more complete
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 😭
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)
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
Both are reusable!
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!
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
