From d5f1092f944a4f6cb8a1a386f504d55155b7d975 Mon Sep 17 00:00:00 2001
From: Yousif Abozid <yousif.abozid@yahoo.com>
Date: Thu, 29 Feb 2024 23:59:22 +0200
Subject: [PATCH] Add touch event listeners to avatar element

---
 app/about/page.js      | 22 ++++++++++++++++++++++
 styles/about/about.css |  5 +++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/about/page.js b/app/about/page.js
index 7bbf974..6467b26 100644
--- a/app/about/page.js
+++ b/app/about/page.js
@@ -1,4 +1,7 @@
+'use client'
+
 import Image from 'next/image'
+import { useEffect } from 'react'
 
 /**
  * Renders the About component.
@@ -6,6 +9,25 @@ import Image from 'next/image'
  * @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
index 3e8996b..2b5b5e9 100644
--- 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);
 }