🏔️ Framework Mountain

Framework Mountain is a curated collection of web development projects organized into themed Valleys. Each Valley represents a focused area of exploration such as UI components, creative experiments, full web apps, backend systems, games, portfolios, and data scraping.

All projects are self-contained, framework-diverse, and built for hands-on learning.

🗺️ Valley Overview

• 🧠 Backend Valley — Backend & full-stack foundations
• 🧩 Component Valley — Reusable UI components
• 🎨 Creative Valley — Visual & animation experiments
• 🕷️ Data Scrape Valley — Web scraping & automation
• 🎮 Game Valley — Browser-based games
• 🌌 Portfolio Valley — Portfolio & personal showcase sites
• 🕸️ Web App Valley — Full web applications & clones

🧠 Backend Valley

FastAPI

📁 Backend Valley/FastAPI

A modern Next.js-based project integrating backend concepts and API configuration, structured for scalable full-stack development.

Tech: Next.js, TypeScript, PostCSS, pnpm

🧩 Component Valley

Projects

• Animated CSS Login Form
  Animated login form built with Svelte and Rollup.

• Pay Card Component
  Interactive credit card form with live preview and theming.

• Vuetify Image Gallery
  Responsive image gallery with sidebar navigation.

Tech: Svelte, React, Vue 2, Vuetify, SCSS, Rollup

🎨 Creative Valley

Projects

• 3D Apple Homepage
  3D product-style homepage using React and Vite with GLB models.

• Sky Diving Parallax Cat
  Fun parallax animation experiment with layered assets.

Tech: React, Vite, CSS, JavaScript

🕷️ Data Scrape Valley

Projects

• Scrapping A Bookstore With Puppeteer
  Book data extraction using Puppeteer and TypeScript.

• Scrapping Blogs With Puppeteer
  Blog scraping scripts with extracted JSON datasets.

• Scrapping Dental PMS Sites With Puppeteer
  Advanced scraping and comparison tooling for PMS platforms.

Tech: Node.js, Puppeteer, TypeScript, JavaScript

🎮 Game Valley

Flappy Bird

📁 Game Valley/Flappy Bird

A browser-based Flappy Bird clone with sound effects and sprite animations.

Tech: JavaScript, HTML, Canvas

🌌 Portfolio Valley

Projects

• 3D Solar Portfolio — Three.js solar-system themed portfolio
• 3D Svelte Portfolio — CMS-driven SvelteKit portfolio with slices
• Black Hole — Next.js portfolio with motion & video backgrounds
• Fancy Green — Clean React + Vite portfolio concept
• Techno Explosion — High-energy animated Next.js portfolio

Tech: SvelteKit, React, Next.js, Tailwind CSS, Three.js

🕸️ Web App Valley

Projects

• Angular Webshop
  E-commerce demo with cart services and Node.js checkout server.

• Digital Hippo
  Full-featured e-commerce platform with authentication, payments, and CMS.

• Job Board
  Vue-based CRUD job listing application with routing.

• Netflix
  Netflix-style UI clone using API-driven rows.

Tech: Angular, Vue 3, React, Next.js, Tailwind CSS, Node.js

🛠️ Skills Demonstrated

• Frameworks: React, Svelte, SvelteKit, Vue, Angular, Next.js
• Styling: Tailwind CSS, SCSS, Vuetify, CSS animations
• Backend & Data: Node.js, Puppeteer, API integration
• 3D & Motion: Three.js, asset-driven animation
• Architecture: Component-based design, modular folders

🚀 Getting Started

Each project is self-contained.

cd Valley/Project-Name
pnpm import
pnpm install
pnpm dev

Refer to individual project READMEs for project-specific setup.

📌 Notes

• Focused on learning, experimentation, and real implementations
• Valleys group projects by intent, not just framework
• Clean separation between UI, apps, backend, and experiments

Welcome to Framework Mountain — explore the Valleys 🏔️