Skip to content

Skip the usual presentation slides, and create an interactive Next.js project to lay out some of our household rules for your children.

License

Notifications You must be signed in to change notification settings

daaimah123/House_Rules_Kids

Repository files navigation

🏡 House Rules Presentation 🏡

I decided to skip the usual presentation slides, and create an interactive Next.js project to lay out some of our household rules for my children. It's designed to be fun, keep everyone on the same page for summer and the school year, as well as have some Gen Z references to keep their eyes and ears attentive.

🛠️ Features

  • Interactive Slides: Click through different sections with smooth navigation.
  • Kid-Friendly Design: Packed with fun colors, emojis, and Gen Z phrasing to keep things engaging.
  • Clear Sections: Breaks down everything into easy-to-digest parts:
    • Agenda
    • Celebration (for leveling up grades!)
    • Privileges (all the cool stuff they earn!)
    • Summer Rules
    • School Year Rules (with a clear "homework first" rule)
    • All Year Round Rules.

💻 How to Run Locally

Wanna check it out on your own machine? It's pretty straightforward.

  1. Clone the repo: git clone git@github.com:daaimah123/House_Rules_Kids.git
  2. Navigate to the project directory: cd house-rules-presentation
  3. Install dependencies: npm install or yarn install
  4. Fire it up! This will start the development server: npm run dev or yarn dev
  5. Open http://localhost:3000 in your browser to see the presentation.

🎨 How to Customize This Project

This project is built with Next.js App Router, so it's super flexible. Here are some ideas for how you can make it your own:

  • Update the Rules: Head into house-rules-presentation.tsx and tweak the text for each rule. Change names, dates, or add new expectations. Make it fit your fam's unique vibe!
  • Keep Ya Emoji Game Strong: Swap out emojis to match your kids' favorite characters or themes. Sonic rings? Minion bananas? Go for it!
  • Color Palette Remix: If you're feeling a different aesthetic, play around with the Tailwind CSS classes for bg-gradient-to-r, bg-gradient-to-br, and the solid bg-*-200 colors. You can totally change the whole mood.
  • Add More Interactivity:
    • Chore Checklists: You could add actual checkboxes next to chores so kids can mark them off.
    • Reward Tracker: Build a simple system to track points for completed tasks and earned privileges.
    • Timers: Integrate countdown timers for electronics limits or bedtime.
    • Sound Effects: Add little audio cues for slide transitions or button clicks to make it even more playful.
  • New Slides: Got more rules or fun stuff to add? Just create a new object in the slides array in house-rules-presentation.tsx.
  • Printable Version: Think about adding a feature to generate a simplified, print-friendly version of the rules for the fridge or their rooms.
  • Personalized Content: You could even make separate versions or sections specifically for each child if their rules differ a lot.

Have fun making this presentation your own! Set your little crew up for success! 💪🏾🙂