From 487ae5c7fa16384cb8bd12edb5d520d3046bae51 Mon Sep 17 00:00:00 2001 From: oragne Date: Sat, 23 Nov 2024 11:08:22 +1100 Subject: [PATCH] initial commit (i think) --- about.html | 24 ++++++++++++ index.html | 21 +++++++---- script.js | 52 ++++++++++++++++++++++++++ style.css | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 195 insertions(+), 8 deletions(-) create mode 100644 about.html create mode 100644 script.js create mode 100644 style.css diff --git a/about.html b/about.html new file mode 100644 index 0000000..117c669 --- /dev/null +++ b/about.html @@ -0,0 +1,24 @@ + + + + + + About - oragne.dev + + + +
+ +
+ +
+

About Me

+

Welcome to the about page of oragne! Here you can learn more about me and my work.

+
+ + diff --git a/index.html b/index.html index 4a9b948..3ac6772 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,14 @@ oragne.dev - + @@ -32,13 +32,18 @@

oragne

-
-
-
-
+
+
+
+
+
+
+
+
+
- + diff --git a/script.js b/script.js new file mode 100644 index 0000000..45e35b3 --- /dev/null +++ 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); + } + }); + }); + }); + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c5373c1 --- /dev/null +++ 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; + } + \ No newline at end of file