Merge pull request #2 from ZionMiller/simple-react-copy

SPA react tailwind refresh of personal site
ZionMiller · Aug 26, 2024 · b3bfbfc · b3bfbfc
2 parents 9b15241 + 6de41b0
commit b3bfbfc
Show file tree

Hide file tree

Showing 51 changed files with 18,347 additions and 10,144 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,22 +6,20 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
     "axios": "^1.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1",
-    "react-responsive": "^9.0.0",
+    "react-icons": "^4.12.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
-    "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.3",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build && cp _redirects build/",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/index.html b/public/index.html
@@ -33,7 +33,7 @@
 
     <title>Zion Miller</title>
   </head>
-  <body style="background-color: #e8eed8;">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/public/zion-headshot.jpg b/public/zion-headshot.jpg
diff --git a/public/zion-logo.png b/public/zion-logo.png
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
+import Home from './pages/Home';
+
+function App() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <Home />
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/Images/CardGamee.png b/src/Images/CardGamee.png
diff --git a/src/Images/Flashcards.png b/src/Images/Flashcards.png
diff --git a/src/Images/Flights.png b/src/Images/Flights.png
diff --git a/src/Images/JS-icon.png b/src/Images/JS-icon.png
diff --git a/src/Images/biobreak_icon.png b/src/Images/biobreak_icon.png
diff --git a/src/Images/biobreak_logo.png b/src/Images/biobreak_logo.png
diff --git a/src/Images/coderkeys.png b/src/Images/coderkeys.png
diff --git a/src/Images/techs.png b/src/Images/techs.png
diff --git a/src/Images/zion-prof.png b/src/Images/zion-prof.png
diff --git a/src/components/About.js b/src/components/About.js
@@ -0,0 +1,87 @@
+import { FaLinkedin, FaGithub, FaTwitter, FaMedium } from 'react-icons/fa';
+import profileData from '../utils/me';
+
+const About = () => {
+  return (
+    <div id="about" className="relative overflow-hidden">
+      <div className="max-w-7xl mx-auto flex flex-col lg:flex-row lg:items-center lg:justify-between">
+        <div className="relative w-full lg:w-1/2 flex justify-center lg:pr-20 lg:py-16 md:py-8 sm:py-4">
+          <div className="w-full max-w-xs lg:max-w-sm h-80 lg:h-96 overflow-hidden rounded-lg">
+            <img
+              className="w-full h-full object-cover object-center rounded-lg"
+              src="/zion-headshot.jpg"
+              alt="Zion Miller Headshot"
+            />
+          </div>
+        </div>
+        <div className="relative lg:w-1/2 lg:pl-12 mb-10">
+          <main className="mt-24 px-4 sm:mt-28 sm:px-6 md:mt-32 lg:mt-36 lg:px-0">
+            <div className="sm:text-center lg:text-left mb-20">
+              <h2 className="my-12 text-2xl tracking-tight font-extrabold text-gray-900 sm:text-3xl md:text-4xl">
+                About {profileData.name}:
+              </h2>
+              <p className="text-lg text-gray-700">
+                {profileData.bio}
+              </p>
+
+              <div className="flex justify-center lg:justify-start mt-12 space-x-6">
+                {profileData.socials?.linkedIn && (
+                  <a
+                    href={profileData.socials.linkedIn}
+                    className="text-gray-600 hover:text-blue-500"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <FaLinkedin size={24} />
+                  </a>
+                )}
+                {profileData.socials?.github && (
+                  <a
+                    href={profileData.socials.github}
+                    className="text-gray-600 hover:text-gray-800"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <FaGithub size={24} />
+                  </a>
+                )}
+                {profileData.socials?.twitter && (
+                  <a
+                    href={profileData.socials.twitter}
+                    className="text-gray-600 hover:text-blue-400"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <FaTwitter size={24} />
+                  </a>
+                )}
+                {profileData.socials?.medium && (
+                  <a
+                    href={profileData.socials.medium}
+                    className="text-gray-600 hover:text-black"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <FaMedium size={24} />
+                  </a>
+                )}
+                {profileData.socials?.leetcode && (
+                  <a
+                    href={profileData.socials.leetcode}
+                    className="text-gray-600 hover:text-orange-500"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    LeetCode
+                  </a>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default About;
diff --git a/src/components/App.tsx b/src/components/App.tsx
diff --git a/src/components/Blog.tsx b/src/components/Blog.tsx