diff --git a/about.html b/about.html deleted file mode 100644 index 117c669..0000000 --- a/about.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - 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/assets/hypesquad-badge.png b/assets/hypesquad-badge.png new file mode 100644 index 0000000..6eeb21d Binary files /dev/null and b/assets/hypesquad-badge.png differ diff --git a/assets/profile-pic.jpg b/assets/profile-pic.jpg new file mode 100644 index 0000000..d3d0ca7 Binary files /dev/null and b/assets/profile-pic.jpg differ diff --git a/assets/quest-badge.png b/assets/quest-badge.png new file mode 100644 index 0000000..91de45a Binary files /dev/null and b/assets/quest-badge.png differ diff --git a/script.js b/script.js index 45e35b3..b254c27 100644 --- a/script.js +++ b/script.js @@ -1,52 +1,51 @@ 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); - } - }); + 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 +}); \ No newline at end of file diff --git a/style.css b/style.css index c5373c1..88d96c0 100644 --- a/style.css +++ b/style.css @@ -1,106 +1,105 @@ 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 + 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