Knight Hacks Dev application

apps/blade/src/app/ethanzeng/ethanzeng.module.css

@@ -0,0 +1,77 @@
+.introPage {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  gap: 2rem;
+  padding: 2rem;
+  min-height: 100vh;
+  min-width: 100vw;
+  text-align: center;
+  background-color: #018281;
+  overflow: hidden;
+  font-family: system-ui, sans-serif;
+}
+
+@font-face {
+  font-family: 'Chicago';
+  src: url('/Chicago.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon {
+  font-family: 'Chicago', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon p {
+  color: white;
+  margin: 0;
+  padding: 0;
+}
+
+.icon:hover {
+  outline: 0.05px solid white;
+  background-color: rgba(255, 255, 255, 0.728);
+  backdrop-filter: blur(1.5px);
+}
+
+.modalBackdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modalContent {
+  font-family: 'Chicago', sans-serif;
+  color: black;
+  background-color: #ffffff;
+  padding: 2rem;
+  width: 600px;
+  max-height: 80vh;
+  overflow-y: auto;
+  text-align: start;
+  position: relative;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+}
+
+.closeBtn {
+  border: 2mm inset rgb(160, 160, 160);
+  background-color: rgb(187, 187, 187);
+  color: black;
+  position: absolute;
+  transform: scale(0.4);
+  top: -12px;
+  right: -15px;
+  font-size: 1rem;
+  cursor: pointer;
+}

apps/blade/src/app/ethanzeng/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from 'react'
+import { FaGithubSquare, FaLinkedin, FaRegFilePdf } from "react-icons/fa"
+import { IoDocumentTextOutline } from "react-icons/io5"
+import { FaRegIdCard } from "react-icons/fa"
+import styles from './ethanzeng.module.css'
+
+const resume = '/resume.pdf'
+
+export default function EthanZengPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const introContent = {
+    title: "Ethan Zeng",
+    body: (
+      <>
+        <p>
+          Hi, This is my application for the KnightHacks dev team.
+          I know it's simple, but I if I'm being completely honest I was pressed for time between school and finishing my portfolio.
+        </p>
+        <p>
+          With that said, I’m interested in the position because I want to be more involved with the club and the people in it.
+          I also want to improve my skills and I see this as a great environment to do so.
+          In general the people and environment at KnightHacks seem really welcoming and fun, and I would love to be a part of it.
+        </p>
+      </>
+    )
+  }
+
+  return (
+    <main className={styles.introPage}>
+
+      <div className={styles.icon} onClick={() => setIsModalOpen(true)}>
+        <IoDocumentTextOutline size={80} color="#ffffff"/>
+        <p>Intro</p>
+      </div>
+
+      <div className={styles.icon}>
+        <a href="https://github.com/eethie" target="_blank" rel="noopener noreferrer">
+          <FaGithubSquare size={80} color="#000000"/>
+          <p>GitHub</p>
+        </a>
+      </div>
+
+      <div className={styles.icon}>
+        <a href="https://linkedin.com/in/ethanzzeng" target="_blank" rel="noopener noreferrer">
+          <FaLinkedin size={80} color="#0077b5"/>
+          <p>LinkedIn</p>
+        </a>
+      </div>
+
+      <div className={styles.icon}>
+        <a href={resume} target="_blank" rel="noopener noreferrer">
+          <FaRegFilePdf size={80} color="#ffffff"/>
+          <p>Resume</p>
+        </a>
+      </div>
+
+      <div className={styles.icon}>
+        <a href="https://ethanzeng.dev" target="_blank" rel="noopener noreferrer">
+          <FaRegIdCard size={80} color="#E31C2D"/>
+          <p>Portfolio</p>
+        </a>
+      </div>
+
+      {isModalOpen && (
+        <div className={styles.modalBackdrop} onClick={() => setIsModalOpen(false)}>
+          <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+            <button className={styles.closeBtn} onClick={() => setIsModalOpen(false)}>✕</button>
+            <h2>{introContent.title}</h2>
+            {introContent.body}
+          </div>
+        </div>
+      )}
+
+    </main>
+  )
+}