Scrolling implemented!!!

Made nav links scroll!

• This was easier than I thought! you just put ids for the target element and then use regular anchor tags and make the href the id! (with # prefix though)

Challenges

• I spent so much time trying to figure out how to do that with react-router-dom….it was so painful until I realized regular html works asdfkljalskdf

Future additions

• I’m literally about to add about us page right now

Footer created w/placeholders!

Added footer

This was a really simple operation, just needed to creatively organize divs to make it work!

Tailwind shadows

I familiarized myself with tailwind css’ shadows and its parameters, like shadow=[x-offset, y-offset, blur, spread, color] and I made use of it at the top border of the footer!

Future additions

Now i’m focusing on making the links on the top nav bar work cuz they don’t work rn and once I figure out how to do that I’ll add quick links. I’m still asking for images from the corporation so yeah

FAQ Section Done

Added modularity for FAQ template

• Each template accepts 2 props: question & answer. This makes it really reusable for the FAQ section! I also used useState to render the answer section if the button is clicked and toggle visibility with the button.

Styled it

• Once again using padding and the wonderfully convenient tailwind css presets I styled the FAQ Section

Rearranged the website

• I put the certifications section below FAQs because it seemed better there!

Challenges

• Honestly I didn’t know that you could render stuff using true and false statements when using useState but when I found out I was like wow this is so easy { true/falsestatement && the element you want to put }

Future additions:

• Need to add images, about me section, footer!

Services Search Done!

Added filtering system

• filters a “services” array with what is state search is set to (it’s set as what’s in the input text box when the box is changed)
• Only renders the thing on the list if it’s equivalent to the value typed in the search bar!

Styled it

• I styled it with tailwind, using purple-950 and rounded lol. Looks like a nice little file looking thing!

Challenges

• Not much honestly! practiced useState but this was a pretty simple instance of using it lol
• I learned how to set up npm run dev locally so I don’t have to rely on the crappy school wifi :D

Future additions

• I will add the next thing on the list from my future additions list (I wrote them in my last devlog!)

Added certifications SplideJS slideshow!

Imported SplideJS

• Installed React dependencies
• Imported CSS accordingly

Added placeholder images

• These placeholder images will be replaced w/ real cert images once I have them!

Challenges

• I was looking at the docs again cuz I forgot how to use Splide and I totally forgot to import the CSS (didn’t know I needed to do it) so I was so confused as to why my slides stacked vertically instead of the slideshow rows.

Future additions:

• My next addition will be the treatment searchbar! wish me luck cuz i have no idea how to code that, never coded something like that before!

Got started on homepage hero + navbar!

Brainstorming website layout

• I brainstormed the website layout on a notebook! It’ll have a navbar on top, hero first, then certification SplideJS slide, Services section, About Us section, & FAQ section. Then a simple little footer

Homepage Hero

• Put some catchy hero phrases for the business owner
• Allotted placeholder hero space

Navbar

• Put a call now button, phone number, and also on the right side navigation buttons (just to scroll because I intend this website to be just a one-pager)

Incorporated mobile friendliness already

• Using tailwind css’s sm, md, lg I’m incorporating mobile friendliness rn so I don’t have to do it later lol

Challenges

• I was having trouble because I forgot how to import tailwind css into my project but looked it up and now we’re good lolllll

Near-future additions

• Actual relevant hero image
• Clickable nav bar buttons
• A services section below the hero with a searchbar to search for if a given service is provided

Later additions

• About us section
• FAQ section
• Footer