Add archive page and animate home page

app/archive/page.tsx

@@ -0,0 +1,96 @@
+'use client';
+import AirbrbImageSlider from '@/components/ui/image-slider.tsx/airbrb-image-slider';
+import WaitupImageSlider from '@/components/ui/image-slider.tsx/waitup-image-slider';
+import Image from 'next/image';
+import React from 'react';
+import './style.css'
+import { FaReact, FaNodeJs, FaDatabase, FaJira, FaFigma } from 'react-icons/fa'; // Example icons
+
+export default function Archive() {
+  return (
+    <main className='flex flex-col items-center justify-between p-4 gap-10'>
+      <div className='nes-container with-title is-centered bg-blue-200 w-full max-w-screen-md fade-in-up'>
+        <p className='title'>Archive</p>
+        <p>
+          Welcome to the archive of apps built on javascript! Here you can view
+          my past web development projects.
+        </p>
+      </div>
+      <div className='mt-5 w-full max-w-screen-md space-y-20 mb-40'>
+        {/* Project 1 */}
+        <div className='nes-container with-title bg-yellow-400 border-4 border-orange-500 slide-in-from-left'>
+          <p className='title'>WaitUp!</p>
+          <p>
+            <strong>Year:</strong> 2024
+          </p>
+          <div className='flex items-center gap-2'>
+            <FaFigma style={{ color: '#F24E1E', fontSize: '30px' }} />
+            <p> Figma Protype</p>
+          </div>
+          <div className='flex items-center gap-2'>
+            <FaReact style={{ color: '#61DBFB', fontSize: '30px' }} />
+            <p>React</p>
+          </div>
+          <div className='flex items-center gap-2'>
+            <FaDatabase style={{ color: 'green', fontSize: '30px' }} />
+            <p>Real-time Supabase</p>
+          </div>
+          <div className='flex items-center gap-2'>
+            <FaJira style={{ color: '#0052CC', fontSize: '30px' }} />
+            <p>Team collaboration with Jira</p>
+          </div>
+          <div className='mb-4'>
+            <WaitupImageSlider />
+          </div>
+          <p>
+            Engineered an innovative, scalable restaurant waiting system where I
+            used the Material-UI framework to create these responsive vivid pages.
+          </p>
+        </div>
+
+        {/* Project 2 */}
+        <div className='nes-container with-title bg-sky-400 mb-5 p-4 slide-in-from-left'>
+          <p className='title'>Slackr</p>
+          <p>
+            <strong>Year:</strong> 2023
+          </p>
+          <div className='mb-4'>
+            <Image
+              src='/slackr.png' // Update this path
+              alt='Slack-Inspired Messaging App'
+              width={600}
+              height={400}
+              layout='responsive'
+            />
+          </div>
+          <p>
+            A simple Slack-inspired messaging app with CRUD functionality. Key
+            features that I learnt about were authentication, private/public
+            channel invitations, pagination, message pinning, reacts and edits.
+          </p>
+        </div>
+
+        {/* Project 3 */}
+        <div className='nes-container with-title is-dark mb-5 p-4 fade-in-up'>
+          <p className='title'>Airbnb-Inspired Booking App</p>
+          <p>
+            <strong>Year:</strong> 2023
+          </p>
+          <p>
+            A booking app with dynamic multi-page functionality.
+            Features included calendars and the ability to create, view, update,
+            or remove booking listings.
+          </p>
+          <div className='mb-4'>
+            <AirbrbImageSlider />
+          </div>
+          <p>
+            Developed in a pair, focusing on interactive and user-friendly
+            design. Picked up new things about filters, REST API and cool
+            features such as x-charts and date pickers.
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}

app/archive/style.css

@@ -0,0 +1,30 @@
+@keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in-up {
+    animation: fadeInUp 0.5s ease-out;
+  }
+
+  @keyframes slideInFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .slide-in-from-left {
+    animation: slideInFromLeft 1s ease-out;
+  }
+

app/art/page.tsx

@@ -0,0 +1,14 @@
+import { useRouter } from 'next/router';
+import React, { useEffect } from 'react';
+
+export default function Art() {
+  return (
+    <main className='flex flex-col items-center justify-between p-10 gap-10'>
+      <div className='nes-container with-title is-centered bg-blue-200 md:w-[45rem]'>
+        <p className='title'>Arts and Architecture</p>
+        Welcome to the Art page! A gallery of pixels, digital works, crochet and
+        3D models. Here you can find various art projects.
+      </div>
+    </main>
+  );
+}

app/globals.css

@@ -21,10 +21,70 @@ body {
   background: url("/grass.jpeg") repeat,
     linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
       rgb(var(--background-start-rgb));
+      background-size: 200px 200px;
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
+
+@import "~slick-carousel/slick/slick.css";
+@import "~slick-carousel/slick/slick-theme.css";
+/* Container for the slider */
+.slider-container {
+  position: relative;
+}
+
+/* Larger custom arrows */
+.slider-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5); /* Adjust background color */
+  border: none;
+  color: white; /* Adjust arrow color */
+  cursor: pointer;
+  z-index: 10;
+}
+
+.slider-prev {
+  left: 10px; /* Position of the left arrow */
+}
+
+.slider-next {
+  right: 10px; /* Position of the right arrow */
+}
+
+/* Larger arrow icons */
+.slider-arrow svg {
+  width: 50px; /* Adjust arrow size */
+  height: 50px; /* Adjust arrow size */
+}
+
+/* Larger slider dots */
+.slick-dots {
+  position: absolute;
+  bottom: 10px; /* Adjust position of dots */
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.slick-dots li {
+  margin: 0 10px; /* Space between dots */
+}
+
+.slick-dots li button {
+  font-size: 0; /* Hide default text */
+  background-color: rgba(255, 255, 255, 0.8); /* Dot color */
+  border-radius: 50%;
+  width: 20px; /* Larger dot size */
+  height: 20px; /* Larger dot size */
+}
+
+.slick-dots li.slick-active button {
+  background-color: #fff; /* Active dot color */
+}