Add AOS

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "aos": "^2.3.4",
     "axios": "^1.6.7",
     "firebase": "^10.8.0",
     "gray-matter": "^4.0.3",

src/components/(gallery)/ImageGallery.tsx

@@ -10,7 +10,6 @@ interface UnsplashImage {
 const ImageGallery: React.FC = () => {
     const [imageData, setImageData] = useState<UnsplashImage[]>([]);
     const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
-    const [isLoading, setLoading] = useState(true);
 
     const fetchImagesFromUnsplash = async () => {
         try {
@@ -46,13 +45,13 @@ const ImageGallery: React.FC = () => {
         <div className="columns-2 md:columns-3 gap-2 md:gap-4">
             {imageData.map((image, index) => (
                 <div key={index} className="mb-2 md:mb-4" onClick={() => handleFullscreen(index)}>
-                    <img className={`w-full h-auto rounded-lg grayscale transition-all duration-500 ease-in-out transform cursor-pointer ${isLoading ? 'blur-2xl' : 'blur-0'}`} onLoad={() => setLoading(false)} width={1000} height={1000} src={image.urls.regular} alt="" loading="lazy" />
+                    <img data-aos="fade-up" className="w-full h-auto rounded-lg grayscale transition-all duration-500 ease-in-out transform cursor-pointer" width={1000} height={1000} src={image.urls.regular} alt="" loading="lazy" />
                 </div>
             ))}
             {selectedImageIndex !== null && (
                 <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 backdrop backdrop-blur-md" onClick={closeFullscreen}>
                     <div className="relative h-dvh w-dvw flex items-center">
-                        <img className={`max-w-full max-h-full w-auto h-auto my-auto mx-auto rounded-lg ${isLoading ? 'blur-2xl' : 'blur-0'}`} onLoad={() => setLoading(false)} width={1000} height={1000} src={imageData[selectedImageIndex]?.urls.regular} alt="" />
+                        <img data-aos="zoom-in" className="max-w-full max-h-full w-auto h-auto my-auto mx-auto rounded-lg" width={1000} height={1000} src={imageData[selectedImageIndex]?.urls.regular} alt="" />
                         <button className="absolute p-2 left-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-2xl bg-zinc-900 rounded-lg" onClick={(e) => { e.stopPropagation(); navigateImage(-1); }}><MdNavigateBefore /></button>
                         <button className="absolute p-2 right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-2xl bg-zinc-900 rounded-lg" onClick={(e) => { e.stopPropagation(); navigateImage(1); }}><MdNavigateNext /></button>
                         <button className="absolute p-2 top-2 right-2 cursor-pointer text-2xl bg-zinc-900 rounded-lg" onClick={(e) => { e.stopPropagation(); closeFullscreen(); }}><MdOutlineClose /></button>

src/components/(guestbook)/MessageList.tsx

@@ -39,9 +39,9 @@ const MessageList: React.FC = () => {
         <div>
             <h2 className="text-xl font-bold mt-4 text-zinc-100">Messages</h2>
             {messages.map((message) => (
-                <div key={message.id} className="bg-transparent border border-zinc-700 rounded-md p-4 my-2">
+                <div data-aos="fade-up" key={message.id} className="bg-transparent border border-zinc-700 rounded-md p-4 my-2">
                     <div className="flex items-center gap-2 mb-1">
-                        <img src={message.photoURL} alt={message.displayName} width={1080} height={1080} className={`rounded-full w-8 h-8 grayscale transition-all duration-500 ease-in-out transform ${loading ? 'blur-2xl' : 'blur-0'}`} onLoad={() => setLoading(false)} />
+                        <img src={message.photoURL} alt={message.displayName} width={1080} height={1080} className="rounded-full w-8 h-8 grayscale transition-all duration-500 ease-in-out transform" />
                         <div className="flex flex-col">
                             <p className="font-semibold">{message.displayName}</p>
                             <p className="text-zinc-400">{message.timestamp.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', })}</p>

src/components/(home)/HomeContainer.tsx

@@ -14,7 +14,7 @@ const HomeContainer: React.FC = () => {
     }, []);
 
     return (
-        <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
+        <div data-aos="fade-up" className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
             <div className="pb-8">
                 <div className="flex items-baseline">
                     <h1 className="text-3xl font-medium text-zinc-100">Pranshu Patel</h1>

src/components/(home)/ImageGrid.tsx

@@ -1,20 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import { useState } from 'react';
-
 const images = ['/home-1.jpg', '/home-2.jpg', '/home-3.jpg', '/home-4.jpg', '/home-5.jpg', '/home-6.jpg', '/home-7.jpg'];
 
-const HomeImageGrid: React.FC = () => {
-    const [isLoading, setLoading] = useState(true);
-
-    return (
-        <div className="columns-2 md:columns-3 my-4 gap-2 md:gap-4">
-            {images.map((src, index) => (
-                <div key={index} className="mb-2 md:mb-4">
-                    <img className={`w-full h-auto rounded-lg grayscale transition-all duration-500 ease-in-out transform ${isLoading ? 'blur-2xl' : 'blur-0'}`} onLoad={() => setLoading(false)} width={1000} height={1000} src={src} alt="" loading="lazy" />
-                </div>
-            ))}
-        </div>
-    );
-};
+const HomeImageGrid: React.FC = () => (
+    <div className="columns-2 md:columns-3 my-4 gap-2 md:gap-4">
+        {images.map((src, index) => (
+            <div key={index} className="mb-2 md:mb-4">
+                <img data-aos="fade-up" className="w-full h-auto rounded-lg grayscale transition-all duration-500 ease-in-out transform" width={1000} height={1000} src={src} alt="" loading="lazy" />
+            </div>
+        ))}
+    </div>
+);
 
 export default HomeImageGrid;

src/components/(home)/SocialLinksGrid.tsx

@@ -8,7 +8,7 @@ const socialLinks = [
 ];
 
 const SocialLinksGrid: React.FC = () => (
-    <div className="my-4 grid gap-2 md:gap-4 grid-cols-2 sm:grid-cols-4 mx-auto">
+    <div data-aos="zoom-in" className="my-4 grid gap-2 md:gap-4 grid-cols-2 sm:grid-cols-4 mx-auto">
         {socialLinks.map((item, index) => (
             <a key={index} href={item.href} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center p-3 gap-2 rounded-lg bg-zinc-900"> {item.icon} {item.text}</a>
         ))}

src/components/(layout)/NavBar.tsx

@@ -12,7 +12,7 @@ const NavBar: React.FC = () => {
     const menuRoutes = ['/posts', '/music', '/guestbook'];
 
     return (
-        <header className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto py-10">
+        <header data-aos="fade-right" className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto py-10">
             <nav className="bg-zinc-900 rounded-lg p-2 w-full">
                 <div className="flex gap-4">
                     {routes.map((route) => (

src/components/(posts)/BlogPostList.tsx

@@ -6,7 +6,7 @@ interface BlogPostListProps {
 }
 
 const BlogPostList: React.FC<BlogPostListProps> = ({ posts, viewCounts }) => (
-    <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-4'>
+    <div data-aos="fade-up" className='w-full grid grid-cols-1 md:grid-cols-2 gap-4'>
         {posts.map(({ slug, frontmatter }) => (
             <BlogPostItem key={slug} slug={slug} title={frontmatter.title} date={frontmatter.date} description={frontmatter.description} viewCount={viewCounts[slug]} img={frontmatter.img} />
         ))}

src/pages/_app.tsx

@@ -1,9 +1,19 @@
+import { useEffect } from 'react'
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import NavBar from "@/components/(layout)/NavBar";
 import Footer from "@/components/(layout)/Footer";
+import AOS from 'aos';
+import 'aos/dist/aos.css';
 
 export default function App({ Component, pageProps }: AppProps) {
+    useEffect(() => {
+        AOS.init({
+            duration: 800,
+            once: false,
+        })
+    }, [])
+
     return (
         <div className="min-h-dvh w-dvw p-0 m-0 bg-neutral-950 text-zinc-300 flex flex-col">
             <NavBar />

src/pages/about/index.tsx

@@ -3,11 +3,11 @@ import Image from 'next/image'
 
 const AboutPage: React.FC = () => {
     return (
-        <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
+        <div data-aos="fade-up" className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
             <div className="pb-8">
                 <h1 className="text-3xl font-bold text-zinc-100">About me!</h1>
             </div>
-            <p><Image src='https://i.imgur.com/gyDSUsG.jpg' width={200} height={200} alt='me' className='sm:w-200 max-sm:w-full max-sm:float-start max-sm:mb-3 sm:float-right sm:ml-3 rounded-md grayscale' />Hey there! 👋🏻 I&apos;m Pranshu, a passionate full-stack developer and college fresher based in India. Currently working on a few projects and pursuing B.Tech. in ICT from{' '}<a className="link" href="https://daiict.ac.in" target="_blank" rel="noopener noreferrer">DA-IICT</a>.<br /><br />I started my coding journey in 2020 when I was 14 during the{' '}<a className="link" href="https://en.wikipedia.org/wiki/COVID-19" target="_blank">Covid</a>{' '}pandemic. I started with the basics of C and programming and then moved to web development. I have been working with web technologies like HTML, CSS, JavaScript, React, and Node.js. I also have experience with discord bot development using discord.js and Node.js and have worked with databases like MongoDB and Firebase. I&apos;m currently exploring Next.js and TypeScript. I&apos;m also passionate about UI/UX and its design and development.</p>
+            <p><Image data-aos="fade-left" src='https://i.imgur.com/gyDSUsG.jpg' width={200} height={200} alt='me' className='sm:w-200 max-sm:w-full max-sm:float-start max-sm:mb-3 sm:float-right sm:ml-3 rounded-md grayscale' />Hey there! 👋🏻 I&apos;m Pranshu, a passionate full-stack developer and college fresher based in India. Currently working on a few projects and pursuing B.Tech. in ICT from{' '}<a className="link" href="https://daiict.ac.in" target="_blank" rel="noopener noreferrer">DA-IICT</a>.<br /><br />I started my coding journey in 2020 when I was 14 during the{' '}<a className="link" href="https://en.wikipedia.org/wiki/COVID-19" target="_blank">Covid</a>{' '}pandemic. I started with the basics of C and programming and then moved to web development. I have been working with web technologies like HTML, CSS, JavaScript, React, and Node.js. I also have experience with discord bot development using discord.js and Node.js and have worked with databases like MongoDB and Firebase. I&apos;m currently exploring Next.js and TypeScript. I&apos;m also passionate about UI/UX and its design and development.</p>
             <h2 className="text-2xl font-bold my-4 text-zinc-100">Tech Stack</h2>
             <p>Below is a list of technologies which I use for development and programming purpose. Including languages, frameworks, IDEs, apps and various softwares.</p>
             <TechStack />

src/pages/music/index.tsx

@@ -9,9 +9,11 @@ const MusicPage: React.FC = () => {
                 <h1 className="text-3xl font-bold text-zinc-100">Music</h1>
                 <p>My Music Activity, feel free to explore! Visit my <a className='link' href='https://last.fm/user/pranshu05' target='_blank'>Last.fm</a> profile</p>
             </div>
-            <RecentlyPlayed />
-            <RecentTracks />
-            <TopAlbums />
+            <div data-aos="fade-up" >
+                <RecentlyPlayed />
+                <RecentTracks />
+                <TopAlbums />
+            </div>
         </div>
     );
 };