diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..092408a --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,28 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' + +export default tseslint.config( + { ignores: ['dist'] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + }, +) diff --git a/index.html b/index.html new file mode 100644 index 0000000..e4b78ea --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..7aed10e --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "portfolio", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@eslint/js": "^9.25.0", + "@types/react": "^19.1.2", + "@types/react-dom": "^19.1.2", + "@vitejs/plugin-react-swc": "^3.9.0", + "eslint": "^9.25.0", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-refresh": "^0.4.19", + "globals": "^16.0.0", + "typescript": "~5.8.3", + "typescript-eslint": "^8.30.1", + "vite": "^6.3.5" + } +} diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..f173aa4 --- /dev/null +++ b/src/App.css @@ -0,0 +1 @@ +@import 'tailwindcss'; \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..673f2bb --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,542 @@ +import { useState, useEffect } from 'react'; +import { ChevronDown, Trophy, Code, Users, Zap, Award, Rocket, Star, Github, Mail, Phone, MapPin, Sun, Moon } from 'lucide-react'; + +const App = () => { + const [activeSection, setActiveSection] = useState('hero'); + const [isVisible, setIsVisible] = useState({}); + const [isDarkMode, setIsDarkMode] = useState(true); + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + + useEffect(() => { + const handleMouseMove = (e) => { + setMousePosition({ x: e.clientX, y: e.clientY }); + }; + + document.addEventListener('mousemove', handleMouseMove); + return () => document.removeEventListener('mousemove', handleMouseMove); + }, []); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + setIsVisible(prev => ({ ...prev, [entry.target.id]: true })); + setActiveSection(entry.target.id); + } + }); + }, + { threshold: 0.3 } + ); + + document.querySelectorAll('section[id]').forEach(section => { + observer.observe(section); + }); + + return () => observer.disconnect(); + }, []); + + const scrollToSection = (sectionId) => { + document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' }); + }; + + const toggleDarkMode = () => { + setIsDarkMode(!isDarkMode); + }; + + const themeClasses = isDarkMode + ? "min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-x-hidden transition-all duration-1000" + : "min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 text-gray-900 overflow-x-hidden transition-all duration-1000"; + + const cardClasses = isDarkMode + ? "bg-white/5 backdrop-blur-lg border-white/10" + : "bg-white/80 backdrop-blur-lg border-gray-200/50 shadow-lg"; + + const navClasses = isDarkMode + ? "bg-black/20 backdrop-blur-lg border-white/10" + : "bg-white/20 backdrop-blur-lg border-gray-200/20"; + + return ( +
+ {/* Cursor follower */} +
+ + {/* Navigation */} + + + {/* Hero Section */} +
+
+ + {/* Animated background particles */} +
+ {[...Array(20)].map((_, i) => ( +
+ ))} +
+ +
+
+
+
+ M +
+
+
+

+ Hi! I'm Maaz +

+

+ A curious, ambitious, and multidisciplinary student passionate about + science, + technology, + leadership, and + athletics +

+ +
+ + {/* Floating Elements */} +
+ +
+
+ +
+
+ +
+
+ + {/* About Section */} +
+
+
+

+ Why I Stand Out +

+
+
+ +
+
+ +

Unique Blend

+

+ Academic excellence, technological fluency, creative innovation in robotics and software, leadership through service, and athletic resilience. +

+
+ +
+ +

Team Player

+

+ I thrive in team environments, whether coaching classmates, collaborating in science competitions, or building apps with peers. +

+
+ +
+ +

Self-Driven

+

+ Consistently pursuing excellence—from earning honors and awards to shipping production-level apps and standing tall on the podium. +

+
+
+
+
+ + {/* Academic Section */} +
+
+
+

+ 🏆 Academic & STEM Highlights +

+
+
+ +
+
+
+ +

UIL Science 2nd Place

+
+

+ Showcased analytical rigor and creative problem-solving in a highly competitive academic environment. +

+
+ +
+
+ +

Science Olympiad

+
+

+ Regular participant developing strong teamwork, precise experimentation, and rapid on-your-feet thinking. +

+
+ +
+
+ +

GT Program

+
+

+ Advanced coursework that cultivated deeper critical thinking and an enriched love for learning. +

+
+ +
+
+ +

All-Honors Coursework

+
+

+ Full schedule of honors classes, consistently challenging myself to excel in every subject. +

+
+
+
+
+ + {/* Tech Section */} +
+
+
+

+ ⚙️ Tech, Innovation & Projects +

+
+
+ +
+
+
+ +

Sunday School App

+ In Production +
+

+ Architecting and building a fully functional, community-oriented app. Handling everything from UI/UX design to back-end integration. +

+
+ {['React Native', 'UI/UX Design', 'Backend Integration'].map((tech) => ( + + {tech} + + ))} +
+
+ +
+
+ +

Competitive Robotics

+ Award Winner +
+

+ Core contributor on RC Robotics Team, earned the "Plethora of Features" award by integrating remarkable range of capabilities—demonstrating versatility and innovation. +

+
+ +
+
+

Programming Skills

+
+ {['Python', 'React', 'React Native', 'Tailwind CSS'].map((skill) => ( + + {skill} + + ))} +
+
+ +
+

Striker Competition

+

+ Developed robotic-control systems in high-stakes simulation environment. +

+
+
+
+
+
+ + {/* Leadership Section */} +
+
+
+

+ 📚 Leadership, Service & School +

+
+
+ +
+
+ +

NJHS Inductee

+

+ National Junior Honor Society recognition for academic excellence, leadership, and community commitment. +

+
+ +
+ +

Tutoring

+

+ Volunteered regularly to tutor peers in math, science, and programming—fostering academic growth in others. +

+
+ +
+ +

Fabulous Falcon Award

+

+ Honored for outstanding school spirit, positive contributions to campus life, and consistent character. +

+
+
+
+
+ + {/* Athletics Section */} +
+
+
+

+ 🏊‍♂️🏸 Athletics & Competitions +

+
+
+ +
+
+
🏊‍♂️
+

Swimming Competitions

+

+ Competed across multiple events, honing discipline, mental toughness, and an enduring competitive spirit. +

+
+ +
+
🏸
+

Badminton Competitions

+

+ Sharpened hand-eye coordination, strategic thinking, and graceful sportsmanship on the court. +

+
+
+
+
+ + {/* Entrepreneurship Section */} +
+
+
+

+ 💡 Entrepreneurship & Drive +

+
+
+ +
+
+ +

Entrepreneurial Spirit

+

+ Always on the lookout for new opportunities—whether launching small ventures, leading peer projects, or exploring tech startups. +

+
+ +
+ +

Growth Mindset

+

+ I love to learn—whether it be a new programming framework, exploring scientific research, or mastering a new athletic skill. +

+
+
+
+
+ + {/* Footer */} +
+
+
+

+ Let's Connect +

+

+ Ready to collaborate on exciting projects or discuss opportunities? +

+
+ +
+

+ © 2025 Maaz. Passionate about science, technology, leadership, and athletics. +

+
+
+
+ + +
+ ); +}; + +export default App; \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..08a3ac9 --- /dev/null +++ b/src/index.css @@ -0,0 +1,68 @@ +:root { + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..bef5202 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..c9ccbd4 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..9728af2 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..2328e17 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react-swc' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})