🏔️ Framework Mountain

This repository is a comprehensive collection of front-end projects built with React, Svelte, SvelteKit, and Vue. Each project explores different concepts, frameworks, UI patterns, and interactive experiences.

Projects range from small UI experiments to full-stack applications with 3D visuals, CMS integration, and complex state management.

Each project lives in its own dedicated folder and focuses on a specific set of technical ideas.

📂 Projects Overview

React Projects

• 3D Apple Homepage — Product showcase with 3D models and scroll animations
• 3D Solar Portfolio — Interactive 3D solar system portfolio
• Airbnb — Component-based travel listing interface
• Data Scraping Projects — Puppeteer-based web scrapers
• DeerHacks — Full hackathon management platform
• FastAPI — Next.js integration with FastAPI
• Flappy Bird — Browser-based game implementation
• Meme Generator — Dynamic meme creation tool
• Movie Search App — Search interface with external API
• Notes App — Firebase-powered notes application
• Pay Card Component — Interactive credit card form
• React Static Page — Static landing page
• ReactFacts — Information display with theme switching
• Sky-Diving Parallax Cat — Parallax scrolling animation
• Tenzies — Dice game with state management
• Van Store — Multi-page rental store with authentication

Svelte/SvelteKit Projects

• 3D Svelte Portfolio — Advanced portfolio with 3D visuals and CMS
• Animated CSS Login Form — UI animation experiment
• Story Path — Interactive storytelling interface

Vue Projects

• Job Board — Full CRUD job listing application
• Vuetify Calendar — Interactive calendar component
• Vuetify Image Gallery — Responsive image gallery

🌟 Featured Projects

🌌 3D Svelte Portfolio (SvelteKit + TypeScript)

📁 3D Svelte Portfolio/

A full-featured portfolio website with 3D visuals, modular content slices, and CMS-driven pages.

Key Features:

• SvelteKit routing and layouts
• TypeScript throughout
• Tailwind CSS styling
• Prismic CMS integration (Slice Machine)
• 3D hero scene with shaders and sound
• Dynamic blog and project pages
• Preview mode support

Technologies: SvelteKit, TypeScript, Tailwind CSS, Prismic, Vite

🦌 DeerHacks (Next.js + TypeScript)

📁 DeerHacks/

A comprehensive hackathon management platform with registration, check-in, and admin features.

Key Features:

• Multi-step registration forms
• QR code check-in system
• Admin dashboard with user management
• Photo gallery integration
• Schedule management
• Email verification system

Technologies: Next.js, TypeScript, Material-UI, PWA support

🪐 3D Solar Portfolio (Three.js + Vanilla JS)

📁 3D Solar Portfolio/

An interactive 3D solar system portfolio experience.

Key Features:

• Three.js 3D rendering
• Interactive planet navigation
• Custom shaders and textures
• Orbit controls

Technologies: Three.js, Vite, JavaScript

💼 Job Board (Vue + Vite)

📁 Job Board/

A complete job listing application with client-side routing and CRUD operations.

Key Features:

• Vue Router navigation
• Dynamic job listings
• Add, edit, and view jobs
• Responsive Tailwind design
• Reusable component architecture

Technologies: Vue 3, Vite, Vue Router, Tailwind CSS

🍎 3D Apple Homepage (React + Three.js)

📁 3D Apple Homepage/

A product showcase featuring 3D models with scroll-driven animations.

Key Features:

• WebGL 3D model rendering
• Scroll-based scene transitions
• Responsive design
• Interactive product display

Technologies: React, Three.js, Vite, GSAP

🏠 Van Store (React Router)

📁 Van Store/

A multi-page van rental platform with authentication and host features.

Key Features:

• Protected routes with authentication
• Host dashboard
• Nested routing
• MirageJS mock backend

Technologies: React, React Router, MirageJS

📅 Vuetify Calendar (Vue + Vuetify)

📁 Vuetify Calendar/

An interactive calendar component built using Vue and Vuetify, focusing on UI framework integration and state management.

Key Features:

• Custom calendar view
• Vuetify-based styling and layout
• Centralized state handling
• Clean component separation

Technologies: Vue, Vuetify, Vuex-style store, Material Design components

🖼️ Vuetify Image Gallery (Vue + Vuetify)

📁 Vuetify Image Gallery/

A responsive image gallery application built with Vuetify, featuring sidebar navigation and dynamic layout.

Key Features:

• Responsive gallery grid
• Sidebar navigation component
• Vuetify theming
• Component-driven layout

Technologies: Vue, Vuetify, Material Design Icons, Web Font Loader

🎨 Animated CSS Login Form (Svelte)

📁 Animated CSS Login Form/

A focused UI experiment featuring an animated login form with real-time password validation feedback.

Key Features:

• Animated transitions
• Password strength meter
• Lightweight Svelte setup
• CSS-driven effects

Technologies: Svelte, CSS animations, Rollup

🐱 Sky-Diving Parallax Cat (React + Vite)

📁 Sky-Diving Parallax Cat/

A fun parallax scrolling animation featuring a skydiving cat.

Key Features:

• Smooth parallax effects
• Multiple animation layers
• Vite-powered build
• Responsive design

Technologies: React, Vite, CSS animations

💳 Pay Card Component (React + SCSS)

📁 Pay Card Component/

An interactive credit card form with real-time validation and card type detection.

Key Features:

• Dynamic card type detection
• Real-time formatting
• 25 card background themes
• Flip animation

Technologies: React, SCSS

🛠️ Skills Demonstrated

Frameworks & Libraries

• React, Next.js, Svelte, SvelteKit, Vue
• TypeScript, JavaScript (ES6+)
• React Router, Vue Router, SvelteKit routing

Styling & UI

• Tailwind CSS, Material-UI, Vuetify
• CSS animations, SCSS
• Responsive design patterns

State & Data

• React Hooks, Context API
• Vue Composition API
• Firebase, MirageJS
• Prismic CMS, Slice Machine

3D & Animation

• Three.js, WebGL
• GSAP, CSS animations
• Parallax effects

Tools & Build Systems

• Vite, Webpack, Rollup
• TypeScript, Babel
• PostCSS, ESLint, Prettier

Advanced Features

• Web scraping (Puppeteer)
• PWA support
• Authentication flows
• QR code generation/scanning
• Email verification

🚀 Getting Started

Each project is self-contained. To run a project locally:

# Navigate to project folder
cd [project-name]

# Install dependencies
npm install
# or
yarn install

# Run development server
npm run dev
# or
yarn dev

Refer to individual project READMEs for project-specific setup instructions.

📌 Notes

• This repository focuses on learning, experimentation, and hands-on practice
• Projects increase in complexity from simple UI demos to full applications
• Code emphasizes clarity, modularity, and modern front-end patterns
• Each framework section demonstrates best practices for that ecosystem

🎯 Future Ideas

• GraphQL integration
• Testing implementations (Jest, Vitest, Playwright)
• More advanced 3D experiences
• Real-time collaboration features
• Microservices architecture examples
• Server-side rendering comparisons

📫 Contact

Feel free to explore the projects or reach out if you'd like to discuss front-end development, React, Svelte, Vue, or web architecture.

Happy Coding! 🚀