initial commit (i think)

orn8 · Nov 23, 2024 · 487ae5c · 487ae5c
1 parent 61bb793
commit 487ae5c
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 8 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - oragne.dev</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="index.html">Projects</a></li>
+        <li><a href="about.html" class="active">About</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <section id="about">
+    <h1>About Me</h1>
+    <p>Welcome to the about page of oragne! Here you can learn more about me and my work.</p>
+  </section>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -4,14 +4,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>oragne.dev</title>
-  <link rel="stylesheet" href="styles/style.css">
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <!-- Navigation Bar -->
   <nav>
     <ul>
-      <li><a href="#projects" class="active">Projects</a></li>
-      <li><a href="#about">About</a></li>
+      <li><a href="index.html" class="active">Projects</a></li>
+      <li><a href="about.html">About</a></li>
     </ul>
   </nav>
 
@@ -32,13 +32,18 @@ <h1>oragne</h1>
   <!-- Projects Section -->
   <section id="projects">
     <div class="projects-grid">
-      <div class="repo" data-name="Repo1" data-description="This is a description of Repo1">
-      </div>
-      <div class="repo" data-name="Repo2" data-description="This is a description of Repo2">
-      </div>
+      <div class="repo" data-name="tinfoil" data-description="A *.json file with working Tinfoil shops on it.">
+      <div class="repo" data-name="ipa" data-description="An iPA repo for the wackiest apps I've found."></div>
+      <div class="repo" data-name="vanishgames" data-description="Unblocked games, but better. (Educational purposes only)"></div>
+      <div class="repo" data-name="kahootfetcher" data-description="Fetch a Kahoot's answers. (Educational purposes only)"></div>
+      <div class="repo" data-name="discord" data-description="A collection of my plugins, themes, and tools for Discord mod clients."></div>
+      <div class="repo" data-name="oragne.dev" data-description="My website portfolio."></div>
+      <div class="repo" data-name="sga" data-description="A tool to help you learn the Standard Galactic Alphabet."></div>
+      <div class="repo" data-name="tetr-zen" data-description="A script to log Zen progression over time in TETR.IO."></div>
+      <div class="repo" data-name="micro-games" data-description="Simple games for the micro:bit."></div>
     </div>
   </section>
 
-  <script src="scripts/script.js"></script>
+  <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,52 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const repos = document.querySelectorAll(".repo");
+
+    repos.forEach((repo, index) => {
+      const name = repo.dataset.name;
+      const description = repo.dataset.description;
+      const repoLink = `https://github.com/orn8/${name}`;
+
+      const nameContainer = document.createElement("a");
+      nameContainer.href = repoLink;
+      nameContainer.classList.add("repo-name");
+      nameContainer.textContent = "_".repeat(name.length);
+      nameContainer.target = "_blank";
+      nameContainer.rel = "noopener noreferrer";
+
+      repo.appendChild(nameContainer);
+
+      const descElement = document.createElement("p");
+      descElement.classList.add("repo-desc");
+      descElement.textContent = description;
+      repo.appendChild(descElement);
+
+      const repoIcon = document.createElement("img");
+      repoIcon.src = "assets/repo-icon.png";
+      repoIcon.alt = "GitHub Repo Icon";
+      repoIcon.classList.add("repo-icon");
+      repo.prepend(repoIcon);
+
+      repo.style.transition = `opacity 1s ease-in-out, transform 1s ease-in-out`;
+      setTimeout(() => {
+        repo.style.opacity = 1;
+        repo.style.transform = "translateY(0)";
+      }, 500 + index * 200);
+
+      repo.addEventListener("transitionend", (event) => {
+        if (event.propertyName === "opacity") {
+          let delay = 0;
+          const typeEffect = setInterval(() => {
+            if (delay < name.length) {
+              const currentText = name.slice(0, delay + 1);
+              const remainingUnderscores = "_".repeat(name.length - delay - 1);
+              nameContainer.textContent = currentText + remainingUnderscores;
+              delay++;
+            } else {
+              clearInterval(typeEffect);
+            }
+          }, 100);
+        }
+      });
+    });
+  });
+
diff --git a/style.css b/style.css
@@ -0,0 +1,106 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #1a1a1a;
+    color: #f5f5f5;
+  }
+
+  nav {
+    background: transparent;
+    padding: 10px 20px;
+  }
+
+  nav ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  nav li {
+    margin-right: 20px;
+  }
+
+  nav a {
+    text-decoration: none;
+    color: #f5f5f5;
+  }
+
+  nav a.active {
+    color: #FC6A04;
+  }
+
+  nav a:hover {
+    color: #fed8b1;
+  }
+
+  #profile {
+    text-align: center;
+    margin-top: 50px;
+  }
+
+  .profile-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 30px;
+  }
+
+  .profile-pic {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    margin-right: 40px;
+  }
+
+  .profile-info h1 {
+    margin: 0;
+    font-size: 48px;
+    color: #f5f5f5;
+  }
+
+  .discord-badges img {
+    width: 60px;
+    margin-right: 10px;
+  }
+
+  /* Projects Section */
+  #projects {
+    margin-top: 50px;
+  }
+
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+    padding: 20px;
+  }
+
+  .repo {
+    background-color: #262626;
+    border-radius: 8px;
+    padding: 15px;
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+
+  .repo img {
+    width: 20px;
+    vertical-align: middle;
+  }
+
+  .repo-name {
+    font-size: 18px;
+    color: #FC6A04;
+    text-decoration: none;
+    transition: color 0.3s ease-in-out;
+  }
+
+  .repo-name:hover {
+    color: #fed8b1;
+  }
+
+  .repo-desc {
+    color: #a0a0a0;
+  }
+