Frontend UI/UX Enhancements and Performance Optimizations

jsconfig.json

@@ -3,6 +3,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "ignoreDeprecations": "6.0"
   }
 }

src/components/Banner.jsx

@@ -4,22 +4,23 @@ import { Pattern } from '@/components/Pattern';
 
 export function Banner() {
   return (
-    <section aria-label="Apply Banner" className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32">
+    <section aria-label="Apply Banner" className="scroll-mt-14 bg-gradient-to-r from-primary via-primary-accent to-primary-dark dark:from-yellow-400 dark:to-yellow-400 sm:scroll-mt-32 shadow-xl-soft">
       <div className="overflow-hidden lg:relative">
         <ContainerPattern size="md" className="relative grid grid-cols-1 items-end gap-y-12 lg:static lg:grid-cols-2 pt-24 pb-8 sm:py-10">
-          <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
-          <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
+          <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 animate-pulse" />
+          <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible animate-pulse" />
           <div>
-            <h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto">
+            <h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto drop-shadow-xl">
               Launch into AOSSIE&apos;s open-source world through GSoC!
             </h2>
             <p className="mt-4 text-lg tracking-tighter text-white dark:text-black font-medium font-mono">
               Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code.
             </p>
-            <div className="mt-5">
+            <div className="mt-8">
               <Link href="/apply" legacyBehavior>
-                <a className="group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-black px-8 py-3 text-black dark:text-white focus:outline-none font-mono font-semibold">
-                  Apply to GSoC with AOSSIE
+                <a className="group relative rounded-2xl inline-flex items-center overflow-hidden bg-white dark:bg-black px-10 py-4 text-black dark:text-white focus:outline-none font-mono font-bold shadow-md-soft transition-all duration-400 ease-in-expo hover:bg-primary hover:text-white hover:scale-105 dark:hover:bg-yellow-400 dark:hover:text-black">
+                  <span className="z-10 relative">Apply to GSoC with AOSSIE</span>
+                  <span className="absolute left-0 top-0 h-full w-0 bg-primary transition-all duration-400 ease-in-expo group-hover:w-full opacity-20 rounded-2xl"></span>
                 </a>
               </Link>
             </div>

src/components/BrandingBackground.jsx

@@ -0,0 +1,25 @@
+// Example SVG background pattern for branding
+export default function BrandingBackground() {
+  return (
+    <svg
+      className="absolute inset-0 w-full h-full pointer-events-none z-0"
+      aria-hidden="true"
+      focusable="false"
+      width="100%"
+      height="100%"
+      viewBox="0 0 1440 320"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient id="brand-gradient" x1="0" y1="0" x2="0" y2="1" gradientTransform="rotate(20)">
+          <stop offset="0%" stopColor="#00843D" stopOpacity="0.15" />
+          <stop offset="100%" stopColor="#FED41E" stopOpacity="0.10" />
+        </linearGradient>
+      </defs>
+      <rect width="1440" height="320" fill="url(#brand-gradient)" />
+      <circle cx="200" cy="120" r="80" fill="#00843D" fillOpacity="0.08" />
+      <circle cx="1240" cy="200" r="100" fill="#FED41E" fillOpacity="0.10" />
+    </svg>
+  );
+}

src/components/Card.jsx

@@ -16,7 +16,10 @@ function ChevronRightIcon(props) {
 export function Card({ as: Component = 'div', className, children }) {
   return (
     <Component
-      className={clsx(className, 'group relative flex flex-col items-start')}
+      className={clsx(
+        className,
+        'group relative flex flex-col items-start rounded-2xl shadow-soft bg-white dark:bg-zinc-900 transition-all duration-400 ease-in-expo hover:shadow-xl-soft focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-yellow-400 dark:focus-within:ring-offset-zinc-900'
+      )}
     >
       {children}
     </Component>

src/components/Footer.jsx

@@ -15,39 +15,53 @@ function NavLink({ href, children }) {
     </Link>
   )
 }
-
 export function Footer() {
   return (
-    <footer className="mt-16">
+    <footer className="mt-16 border-t border-zinc-200 dark:border-zinc-700 bg-secondary dark:bg-secondary-dark">
       <Container.Outer>
         <div className="pt-10 pb-10">
           <Container.Inner>
-            <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
-              <div className="flex gap-5 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
+            <div className="flex flex-col items-center justify-between gap-8 sm:flex-row">
+              <div className="flex gap-7 text-base font-semibold font-mono text-zinc-800 dark:text-zinc-200">
                 <NavLink href="/about">About</NavLink>
                 <NavLink href="/projects">Projects</NavLink>
                 <NavLink href="/ideas">Ideas</NavLink>
                 <NavLink href="/apply">Apply</NavLink>
               </div>
-              <p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
+              <p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono mt-4 sm:mt-0">
                 &copy; 2016-2025 AOSSIE. All rights reserved.
               </p>
-              <div className="flex gap-6">
-                <Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:aossie.oss@gmail.com'>
-                  <FontAwesomeIcon icon={faEnvelope} size='xl' />
-                </Link>
-                <Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
-                  <FontAwesomeIcon icon={faGitlab} size='xl' />
-                </Link>
-                <Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
-                  <FontAwesomeIcon icon={faGithub} size='xl' />
-                </Link>
-                <Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn'>
-                  <FontAwesomeIcon icon={faDiscord} size='xl' />
-                </Link>
-                <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
-                  <FontAwesomeIcon icon={faTwitter} size='xl' />
-                </Link>
+              <div className="flex gap-7">
+                {/** SocialLink component for DRY markup */}
+                {[
+                  {
+                    href: 'mailto:aossie.oss@gmail.com',
+                    label: 'Contact by Mail',
+                    icon: faEnvelope,
+                  },
+                  {
+                    href: 'https://gitlab.com/aossie',
+                    label: 'Follow on GitLab',
+                    icon: faGitlab,
+                  },
+                  {
+                    href: 'https://github.com/AOSSIE-Org',
+                    label: 'Follow on GitHub',
+                    icon: faGithub,
+                  },
+                  {
+                    href: 'https://discord.gg/hjUhu33uAn',
+                    label: 'Join on Discord',
+                    icon: faDiscord,
+                  },
+                  {
+                    href: 'https://twitter.com/aossie_org',
+                    label: 'Follow on Twitter',
+                    icon: faTwitter,
+                  },
+                ].map(({ href, label, icon }) => (
+                  <SocialLink key={href} href={href} ariaLabel={label} icon={icon} />
+                ))}
               </div>
             </div>
           </Container.Inner>
@@ -56,3 +70,16 @@ export function Footer() {
     </footer>
   )
 }
+
+// DRY SocialLink component
+function SocialLink({ href, ariaLabel, icon }) {
+  return (
+    <Link
+      aria-label={ariaLabel}
+      className="text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-300 outline-none"
+      href={href}
+    >
+      <FontAwesomeIcon icon={icon} size="xl" />
+    </Link>
+  );
+}

src/components/Header.jsx

@@ -81,7 +81,12 @@ function MobileNavItem({ href, children }) {
 function MobileNavigation(props) {
   return (
     <Popover {...props}>
-      <Popover.Button className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">
+      <Popover.Button
+        className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20"
+        aria-haspopup="true"
+        aria-controls="mobile-menu"
+        aria-expanded="false"
+      >
         Menu
         <ChevronDownIcon className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400" />
       </Popover.Button>
@@ -108,6 +113,8 @@ function MobileNavigation(props) {
         >
           <Popover.Panel
             focus
+            id="mobile-menu"
+            aria-label="Mobile Navigation Menu"
             className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800"
           >
             <div className="flex flex-row-reverse items-center justify-between">
@@ -118,7 +125,7 @@ function MobileNavigation(props) {
                 Navigation
               </h2>
             </div>
-            <nav className="mt-6">
+            <nav className="mt-6" aria-label="Mobile Navigation">
               <ul className="-my-2 font-mono font-black divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
                 <MobileNavItem href="/about">About</MobileNavItem>
                 <MobileNavItem href="/projects">Projects</MobileNavItem>

src/components/PageTransition.jsx

@@ -0,0 +1,19 @@
+// Framer Motion setup for Next.js
+import { AnimatePresence, motion } from 'framer-motion';
+
+export default function PageTransition({ children, router }) {
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={router.route}
+        initial={{ opacity: 0, y: 24 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -24 }}
+        transition={{ duration: 0.4, ease: 'easeInOut' }}
+        style={{ minHeight: '100vh' }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

src/components/Pattern.jsx

@@ -20,23 +20,23 @@ export function Pattern({
     <svg aria-hidden="true" width={width} height={height} {...props}>
       <defs>
         <symbol id={`${id}-0`} width={size} height={size}>
-          <rect className="fill-green-200 dark:fill-yellow-200" width={size} height={size} />
+          <rect className="fill-primary/20 dark:fill-primary-accent/20" width={size} height={size} />
           <circle
-            className="fill-[#00843D]  dark:fill-yellow-400"
+            className="fill-primary dark:fill-primary-accent"
             cx={size / 2}
             cy={size / 2}
             r={size * (13 / 40)}
           />
         </symbol>
         <symbol id={`${id}-1`} width={size} height={size}>
           <circle
-            className="fill-green-400 dark:fill-yellow-300 animate-pulse"
+            className="fill-primary dark:fill-primary-accent animate-pulse"
             cx={size / 2}
             cy={size / 2}
             r={size / 2}
           />
           <rect
-            className="fill-[#00843D] dark:fill-yellow-400"
+            className="fill-primary dark:fill-primary-accent"
             width={size / 2}
             height={size / 2}
             x={size / 4}

src/components/SectionHeading.jsx

@@ -4,15 +4,17 @@ export function SectionHeading({ number, children, className, ...props }) {
   return (
     <h2
       className={clsx(
-        className,
-        'inline-flex items-center rounded-full py-1 px-4 text-[#00843D] dark:text-yellow-400 ring-1 ring-inset ring-[#00843D] dark:ring-yellow-400'
+        'text-3xl md:text-4xl font-extrabold tracking-tight text-primary dark:text-yellow-400 flex items-center gap-3 mb-8 animate-fade-in',
+        className
       )}
       {...props}
     >
-      <span className="font-mono text-base font-semibold" aria-hidden="true">
-      </span>
-      {/* <span className="ml-3 h-3.5 w-px bg-blue-600/20 dark:bg-white" /> */}
-      <span className="ml-3 text-base font-semibold font-mono tracking-tighter">
+      {number !== null && number !== undefined && (
+        <span className="font-mono text-lg font-black text-primary-accent dark:text-yellow-400 drop-shadow" aria-hidden="true">
+          {number}
+        </span>
+      )}
+      <span className="ml-3 text-xl md:text-2xl font-semibold font-mono tracking-tighter">
         {children}
       </span>
     </h2>

src/components/TimelineElement.jsx

@@ -3,15 +3,15 @@ import clsx from "clsx"
 export function TimelineElement({ title, description, button, time, link, classCondition }) {
     return (
         <li className="mb-10 ml-6">
-            <span className="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-zinc-900 dark:bg-yellow-900 scale-150">
-                <svg aria-hidden="true" className="w-3 h-3 text-green-800 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <span className="absolute flex items-center justify-center w-6 h-6 bg-primary/10 rounded-full -left-3 ring-8 ring-white dark:ring-secondary-dark dark:bg-primary-accent/20 scale-150">
+                <svg aria-hidden="true" className="w-3 h-3 text-primary dark:text-primary-accent" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd"></path>
                 </svg>
             </span>
             <h3 className="flex font-mono tracking-tighter items-center mb-1 text-xl font-bold text-gray-900 dark:text-white ml-2">{title}</h3>
             <time className="block mb-2 font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{time}</time>
             <p className="mb-4 font-mono tracking-tight text-base font-normal text-gray-500 dark:text-gray-400 ml-2">{description}</p>
-            <a href={link} className={clsx(classCondition,"inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-gray-900 bg-white border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:ring-2 focus:outline-none focus:ring-gray-300 focus:text-green-700 dark:bg-zinc-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700")}>{button}</a>
+            <a href={link} className={clsx(classCondition,"inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-secondary-dark bg-white border-2 border-secondary rounded-lg hover:bg-secondary hover:text-primary focus:z-10 focus:ring-2 focus:outline-none focus:ring-primary focus:text-primary dark:bg-secondary-dark dark:text-secondary dark:border-secondary dark:hover:text-white dark:hover:bg-primary dark:focus:ring-primary-accent")}>{button}</a>
         </li>
     )
 }

src/pages/_app.jsx

@@ -1,10 +1,25 @@
+
+
 import { useEffect, useRef } from 'react'
 
+// Accessibility: Skip to content link
+function SkipToContent() {
+  return (
+    <a
+      href="#main-content"
+      className="sr-only focus:not-sr-only absolute top-2 left-2 z-50 rounded bg-primary px-4 py-2 text-white dark:bg-primary-accent focus:outline-none focus:ring-4 focus:ring-primary-accent"
+      tabIndex={0}
+    >
+      Skip to main content
+    </a>
+  )
+}
 import { Header } from '@/components/Header'
 
 import '@/style/tailwind.css'
 import 'focus-visible'
 import { Footer } from '@/components/Footer'
+import PageTransition from '@/components/PageTransition'
 
 function usePrevious(value) {
   let ref = useRef()
@@ -21,18 +36,21 @@ export default function App({ Component, pageProps, router }) {
 
   return (
     <>
-        <div className="fixed inset-0 flex justify-center sm:px-8">
-          <div className="flex w-full max-w-7xl lg:px-8">
-            <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
-          </div>
+      <SkipToContent />
+      <div className="fixed inset-0 flex justify-center sm:px-8">
+        <div className="flex w-full max-w-7xl lg:px-8">
+          <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
         </div>
-        <div className="relative">
-          <Header />
-          <main>
+      </div>
+      <div className="relative">
+        <Header />
+        <main id="main-content">
+          <PageTransition router={router}>
             <Component previousPathname={previousPathname} {...pageProps} />
-          </main>
-          <Footer />
-        </div>
+          </PageTransition>
+        </main>
+        <Footer />
+      </div>
     </>
   )
 }