Teen Study Buddy — 3D

• 

  3D pop-in, title + subtitle + Replay button

• 

  notes area + Save button

• 

  timer + Start/Reset button

• 

  sample quote + New Quote button

• 

  This gives an overview of layout and 3D design.

Inspiration

Teens often struggle with focus, motivation, and organizing study time. I wanted to create a fun, interactive, and visually engaging tool to make studying enjoyable and productive.

What it does

Teen Study Buddy — 3D combines a Pomodoro timer, motivational quotes, and note-taking in one app with 3D animations, particle effects, and card tilt interactions.

How we built it

• HTML & CSS: Structured hero, cards, footer, and 3D animations.
  
• JavaScript: Pomodoro timer, random quotes, notes saving, tilt effect, particle bursts.
  
• Staggered pop-in animations for a fast, dynamic interface.

Challenges we ran into

• Coordinating multiple 3D transforms and staggered animations.
  
• Optimizing particle effects for fast performance.
  

Accomplishments

• Fully interactive teen-friendly productivity app.
  
• Smooth 3D and particle animations with tilt interactions.
  
• Combines focus, motivation, and note-taking effectively.

What we learned

• Advanced 3D CSS transforms and animations.
  
• JS interactivity, local Storage, and staggered animations.
  
• Responsive design and performance optimization techniques.

What's next

• Customizable Pomodoro durations and breaks.
  
• Category-based motivational quotes and daily challenges.
  
• Dark/light theme toggle and additional interactive animations. .

Built With

• 3d-css-transforms
• css3
• github
• html5
• javascript
• localstorage
• web