Add touch event listeners to avatar element

YousifAbozid · Feb 29, 2024 · d5f1092 · d5f1092
1 parent 3cb838f
commit d5f1092
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/app/about/page.js b/app/about/page.js
@@ -1,11 +1,33 @@
+'use client'
+
 import Image from 'next/image'
+import { useEffect } from 'react'
 
 /**
  * Renders the About component.
  *
  * @return {JSX.Element} A div container with the class name "about_container".
  */
 export default function About() {
+	useEffect(() => {
+		const handleTouchStart = () => {
+			document.querySelector('.avatar').classList.add('touched')
+		}
+
+		const handleTouchEnd = () => {
+			document.querySelector('.avatar').classList.remove('touched')
+		}
+
+		const avatar = document.querySelector('.avatar')
+		avatar.addEventListener('touchstart', handleTouchStart)
+		avatar.addEventListener('touchend', handleTouchEnd)
+
+		return () => {
+			avatar.removeEventListener('touchstart', handleTouchStart)
+			avatar.removeEventListener('touchend', handleTouchEnd)
+		}
+	}, [])
+
 	return (
 		<div className='about_container'>
 			<div className='avatar'>

diff --git a/styles/about/about.css b/styles/about/about.css
@@ -42,11 +42,12 @@
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
-	transform: scale(1.4) translateY(-7%);
+	transform: scale(1.4) translateY(-7%) rotate(0deg);
 	transition: all 0.8s ease;
 }
 
-.about_container .avatar:hover img {
+.about_container .avatar:hover img,
+.about_container .avatar.touched img {
 	transform: scale(2) translateY(7%) rotate(360deg);
 }