diff --git a/page.tsx b/page.tsx new file mode 100644 index 0000000..6da5d80 --- /dev/null +++ b/page.tsx @@ -0,0 +1,582 @@ +'use client'; + +import Image from "next/image"; +import { useState, useEffect, useRef } from "react"; + +interface Sticker { + id: number; + src: string; + x: number; + y: number; +} + +interface Project { + name: string; + description: string; + date: string; + details: string[]; + githubLink?: string; +} + +export default function Home() { + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const [typedText, setTypedText] = useState('Hello World'); + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + email: '', + message: '' + }); + const [submitStatus, setSubmitStatus] = useState(''); + const [isDarkMode, setIsDarkMode] = useState(true); + const [stickers, setStickers] = useState([]); + const [selectedSticker, setSelectedSticker] = useState(null); + const [selectedProject, setSelectedProject] = useState(null); + const [isStickersMenuOpen, setIsStickersMenuOpen] = useState(false); + const [showStickers, setShowStickers] = useState(true); + const [selectedActivities, setSelectedActivities] = useState([]); + const sectionRefs = { + skills: useRef(null), + projects: useRef(null), + experience: useRef(null), + education: useRef(null), + certifications: useRef(null), + contact: useRef(null), + research: useRef(null), + }; + + const projects: Project[] = [ + { + name: "Haircut Assistant App *work in progress*", + description: "Innovative mobile application using AR and real-time image processing", + date: "Aug 2024", + details: [ + "Allows users to scan their hair, compare it with a desired haircut, and display precise measurements", + "Enhances user satisfaction and confidence in haircut planning", + "Implementing technologies in Python, OpenCV, ARKit/ARCore, React Native, and MATLAB" + ], + githubLink: "https://github.com/tahasecond/cutIt" + }, + { + name: "Form Validation System", + description: "Robust form validation system using React.js with Formik and Yup", + date: "April 2024", + details: [ + "Ensured data integrity through comprehensive field validations", + "Enhanced user experience and data accuracy with advanced error handling and user feedback" + ], + githubLink: "https://github.com/tahasecond/form-validation-react" + }, + { + name: "Passwordless Authentication System", + description: "Secure authentication system using React.js, Node.js, Express, and Stytch API", + date: "Feb 2024", + details: [ + "Implemented magic link authentication sent to users' email", + "Provides secure, passwordless entry for enhanced user experience" + ], + githubLink: "https://github.com/tahasecond/react-passwordless-ID" + } + ]; + + const researchProjects: Project[] = [ + { + name: "Experimental Flights", + description: "Undergraduate Research @ Georgia Tech | Atlanta, GA | Aug 2024 – Present", + date: "Aug 2024 – Present", + details: [ + "Developing a drone delivery system, including hardware, flight testing, and user interface design for a consumer delivery app", + "Improved flight plan algorithm, reducing average algorithm cost by 15%", + "Implementing technologies in Python, ROS, MATLAB, Gazebo, and GitHub" + ], + githubLink: "https://github.com/yourusername/experimental-flights" + } + ]; + + useEffect(() => { + const handleMouseMove = (event: MouseEvent) => { + setMousePosition({ x: event.clientX, y: event.clientY }); + }; + + window.addEventListener('mousemove', handleMouseMove); + + return () => { + window.removeEventListener('mousemove', handleMouseMove); + }; + }, []); + + useEffect(() => { + const texts = ['Hello World', 'My name is...', 'Taha Ahmad!']; + let currentIndex = 0; + let currentText = ''; + let isDeleting = false; + + const type = () => { + const fullText = texts[currentIndex]; + + if (isDeleting) { + currentText = fullText.substring(0, currentText.length - 1); + } else { + currentText = fullText.substring(0, currentText.length + 1); + } + + setTypedText(currentText); + + if (!isDeleting && currentText === fullText) { + setTimeout(() => { + isDeleting = true; + }, 500); + } else if (isDeleting && currentText === '') { + isDeleting = false; + currentIndex = (currentIndex + 1) % texts.length; + } + + const typingSpeed = isDeleting ? 50 : 100; + setTimeout(type, typingSpeed); + }; + + type(); + }, []); + + useEffect(() => { + const handleScroll = () => { + if (sectionRefs.education.current) { + const rect = sectionRefs.education.current.getBoundingClientRect(); + setShowStickers(rect.top > window.innerHeight); + } + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const scrollToSection = (sectionRef: React.RefObject) => { + sectionRef.current?.scrollIntoView({ behavior: 'smooth' }); + }; + + const backgroundStyle = { + backgroundImage: `url('/background.jpg')`, + backgroundPosition: `${50 + mousePosition.x / 50}% ${50 + mousePosition.y / 50}%`, + transition: 'background-position 0.2s ease-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out', + backgroundColor: isDarkMode ? '#0a0a0a' : '#ffffff', + color: isDarkMode ? '#ffffff' : '#0a0a0a', + }; + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prevState => ({ + ...prevState, + [name]: value + })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setSubmitStatus('Sending...'); + try { + const response = await fetch('/api/contact', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(formData), + }); + + if (response.ok) { + const data = await response.json(); + setSubmitStatus(data.message || 'Message sent successfully!'); + setFormData({ + firstName: '', + lastName: '', + email: '', + message: '' + }); + } else { + const errorData = await response.json(); + setSubmitStatus(errorData.error || 'Failed to send message. Please try again.'); + } + } catch (error) { + console.error('Error:', error); + setSubmitStatus('An error occurred. Please try again later.'); + } + }; + + const toggleTheme = () => { + setIsDarkMode(!isDarkMode); + document.documentElement.classList.toggle('dark'); + }; + + const handleStickerSelect = (sticker: string) => { + setSelectedSticker(sticker); + setIsStickersMenuOpen(false); + }; + + const handleStickerPlace = (e: React.MouseEvent) => { + if (selectedSticker) { + const newSticker: Sticker = { + id: Date.now(), + src: selectedSticker, + x: e.clientX, + y: e.clientY, + }; + setStickers([...stickers, newSticker]); + setSelectedSticker(null); + } + }; + + const clearStickers = () => { + setStickers([]); + }; + + const toggleActivity = (index: number) => { + setSelectedActivities(prevSelected => + prevSelected.includes(index) + ? prevSelected.filter(i => i !== index) + : [...prevSelected, index] + ); + }; + + return ( +
+ +
+
+
+ Georgia Tech logo +

+ {typedText}| +

+

Undergraduate Student | Problem Solver | Tech Enthusiast

+

+ LinkedIn | + GitHub +

+
+ Taha Ahmad's profile picture +
+ +
+
+

Education

+

Georgia Institute of Technology

+

B.S. in Computer Science (Intelligence/Info Internetworks Thread)

+

Minor in Law, Science, & Technology

+

Expected Graduation: May 2026

+

GPA: 3.5/4.0

+

Relevant Coursework: Data Structures & Algorithms, Object Oriented Programming, Computer Architecture, Linear Algebra

+
+ +
+

Technical Skills

+
    +
  • Programming Languages: Proficient in Java, JavaScript, Lua, Python; Familiar with CSS, HTML, Swift
    • +
  • Tools & Technologies: Git, GitHub, XCode, AutoCAD, ARkit, React.js
    • +
  • Frameworks & Libraries: Familiar with TensorFlow, PyTorch
    • +
  • Other Skills: Video Editing, Photoshop, Microsoft Office
    • +
+
+ +
+

Experience

+
+

Paid Assignment Developer

+

CS111 & CS112 Assignment Guru @ Rutgers University | New Brunswick, NJ | Apr 2024 – Aug 2024

+
    +
  • Collaborated with other developers to design and develop coding assignments for Intro to Computer Science and Data Structures & Algorithms Courses for over 1500+ students
    • +
  • Designed a Data Structures (CS112) assignment featuring a two-level Hash Table Java assignment enabling the analysis of patterns in real-world data
    • +
+
+
+ +
+

Projects

+
+ {projects.map((project, index) => ( +
setSelectedProject(project)} + > +

{project.name}

+

{project.date}

+
+ ))} +
+ {selectedProject && !researchProjects.some(rp => rp.name === selectedProject.name) && ( +
+

{selectedProject.name}

+

{selectedProject.description}

+
    + {selectedProject.details.map((detail, index) => ( +
  • {detail}
    • + ))} +
+ {selectedProject.githubLink && ( + + View on GitHub + + )} +
+ )} +
+ +
+

Research

+
+ {researchProjects.map((project, index) => ( +
setSelectedProject(project)} + > +

{project.name}

+

{project.date}

+
+ ))} +
+ {selectedProject && researchProjects.some(rp => rp.name === selectedProject.name) && ( +
+

{selectedProject.name}

+

{selectedProject.description}

+
    + {selectedProject.details.map((detail, index) => ( +
  • {detail}
    • + ))} +
+ {selectedProject.githubLink && ( + + View on GitHub + + )} +
+ )} +
+
+

Leadership and Community Engagement

+
    + {[ + { + title: "FIRST Robotics", + description: [ + "Conducted projects to develop competition-ready robots, specializing in software for multiple robot subsystems.", + "Utilized automation and machine learning with a Limelight smart camera to accurately identify targets during competitions." + ] + }, + { + title: "GT Data Science Initiative", + description: [ + "Pursuing Machine Learning projects and the Intel Data Science Bootcamp organized by Intel Corporation." + ] + }, + { + title: "GT Boxing Club", + description: [ + "Participating in weekly team boxing sessions with the goal of competing at a competitive level." + ] + }, + { + title: "Humanity First International Relief", + description: [ + "Operated with community and disaster relief services communicating with non-native English speakers, refugees, and immigrants." + ] + } + ].map((activity, index) => ( +
  • + + {selectedActivities.includes(index) && ( +
      + {activity.description.map((point, pointIndex) => ( +
    • + {point} +
      • + ))} +
    + )} +
    • + ))} +
+
+ + + +
+

Additional Information

+
    +
  • Languages: English (Native), Hindi/Urdu (Full Professional Proficiency), Arabic (Intermediate Proficiency)
    • +
  • Certifications & Training: CodePath Intro to Web Development Certification, CodePath Technical Interview Prep
    • +
  • Interests: Video Game Development, Boxing, Spikeball, MMA Fighting, 3D Modeling
    • +
+
+
+ +
+

Contact Me *work in progress*

+
+ + + + + +
+ {submitStatus &&

{submitStatus}

} +
+
+ {showStickers && ( +
+

Stickers

+
+ {['🎉', '🚀', '💡', '🌈', '🔥'].map((sticker) => ( + + ))} +
+ +
+ )} + {stickers.map((sticker) => ( +
+ {sticker.src} +
+ ))} + {selectedSticker && ( +
+ {selectedSticker} +
+ )} +
+ ); +} \ No newline at end of file