-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Remove sidebar on homepage * Moving header to different root Also hide the other component to avoid breaking * Fix issue on header & spacing in selected work * Add toolbar * Add all component in homepage and fix it * Fix many spacings in homepage * fix footer * Add built with * Add responsive for userinfo and header * Fix responsive header * Fix a lot of things until design tooling section * Fix on skills * Fix spacing on homepage and responsiveness * Change styling for nav mobile * Remove block on about page * Add responsiveness in about section for top component * Fix some spacing in history and career highlights * Added some spacing on outside work * Fix structure of about page * Add tablet view for about page * Update margin for .commit-code in _userinfo.scss * Update margins in about page and remove quick navigation * Refactor quick-nav styles and add active state * Add quick navigation to About page * Refactor quick-nav component styles * Refactor work page styles and structure * Update quick-nav and social-nav styles, fix contact page layout, and remove unused code * Refactor contact page styles * Refactor work component styles * Update padding and margin in work components * Update padding and margin in responsive styles * Update margins in _work.scss for different screen sizes * Refactor work page styles and tags * Refactor tags styling and remove unnecessary code * Update 404 page layout and styles * Update margin values in stylesheets * Update selected work header * Update animation.js with opacity and y position changes * Update images and resume * Refactor footer styling * Refactor footer styles and layout * Update hosting information in footer * Update branch * Update links and styles in README and footer.scss * Update select component styles * Update footer styles in _footer.scss * Update select component styles * Update pattern-line.png image * Refactor select component styles and add custom select dropdown * Update footer and select styles * Update footer styles and add icon to version display * Update textDisabled and surfaceDefault colors in themes.json * Add smooth-scroll module * Refactor SpotifyFetcher class to update from local storage and fetch new data * Update footer styles for mobile responsiveness * Add tooltip styling * Update meta-image.png * Add modal component and import it in main.js and main.scss * Update modal animation and styles * Refactor modal functionality and add theme switcher * Refactor modal initialization and update theme switcher * Fix return statement in modal.js * Update main.js and theme-switcher.scss * Add position and transition to theme switcher button * Refactor theme picker module and add theme switcher modal * Update modal background color and opacity * Add theme switch functionality to theme picker * Fix modal display issue * Update theme switcher functionality and styles * Update modal overlay color in _modal.scss and themes.json * Update theme-switcher buttons with umami event tracking * Refactor theme-switcher module and remove unused imports * Refactor theme picker module and update related references * Update modal animation duration * Add umami tracking for footer link * Update Spotify link and theme switcher events * Refactor animation.js and remove text-split plugin * Update website source code and links * Fix theme switcher checkbox behavior * Remove unused variable switchCheckbox * Refactor theme switcher logic and preferences
- Loading branch information
1 parent
a64aae8
commit d425209
Showing
91 changed files
with
1,659 additions
and
1,362 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,15 @@ | ||
| // import "focus-visible" | ||
| import "focus-visible" | ||
|
|
||
| // Internal Modules | ||
| import "./modules/animation" | ||
| import "./modules/nav" | ||
| import "./modules/themepicker" | ||
| import "./modules/spotify" | ||
| import "./modules/clipboard" | ||
| import "./modules/local-time" | ||
| import "./modules/quick-nav-about" | ||
| import "./modules/site-version" | ||
| import "./modules/rec-accordion" | ||
| import "./modules/smooth-scroll" | ||
| import "./modules/modal" | ||
| import "./modules/theme-switcher" | ||
| import "./modules/preload" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| function initializeModal(modalIdentifier) { | ||
| const modal = document.querySelector(`.${modalIdentifier}`) | ||
| const button = document.querySelector(`.${modalIdentifier}-button`) | ||
| const content = modal.querySelector(`.${modalIdentifier}--content`) | ||
| const closeButton = content.querySelector( | ||
| `.${modalIdentifier}--close-button` | ||
| ) | ||
| const overlay = modal.querySelector(`.${modalIdentifier}--overlay`) | ||
|
|
||
| if (!modal || !button || !content || !closeButton || !overlay) { | ||
| return | ||
| } | ||
|
|
||
| const openModal = () => { | ||
| modal.style.display = "block" | ||
| modal.setAttribute("aria-hidden", "false") | ||
| document.body.style.overflow = "hidden" | ||
| } | ||
|
|
||
| const closeModal = () => { | ||
| content.style.animation = "slideOutToTop 0.4s ease-in forwards" | ||
| overlay.style.animation = "hideModal 0.4s ease-in" | ||
|
|
||
| setTimeout(() => { | ||
| modal.style.display = "none" | ||
| modal.setAttribute("aria-hidden", "true") | ||
| document.body.style.overflow = "" | ||
| content.style.animation = "" | ||
| overlay.style.animation = "" | ||
| }, 400) | ||
| } | ||
|
|
||
| button.addEventListener("click", openModal) | ||
|
|
||
| closeButton.addEventListener("click", closeModal) | ||
|
|
||
| overlay.addEventListener("click", (e) => { | ||
| if (e.target === overlay) { | ||
| closeModal() | ||
| } | ||
| }) | ||
|
|
||
| modal.addEventListener("keydown", (e) => { | ||
| if (e.key === "Escape" || e.keyCode === 27) { | ||
| closeModal() | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| initializeModal("modal-theme-switcher") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| class QuickNavAbout { | ||
| constructor() { | ||
| this.quickNav = document.querySelector(".quick-nav") | ||
| this.navLinks = document.querySelectorAll(".quick-nav a") | ||
| this.sections = [] | ||
|
|
||
| if (this.quickNav) { | ||
| this.collectSections() | ||
| const longIntroSection = document.getElementById("long-intro") | ||
| if (longIntroSection) { | ||
| this.sectionStart = longIntroSection.offsetTop | ||
| this.addEventListeners() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| collectSections() { | ||
| this.navLinks.forEach((link) => { | ||
| const sectionId = link.getAttribute("href").slice(1) | ||
| const section = document.getElementById(sectionId) | ||
| if (section) { | ||
| this.sections.push({ link, section }) | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| addEventListeners() { | ||
| window.addEventListener("scroll", () => { | ||
| this.handleScroll() | ||
| this.updateActiveLink() | ||
| }) | ||
| } | ||
|
|
||
| handleScroll() { | ||
| if (window.scrollY >= this.sectionStart - this.quickNav.offsetHeight) { | ||
| this.quickNav.classList.add("show-nav") | ||
| } else { | ||
| this.quickNav.classList.remove("show-nav") | ||
| } | ||
| } | ||
|
|
||
| updateActiveLink() { | ||
| let currentSection = null | ||
| this.sections.forEach((s) => { | ||
| const sectionTop = s.section.offsetTop - window.innerHeight / 2 // mid-point strategy | ||
| const sectionBottom = sectionTop + s.section.offsetHeight | ||
| if ( | ||
| window.scrollY >= sectionTop && | ||
| window.scrollY < sectionBottom | ||
| ) { | ||
| currentSection = s.link | ||
| } | ||
| }) | ||
|
|
||
| this.navLinks.forEach((link) => { | ||
| link.parentNode.classList.remove("active") | ||
| }) | ||
|
|
||
| if (currentSection) { | ||
| currentSection.parentNode.classList.add("active") | ||
| } | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener("DOMContentLoaded", function () { | ||
| new QuickNavAbout() | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| function navigateToUrl() { | ||
| var selectElement = document.getElementById("select-version") | ||
| var selectedYear = selectElement.options[selectElement.selectedIndex].value | ||
| if (selectedYear !== "2024") { | ||
| var url = "https://" + selectedYear + ".afnizarnur.com/" | ||
| window.open(url, "_blank") | ||
| window.umami.track("footer-" + selectedYear) | ||
| selectElement.value = "2024" | ||
| } | ||
| } | ||
|
|
||
| document | ||
| .getElementById("select-version") | ||
| .addEventListener("change", navigateToUrl) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export function smoothScrollToAnchor() { | ||
| document.querySelectorAll('a[href^="#"]').forEach((anchor) => { | ||
| anchor.addEventListener("click", function (e) { | ||
| e.preventDefault() | ||
|
|
||
| document.querySelector(this.getAttribute("href")).scrollIntoView({ | ||
| behavior: "smooth" | ||
| }) | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| smoothScrollToAnchor() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,9 @@ | ||
| /** | ||
| * @author afnizarnur | ||
| * @email [email protected] | ||
| * @create date 02-07-2023 10:05:55 | ||
| * @modify date 02-07-2023 10:05:55 | ||
| * @desc Spotify component fetcher | ||
| */ | ||
|
|
||
| class SpotifyFetcher { | ||
| constructor() { | ||
| this.paragraph = document.getElementById("current-song") | ||
| if (this.paragraph) { | ||
| this.fetchSpotify() | ||
| this.updateFromLocalStorage() // Update from local storage if available | ||
| this.fetchSpotify() // Fetch new data | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -22,21 +15,37 @@ class SpotifyFetcher { | |
| const artistName = data.artists[0].name | ||
| const url = data.url | ||
| this.updateParagraph(songTitle, artistName, url) | ||
| // Store the fetched data in local storage | ||
| localStorage.setItem( | ||
| "spotifyData", | ||
| JSON.stringify({ songTitle, artistName, url }) | ||
| ) | ||
| }) | ||
| .catch((error) => { | ||
| console.error(error) | ||
| }) | ||
| } | ||
|
|
||
| updateFromLocalStorage() { | ||
| const storedData = JSON.parse(localStorage.getItem("spotifyData")) | ||
| if (storedData) { | ||
| this.updateParagraph( | ||
| storedData.songTitle, | ||
| storedData.artistName, | ||
| storedData.url | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| updateParagraph(songTitle, artistName, url) { | ||
| if (this.paragraph) { | ||
| this.paragraph.innerHTML = ` | ||
| <div class="equalizer-container"> | ||
| <div class="equalizer-bar"></div> | ||
| <div class="equalizer-bar"></div> | ||
| <div class="equalizer-bar"></div> | ||
| </div> | ||
| <a href="${url}" data-umami-event="footer-spotify" target="_blank">${songTitle} by ${artistName}</a>` | ||
| <div class="equalizer-container"> | ||
| <div class="equalizer-bar"></div> | ||
| <div class="equalizer-bar"></div> | ||
| <div class="equalizer-bar"></div> | ||
| </div> | ||
| <a href="${url}" data-umami-event="userinfo-spotify" target="_blank">${songTitle} by ${artistName}</a>` | ||
| } | ||
| } | ||
| } | ||
|
|
||
Oops, something went wrong.