Organize images

src/components/Footer.tsx

@@ -1,24 +1,24 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import LogoName from '@/../public/logo-name-white.svg';
+import Arrow from '@/../public/icons/arrow-white.svg';
+import Discord from '@/../public/icons/join-discord-white.svg';
+import Instagram from '@/../public/icons/instagram-white.svg';
+import LinkedIn from '@/../public/icons/linkedin-white.svg';
+import GitHub from '@/../public/icons/github-white.svg';
 
 const linkClasses = 'underline decoration-transparent hover:decoration-inherit transition';
 
 const Footer = () => {
   return (
     <footer className="bg-royal text-white w-full rounded-t-[3.125rem] pb-10 md:px-40 px-8 text-sm mt-20">
       <div className="flex justify-between py-16 sm:py-28 gap-8">
-        <Image
-          src="/logo-name-white.svg"
-          alt="logo"
-          width="360"
-          height="53"
-          className="shrink min-w-0"
-        />
+        <Image src={LogoName} alt="logo" width="360" height="53" className="shrink min-w-0" />
         <button
           onClick={() => window.scrollTo(0, 0)}
           className="items-center flex flex-col rounded-full p-2 transition border border-white/0 hover:border-white"
         >
-          <Image src="/arrow-white.svg" alt="arrow" width="20" height="20" className="rotate-180" />
+          <Image src={Arrow} alt="arrow" width="20" height="20" className="rotate-180" />
           Top
         </button>
       </div>
@@ -81,30 +81,30 @@ const Footer = () => {
             href="https://discord.gg/tcpcnfxmeQ"
             target="_blank"
           >
-            <Image src="/join-discord-white.svg" alt="discord" width="200" height="60" />
+            <Image src={Discord} alt="discord" width="200" height="60" />
           </a>
           <a
             className={linkClasses + ' flex items-center gap-2'}
             href="https://instagram.com/utdnebula"
             target="_blank"
           >
-            <Image src="/instagram-white.svg" alt="Instagram logo" width="30" height="30" />
+            <Image src={Instagram} alt="Instagram logo" width="30" height="30" />
             Instagram
           </a>
           <a
             className={linkClasses + ' flex items-center gap-2'}
             href="https://linkedin.com/company/utdnebula"
             target="_blank"
           >
-            <Image src="/linkedin-white.svg" alt="LinkedIn logo" width="30" height="30" />
+            <Image src={LinkedIn} alt="LinkedIn logo" width="30" height="30" />
             LinkedIn
           </a>
           <a
             className={linkClasses + ' flex items-center gap-2'}
             href="https://github.com/utdnebula"
             target="_blank"
           >
-            <Image src="/github-white.svg" alt="GitHub logo" width="30" height="30" />
+            <Image src={GitHub} alt="GitHub logo" width="30" height="30" />
             GitHub
           </a>
         </div>

src/components/Governance.tsx

@@ -6,8 +6,8 @@ import Image from 'next/image';
 import { PopulatedGoveranceGroup } from '@/lib/period-populator';
 import { Person } from '@/data/person-dictionary';
 
-import LinkedIn from '@/../public/linkedin-royal.svg';
-import Email from '@/../public/email.svg';
+import LinkedIn from '@/../public/icons/linkedin-royal.svg';
+import Email from '@/../public/icons/email.svg';
 
 const fallbackSrc = '/governance/blank.jpg';
 

src/components/Navbar.tsx

@@ -4,18 +4,18 @@ import type { StaticImageData } from 'next/image';
 import Link from 'next/link';
 import { Disclosure, Transition, TransitionRootProps } from '@headlessui/react';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import FilledChevronUpWhite from '@/../public/filled-chevron-up-white.svg';
-import FilledChevronUpRoyal from '@/../public/filled-chevron-up-royal.svg';
-import Arrow from '@/../public/arrow-white.svg';
-import X from '@/../public/x.svg';
-import HamburgerWhite from '@/../public/menu-white.svg';
-import HamburgerRoyal from '@/../public/menu-royal.svg';
-import Puzzle from '@/../public/puzzle.svg';
-import Users from '@/../public/users.svg';
-import UserGroup from '@/../public/user-group.svg';
-import TrendingUp from '@/../public/trending-up.svg';
-import Pencil from '@/../public/pencil.svg';
-import Star from '@/../public/star.svg';
+import FilledChevronUpWhite from '@/../public/icons/filled-chevron-up-white.svg';
+import FilledChevronUpRoyal from '@/../public/icons/filled-chevron-up-royal.svg';
+import Arrow from '@/../public/icons/arrow-white.svg';
+import X from '@/../public/icons/x.svg';
+import HamburgerWhite from '@/../public/icons/menu-white.svg';
+import HamburgerRoyal from '@/../public/icons/menu-royal.svg';
+import Puzzle from '@/../public/icons/puzzle.svg';
+import Users from '@/../public/icons/users.svg';
+import UserGroup from '@/../public/icons/user-group.svg';
+import TrendingUp from '@/../public/icons/trending-up.svg';
+import Pencil from '@/../public/icons/pencil.svg';
+import Star from '@/../public/icons/star.svg';
 
 type BaseItem = { name: string };
 

src/components/Projects.tsx

@@ -6,7 +6,7 @@ import Carousel from './Carousel';
 import Planner from '@/../public/projects/planner.png';
 import Skedge from '@/../public/projects/skedge.png';
 import Jupiter from '@/../public/projects/jupiter.png';
-import FilledChevronUp from '@/../public/filled-chevron-up-white.svg';
+import FilledChevronUp from '@/../public/icons/filled-chevron-up-white.svg';
 import clsx from 'clsx';
 import Link from 'next/link';
 

src/pages/contact.tsx

@@ -2,6 +2,11 @@ import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
 import Image from 'next/image';
+import Discord from '@/../public/icons/join-discord-black.svg';
+import Instagram from '@/../public/icons/instagram-black.svg';
+import LinkedIn from '@/../public/icons/linkedin-black.svg';
+import GitHub from '@/../public/icons/github-black.svg';
+import Gmail from '@/../public/icons/gmail-black.svg';
 
 const linkClasses = 'text-2xl underline decoration-transparent hover:decoration-inherit transition';
 
@@ -23,7 +28,7 @@ const Contact = () => (
           href="https://discord.gg/tcpcnfxmeQ"
           target="_blank"
         >
-          <Image src="/join-discord-black.svg" alt="discord" width="200" height="60" />
+          <Image src={Discord} alt="discord" width="200" height="60" />
         </a>
       </div>
       <div className="flex flex-col items-center gap-8">
@@ -34,28 +39,28 @@ const Contact = () => (
             href="https://instagram.com/utdnebula"
             target="_blank"
           >
-            <Image src="/instagram-black.svg" alt="Instagram logo" width="30" height="30" />
+            <Image src={Instagram} alt="Instagram logo" width="30" height="30" />
           </a>
           <a
             className={linkClasses + ' flex items-center gap-2'}
             href="https://linkedin.com/company/utdnebula"
             target="_blank"
           >
-            <Image src="/linkedin-black.svg" alt="LinkedIn logo" width="30" height="30" />
+            <Image src={LinkedIn} alt="LinkedIn logo" width="30" height="30" />
           </a>
           <a
             className={linkClasses + ' flex items-center gap-2'}
             href="https://github.com/utdnebula"
             target="_blank"
           >
-            <Image src="/github-black.svg" alt="GitHub logo" width="30" height="30" />
+            <Image src={GitHub} alt="GitHub logo" width="30" height="30" />
           </a>
           <a
             className={linkClasses + ' flex items-center gap-2'}
             href="mailto:[email protected]"
             target="_blank"
           >
-            <Image src="/gmail-black.svg" alt="GitHub logo" width="30" height="30" />
+            <Image src={Gmail} alt="GitHub logo" width="30" height="30" />
           </a>
         </div>
       </div>

src/pages/index.tsx

@@ -1,9 +1,9 @@
 import Navbar from '@/components/Navbar';
 import Image from 'next/image';
-import Circles from '@/../public/circles.svg';
+import Circles from '@/../public/images/circles.svg';
 import Blob from '@/components/Blob';
 import Footer from '@/components/Footer';
-import Arrow from '@/../public/arrow-white.svg';
+import Arrow from '@/../public/icons/arrow-white.svg';
 import WhoWeAre from '@/components/WhoWeAre';
 import useBlobBg from '@/lib/useBlobBg';
 import CTA from '@/components/CTA';

src/pages/projects/api.tsx

@@ -1,12 +1,12 @@
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
-import Rectangle from '@/../public/rectangle.png';
 import Image from 'next/image';
+import Gradient from '@/../public/images/gradient.png';
 
-import expand from '@/../public/api/icons8-expand-100.png';
-import crowd from '@/../public/api/icons8-crowd-100.png';
-import support from '@/../public/api/icons8-support-100.png';
+import expand from '@/../public/projects/api/icons8-expand-100.png';
+import crowd from '@/../public/projects/api/icons8-crowd-100.png';
+import support from '@/../public/projects/api/icons8-support-100.png';
 
 const features = [
   {
@@ -40,7 +40,7 @@ const API = () => (
     </Head>
     <Navbar royal={true} className="relative z-20" />
     <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 flex flex-col items-center gap-8 rounded-3xl text-white relative overflow-hidden">
-      <Image src={Rectangle} alt="project background" fill className="-z-20" />
+      <Image src={Gradient} alt="project background" fill className="-z-20" />
       <p className="px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-kallisto drop-shadow">
         API & Platform
       </p>

src/pages/projects/jupiter.tsx

@@ -1,13 +1,13 @@
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
-import Rectangle from '@/../public/rectangle.png';
-import Cover from '@/../public/jupiter/cover.png';
 import Image from 'next/image';
+import Gradient from '@/../public/images/gradient.png';
 
-import search from '@/../public/jupiter/icons8-search-100.png';
-import calendar from '@/../public/jupiter/icons8-calendar-100.png';
-import community from '@/../public/jupiter/icons8-community-100.png';
+import Cover from '@/../public/projects/jupiter/cover.png';
+import search from '@/../public/projects/jupiter/icons8-search-100.png';
+import calendar from '@/../public/projects/jupiter/icons8-calendar-100.png';
+import community from '@/../public/projects/jupiter/icons8-community-100.png';
 
 const features = [
   {
@@ -42,7 +42,7 @@ const Jupiter = () => (
     </Head>
     <Navbar royal={true} className="relative z-20" />
     <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 flex flex-col items-center gap-8 rounded-3xl text-white relative overflow-hidden">
-      <Image src={Rectangle} alt="project background" fill className="-z-20" />
+      <Image src={Gradient} alt="project background" fill className="-z-20" />
       <p className="px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-kallisto drop-shadow">
         JUPITER
       </p>

src/pages/projects/planner.tsx

@@ -1,13 +1,13 @@
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
-import Rectangle from '@/../public/rectangle.png';
-import Cover from '@/../public/planner/cover.png';
 import Image from 'next/image';
+import Gradient from '@/../public/images/gradient.png';
 
-import browser from '@/../public/planner/icons8-browser-100.png';
-import sword from '@/../public/planner/icons8-sword-100.png';
-import stopwatch from '@/../public/planner/icons8-stopwatch-100.png';
+import Cover from '@/../public/projects/planner/cover.png';
+import browser from '@/../public/projects/planner/icons8-browser-100.png';
+import sword from '@/../public/projects/planner/icons8-sword-100.png';
+import stopwatch from '@/../public/projects/planner/icons8-stopwatch-100.png';
 
 const features = [
   {
@@ -42,7 +42,7 @@ const Planner = () => (
     </Head>
     <Navbar royal={true} className="relative z-20" />
     <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 flex flex-col items-center gap-8 rounded-3xl text-white relative overflow-hidden">
-      <Image src={Rectangle} alt="project background" fill className="-z-20" />
+      <Image src={Gradient} alt="project background" fill className="-z-20" />
       <p className="px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-kallisto drop-shadow">
         PLANNER
       </p>

src/pages/projects/skedge.tsx

@@ -1,16 +1,15 @@
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
-import Rectangle from '@/../public/rectangle.png';
-import Cover from '@/../public/skedge/cover.png';
 import Image from 'next/image';
+import Gradient from '@/../public/images/gradient.png';
 
-import Chrome from '@/../public/skedge/chrome.png';
-import Firefox from '@/../public/skedge/firefox.png';
-
-import input from '@/../public/trends/icons8-input-100.png';
-import aggregate from '@/../public/trends/icons8-aggregate-100.png';
-import calendar from '@/../public/skedge/icons8-calendar-100.png';
+import Cover from '@/../public/projects/skedge/cover.png';
+import input from '@/../public/projects/skedge/icons8-input-100.png';
+import aggregate from '@/../public/projects/skedge/icons8-aggregate-100.png';
+import calendar from '@/../public/projects/skedge/icons8-calendar-100.png';
+import Chrome from '@/../public/projects/skedge/chrome.png';
+import Firefox from '@/../public/projects/skedge/firefox.png';
 
 const features = [
   {
@@ -44,7 +43,7 @@ const Skedge = () => (
     </Head>
     <Navbar royal={true} className="relative z-20" />
     <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 flex flex-col items-center gap-8 rounded-3xl text-white relative overflow-hidden">
-      <Image src={Rectangle} alt="project background" fill className="-z-20" />
+      <Image src={Gradient} alt="project background" fill className="-z-20" />
       <p className="px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-kallisto drop-shadow">
         SKEDGE
       </p>

src/pages/projects/trends.tsx

@@ -1,13 +1,13 @@
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import Head from 'next/head';
-import Rectangle from '@/../public/rectangle.png';
-import Cover from '@/../public/trends/cover.png';
 import Image from 'next/image';
+import Gradient from '@/../public/images/gradient.png';
 
-import input from '@/../public/trends/icons8-input-100.png';
-import aggregate from '@/../public/trends/icons8-aggregate-100.png';
-import scale from '@/../public/trends/icons8-scale-100.png';
+import Cover from '@/../public/projects/trends/cover.png';
+import input from '@/../public/projects/trends/icons8-input-100.png';
+import aggregate from '@/../public/projects/trends/icons8-aggregate-100.png';
+import scale from '@/../public/projects/trends/icons8-scale-100.png';
 
 const features = [
   {
@@ -41,7 +41,7 @@ const Trends = () => (
     </Head>
     <Navbar royal={true} className="relative z-20" />
     <div className="mx-8 lg:mx-16 xl:mx-32 pt-6 px-6 flex flex-col items-center gap-8 rounded-3xl text-white relative overflow-hidden">
-      <Image src={Rectangle} alt="project background" fill className="-z-20" />
+      <Image src={Gradient} alt="project background" fill className="-z-20" />
       <p className="px-16 py-2 rounded-full border-2 border-white whitespace-nowrap font-kallisto drop-shadow">
         TRENDS
       </p>

src/pages/resources/calendar.tsx

@@ -5,8 +5,8 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { ics } from 'calendar-link';
 
-import ArrowWhite from '@/../public/filled-chevron-up-white.svg';
-import ArrowBlack from '@/../public/filled-chevron-up-black.svg';
+import ArrowWhite from '@/../public/icons/filled-chevron-up-white.svg';
+import ArrowBlack from '@/../public/icons/filled-chevron-up-black.svg';
 
 const timeFormat = new Intl.DateTimeFormat('en-US', {
   hour: 'numeric',

src/styles/globals.css

@@ -11,7 +11,7 @@ html {
 }
 
 .bg-stars {
-  background-image: url('/stars.png'), linear-gradient(lightgray, lightgray);
+  background-image: url('/images/stars.png'), linear-gradient(lightgray, lightgray);
   background-size: cover, cover, 50%;
   background-repeat: repeat-x, no-repeat, no-repeat;
 }