From 8abee5cce12f32eeb8c36e12abde30e6f056ca83 Mon Sep 17 00:00:00 2001
From: Josh Patra <30350506+SoPat712@users.noreply.github.com>
Date: Mon, 7 Apr 2025 21:46:49 -0400
Subject: [PATCH] Clean portfolio redesign

---
 src/App.css | 21 +++++++++++++++++
 src/App.js  | 66 ++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index 74b5e05..6e66d4f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,24 @@
     transform: rotate(360deg);
   }
 }
+
+.dropdown-button {
+  background-color: #61dafb;
+  color: black;
+  padding: 10px 20px;
+  margin: 10px;
+  border: none;
+  border-radius: 5px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.dropdown-button:hover {
+  background-color: #4bb0e5;
+}
+
+.dropdown {
+  margin-top: 10px;
+  text-align: left;
+}
diff --git a/src/App.js b/src/App.js
index 501a597..701004c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,64 @@
-import logo from "./logo.svg";
+import React, { useState, useEffect } from "react";
 import "./App.css";
 
 function App() {
+  const [loading, setLoading] = useState(true);
+  const [showJobs, setShowJobs] = useState(false);
+  const [showGrades, setShowGrades] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setLoading(false), 1000); // preload effect
+    return () => clearTimeout(timeout);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="App">
+        <h2>Loading portfolio...</h2>
+      </div>
+    );
+  }
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Josh Patra's Portfolio</p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <h1>Josh Park</h1>
+        <p>Computer Science Student at [Your University]</p>
+        <p>GPA: 3.87</p>
+        <div style={{ marginTop: "20px" }}>
+          <button
+            onClick={() => setShowGrades(!showGrades)}
+            className="dropdown-button"
+          >
+            {showGrades ? "Hide Classes & Grades" : "Show Classes & Grades"}
+          </button>
+          {showGrades && (
+            <div className="dropdown">
+              <ul>
+                <li>CS 323: A</li>
+                <li>CS 214: A</li>
+                <li>Math 428: A</li>
+                <li>CS 352: A</li>
+              </ul>
+            </div>
+          )}
+
+          <button
+            onClick={() => setShowJobs(!showJobs)}
+            className="dropdown-button"
+          >
+            {showJobs ? "Hide Work Experience" : "Show Work Experience"}
+          </button>
+          {showJobs && (
+            <div className="dropdown">
+              <ul>
+                <li>Software Intern @ TechCorp (Summer 2024)</li>
+                <li>IT Assistant @ University (2023–2024)</li>
+                <li>Freelance Developer (2022–Present)</li>
+              </ul>
+            </div>
+          )}
+        </div>
       </header>
     </div>
   );