🌳 Forest Guardians Portfolio

Welcome to Forest Guardians — a creative, interactive portfolio that blends technology, nature, and playful storytelling!
Explore a world where code meets conservation, and every section is designed to inspire curiosity and connection.

---

🌲 Live Demo

View the Portfolio

---

✨ Features

• Animated Hero Section:
  Meet the coding ranger and forest animals in a lively, animated introduction.

• Camping Adventure:
  Fun storytelling about the journey from Wi-Fi addict to wilderness enthusiast, with animated stats and SVG art.

• Key Projects:
  Showcase of major projects, each with a unique "tree" metaphor and interactive cards.

• About Me:
  Personal details, skills grid, and a talking tree that cycles through fun facts and jokes.

• My Garden (3D Forest):
  Step into a magical, interactive 3D garden built with Three.js — complete with animated trees, grass, benches, and clickable wooden signboards.

• Contact & Newsletter:
  Modern contact form, social links, and newsletter subscription.

• Responsive Design:
  Fully responsive and mobile-friendly.

---

🛠️ Tech Stack

• Frontend:
  HTML5, SCSS/CSS3, JavaScript (ES6+), Three.js

• UI/UX:
  Poppins, Playfair Display, Font Awesome Icons

• 3D Animation:
  Three.js, custom GLSL shaders, GLTF models

• Forms:
  Formspree for contact and newsletter

---

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/Happyesss/portfolio.git
   cd portfolio

2. Open Index.html in your browser:
   No build step required! All assets are included or loaded via CDN.

3. Explore the 3D Garden:
   Open assets/tree-animation/tree.html for the interactive 3D experience.

---

📁 Project Structure

portfolio/
├── assets/
│   └── tree-animation/
│       ├── tree.html
│       ├── script.js
│       └── style.css
├── css/
│   └── style.css
├── js/
│   └── script.js
├── scss/
│   └── style.scss
├── Index.html
└── README.md

---

🌱 Customization

• Update your name, bio, and project details in Index.html.
• Add or replace images in the assets/ folder.
• Tweak styles in scss/style.scss or css/style.css.
• Edit 3D garden logic in assets/tree-animation/script.js.

---

💡 Credits

• 3D models and textures: ceramicSoda/treeshader
• Icons: Font Awesome
• Illustrations: SVGator
• Fonts: Google Fonts

---

📬 Contact

Feel free to reach out via the contact form on the site or connect on
GitHub | LinkedIn | Instagram

---

"Planting ideas, growing solutions, coding a greener tomorrow."