Released 2024 version (#47)

* 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

README.md

@@ -9,11 +9,11 @@
 </p>
 
 <p align="center">
- This is the source code of <a href="https://afnizarnur.com/">my personal site</a>. Proudly built with Eleventy and hosted in Netlify.
+ This is the source code of <a href="https://afnizarnur.com/">my personal site</a>. Handcrafted with 11ty and hosted in Netlify.
 </p>
 
 <p align="center">
-  <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2013">2013</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2019">2019</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2020">2020</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2022">2022</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/">Live</a>
+  <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2013">2013</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2019">2019</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2020">2020</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2022">2022</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/tree/2023">2023</a> · <a href="https://github.com/afnizarnur/afnizarnur.com/">Live</a>
 </p>
 
 ---
@@ -42,4 +42,4 @@ Clone the repository and install the dependencies:
 
 ## License
 
-MIT © [Afnizar Nur Ghifari](https://github.com/afnizarnur/afnizarnur.com)
+This website is my personal project, and I've chosen to share its source code openly for educational purposes. However, please note that **it's not a template**. Feel free to incorporate portions of the code into your own website, giving proper attribution to the author is appreciated.

src/404.njk

@@ -3,9 +3,11 @@ layout: base
 eleventyExcludeFromCollections: true
 ---
 
+{% include "userinfo.njk" %}
+{% include "header.njk" %}
+
 <div class="container work">
     <r-grid columns="12" columns-s="4">
-        {% include "header.njk" %}
         {% include "404.njk" %}
     </r-grid>
 </div>

src/assets/scripts/main.js

@@ -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"

src/assets/scripts/modules/animation.js

@@ -1,16 +1,10 @@
 import { gsap } from "gsap"
 import { ScrollTrigger } from "gsap/ScrollTrigger"
 import { Draggable } from "gsap/Draggable"
-import SplitType from "split-type"
 
 gsap.registerPlugin(ScrollTrigger, Draggable)
 
 document.addEventListener("DOMContentLoaded", function () {
-	const typeSplit = new SplitType("[text-split]", {
-		types: "words, chars",
-		tagName: "span"
-	})
-
 	function createScrollTrigger(triggerElement, timeline) {
 		ScrollTrigger.create({
 			trigger: triggerElement,
@@ -60,8 +54,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
 			timelines[rowIndex].fromTo(
 				card,
-				{ opacity: 0 },
-				{ opacity: 1, duration: 0.4 },
+				{ opacity: 0, y: 50 }, // Initial opacity and y position
+				{ opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, // Target opacity and y position
 				index % 2 === 0 ? 0 : 0.2 // Staggered delay within the row
 			)
 		})
@@ -70,7 +64,7 @@ document.addEventListener("DOMContentLoaded", function () {
 			const rowStart = index === 0 ? "top 90%" : `top+=${index * 10}%`
 			ScrollTrigger.create({
 				trigger: cards[index * 2],
-				start: rowStart,
+				start: "top bottom", // Ensure animation starts when the top of the trigger reaches the bottom of the viewport
 				onEnter: () => timeline.play()
 			})
 		})
@@ -97,23 +91,27 @@ document.addEventListener("DOMContentLoaded", function () {
 		zIndexBoost: false
 	})
 
-	// Animation text reveal
-	const textRevealElements = document.querySelectorAll("[letters-slide-up]")
-	textRevealElements.forEach(animateTextReveal)
-
 	// Animation on selected work
 	const selectedWorkItems = document.querySelectorAll(".selected-work--item")
-	selectedWorkItems.forEach(animateSelectedWork)
+	if (selectedWorkItems && selectedWorkItems.length > 0) {
+		selectedWorkItems.forEach(animateSelectedWork)
+	}
 
 	// Animation on design tooling cards
 	const designToolingCards = document.querySelectorAll(".design-tooling-card")
-	animateCardStagger(designToolingCards)
+	if (designToolingCards && designToolingCards.length > 0) {
+		animateCardStagger(Array.from(designToolingCards))
+	}
 
 	// Animation on other work cards
 	const nextProjectCard = document.querySelectorAll(".other-work-card")
-	animateCardStagger(nextProjectCard)
+	if (nextProjectCard && nextProjectCard.length > 0) {
+		animateCardStagger(Array.from(nextProjectCard))
+	}
 
 	// Avoid flash of unstyled content
 	const textSplitElements = document.querySelectorAll("[text-split]")
-	gsap.set(textSplitElements, { opacity: 1 })
+	if (textSplitElements && textSplitElements.length > 0) {
+		gsap.set(textSplitElements, { opacity: 1 })
+	}
 })

src/assets/scripts/modules/modal.js

@@ -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")

src/assets/scripts/modules/quick-nav-about.js

@@ -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()
+})

src/assets/scripts/modules/site-version.js

@@ -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)

src/assets/scripts/modules/smooth-scroll.js

@@ -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()

src/assets/scripts/modules/spotify.js

@@ -1,16 +1,9 @@
-/**
- * @author afnizarnur
- * @email hi@afnizarnur.com
- * @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>`
 		}
 	}
 }