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.
- 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.
Wanna check it out on your own machine? It's pretty straightforward.
- Clone the repo:
git clone git@github.com:daaimah123/House_Rules_Kids.git
- Navigate to the project directory:
cd house-rules-presentation
- Install dependencies:
npm install
oryarn install
- Fire it up! This will start the development server:
npm run dev
oryarn dev
- Open http://localhost:3000 in your browser to see the presentation.
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 solidbg-*-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 inhouse-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! 💪🏾🙂