Hack-the-Future · rastog18 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024
diff --git a/htmlexample.html b/htmlexample.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Basic HTML Example</title>
+  <title>About Me</title>
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -38,8 +38,8 @@
 </head>
 <body>
 
-  <h1>Welcome to My Page</h1>
-  <p>Hello World!</p>
+  <h1>Hello World!</h1>
+  <p>I am him</p>
   <a href="https://google.com">This is a link</a>
   <hr>
   <div>

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/public/RonaldPhoto.jpg b/public/RonaldPhoto.jpg
diff --git a/public/aaryan.jpg b/public/aaryan.jpg
diff --git a/public/anushapic.png b/public/anushapic.png
diff --git a/public/mayukha_pfp.png b/public/mayukha_pfp.png
diff --git a/public/mihika-profilepic.jpeg b/public/mihika-profilepic.jpeg
diff --git a/public/ml_pfp.jpg b/public/ml_pfp.jpg
diff --git a/public/shivam.png b/public/shivam.png
diff --git a/src/Home.jsx b/src/Home.jsx
@@ -1,24 +1,28 @@
-import React, { useState} from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
 
 export default function Home() {
-
   const [showOutline, setShowOutline] = useState(false);
 
-  // Names and images for each profile 
+  // Names and images for each profile
   const profileData = [
-    { name: "Ryan(Demo)", imageSrc: "/ryanpic.jpg" },  // Feel free to remove demo page whenever you want
-    { name: "Person1", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person2", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person3", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person4", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person5", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person6", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person7", imageSrc: "/defaultpfp.jpg" },
+    { name: "Ryan(Demo)", imageSrc: "/ryanpic.jpg" }, // Feel free to remove demo page whenever you want
+    { name: "Mayukha", imageSrc: "/mayukha_pfp.png" },  // Feel free to remove demo page whenever you want
+    { name: "Shivam", imageSrc: "/shivam.png" },
+    { name: "Ronald Tsai", imageSrc: "/RonaldPhoto.jpg" },
+    { name: "Matthew", imageSrc: "/ml_pfp.jpg" },
+    { name: "Mihika", imageSrc: "/public/mihika-profilepic.jpeg" },
+    {
+      name: "Pradyun Tandra",
+      imageSrc:
+        "https://media.licdn.com/dms/image/v2/D5603AQH156V3qNZ3Wg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1709673303373?e=1735171200&v=beta&t=slV4nVpzXIH3_0x8pzmF6ezu69WIg3-NCk_Bycv3I6Q",
+    },
+    { name: "Aaryan Bondre", imageSrc: "/aaryan.jpg" },
+    { name: "Anusha", imageSrc: "/anushapic.png" },
     { name: "Person8", imageSrc: "/defaultpfp.jpg" },
     { name: "Person9", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person10", imageSrc: "/defaultpfp.jpg" }
+    { name: "Person10", imageSrc: "/defaultpfp.jpg" },
   ];
 
   const toggleOutline = () => {
@@ -27,11 +31,19 @@ export default function Home() {
 
   return (
     <>
-      <div className={`min-h-screen w-screen bg-black flex flex-col ${showOutline ? 'outline' : ''}`}>
+      <div
+        className={`min-h-screen w-screen bg-black flex flex-col ${
+          showOutline ? "outline" : ""
+        }`}
+      >
         {/* Outline Toggle Button */}
         <div className="absolute top-4 right-4 flex items-center">
           <label className="switch">
-            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <input
+              type="checkbox"
+              checked={showOutline}
+              onChange={toggleOutline}
+            />
             <span className="slider round"></span>
           </label>
           <span className="ml-2 text-white">Toggle Outline</span>
@@ -45,15 +57,20 @@ export default function Home() {
 
         <div className="w-full flex flex-wrap justify-center px-48 gap-16 mb-12">
           {profileData.map((profile) => (
-            <div key={profile.name} className="w-48 h-48 flex flex-col items-center font-monument text-xl">
+            <div
+              key={profile.name}
+              className="w-48 h-48 flex flex-col items-center font-monument text-xl"
+            >
               <Link to={`/profile/${profile.name}`}>
                 <img
                   className="profile-img"
                   src={profile.imageSrc}
                   alt={`${profile.name}'s profile`}
                 />
               </Link>
-              <span className="text-white font-semibold mt-2">{profile.name}</span>
+              <span className="text-white font-semibold mt-2">
+                {profile.name}
+              </span>
             </div>
           ))}
         </div>
@@ -63,10 +80,16 @@ export default function Home() {
             <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
             <h1>[email protected]</h1>
             <div className="flex text-4xl pt-4 gap-4">
-              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank">
+              <a
+                href="https://www.instagram.com/hackthefuturepurdue/"
+                target="_blank"
+              >
                 <FaInstagram className="hover:animate-pop cursor-pointer" />
               </a>
-              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank">
+              <a
+                href="https://www.linkedin.com/company/hack-the-future-at-purdue/"
+                target="_blank"
+              >
                 <FaLinkedin className="hover:animate-pop cursor-pointer" />
               </a>
               <a href="https://github.com/Hack-the-Future" target="_blank">
@@ -76,11 +99,17 @@ export default function Home() {
           </div>
           <div className="flex-col pt-16 w-1/2"></div>
           <div className="flex-col justify-right px-8 pt-16">
-            <img src="/Logo.png" className="h-12 w-42 pl-12 mb-8 ml-6 object-right" alt="Logo" />
-            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+            <img
+              src="/Logo.png"
+              className="h-12 w-42 pl-12 mb-8 ml-6 object-right"
+              alt="Logo"
+            />
+            <h1 className="text-right">
+              Purdue University, West Lafayette, IN, 47906
+            </h1>
           </div>
         </div>
       </div>
     </>
   );
-}
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,24 +1,33 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { useParams } from "react-router-dom";
+import "./index.css";
+import Home from "./Home.jsx";
+import Example from "./pages/example.jsx";
+import PradyunTPage from "./pages/PradyunTPage.jsx";
 import DemoPage from './pages/demoPage.jsx'
-import './index.css'
-import Home from './Home.jsx'
-import Example from './pages/example.jsx';
+import RonaldPage from './pages/RonaldPage.jsx'
+import MatthewPage from './pages/MatthewPage'
+import ShivamPage from './pages/shivamPage.jsx';
+import Mihika from "./pages/Mihika.jsx";
+import AnushaPage from "./pages/AnushaPage.jsx";
+import AaryanPage from "./pages/aaryanPage.jsx";
+import MayukhaPage from "./pages/mayukhaPage.jsx";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <Router>
       <Routes>
-        <Route path='/' element={<Home />} />
-        <Route path='/example' element={<Example />} />
-        <Route path='/demo' element={<DemoPage />} />
-        <Route path='/profile/:name' element={<ProfileRouter />} />
+        <Route path="/" element={<Home />} />
+        <Route path="/example" element={<Example />} />
+        <Route path="/demo" element={<DemoPage />} />
+        <Route path="/mihika" element={<Mihika />} />
+        <Route path="/profile/:name" element={<ProfileRouter />} />
       </Routes>
     </Router>
-  </StrictMode>,
-)
+  </StrictMode>
+);
 
 function ProfileRouter() {
   const { name } = useParams();
@@ -30,25 +39,26 @@ function ProfileRouter() {
     // Change <DemoPage /> to your custom profile page, and change the case to your name
     case "Person1":
       return <DemoPage />;
-    case "Person2":
-      return <DemoPage />;
-    case "Person3":
-      return <DemoPage />;
-    case "Person4":
-      return <DemoPage />;
+    case "Mayukha":
+      return <MayukhaPage />;
+    case "Anusha":
+      return <AnushaPage />;
+    case "Aaryan Bondre":
+      return <AaryanPage />;
+    case "Pradyun Tandra":
+      return <PradyunTPage />;
+    case "Shivam":
+      return <ShivamPage />;
+    case "Ronald Tsai":
+      return <RonaldPage />;
+    case "Matthew":
+      return <MatthewPage />;
+    case "Mihika":
+      return <Mihika />;
     case "Person5":
       return <DemoPage />;
-    case "Person6":
-      return <DemoPage />;
-    case "Person7":
-      return <DemoPage />;
-    case "Person8":
-        return <DemoPage />;
-    case "Person9":
-      return <DemoPage />;
-    case "Person10":
-      return <DemoPage />;
+
     default:
       return <div>Profile not found</div>;
   }
-}
+}
diff --git a/src/pages/AnushaPage.jsx b/src/pages/AnushaPage.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function AnushaPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../anushapic.png" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Anusha Kumar</h2>
+            <h3 className="text-xl mt-2">Developer</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Computer science student at Purdue University from Plainsboro, NJ.
+              1st year in Hack the Future; love to play tennis and be outdoors!
+            </p>
+          </div>
+          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://www.linkedin.com/in/anusha-kumar-6a26bb1aa/" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/anushakumar05" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.instagram.com/anushakumarr_/" target="_blank" rel="noreferrer">
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>[email protected]</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank" rel="noreferrer">
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/Hack-the-Future" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}