Showcase page structure

.gitignore

@@ -21,3 +21,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.prettierrc
+.vscode
+.npmrc
+hidden/

package.json

@@ -1,42 +1,43 @@
 {
-  "name": "vda",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "framer-motion": "^8.1.7",
-    "node-sass": "^8.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-grid-system": "^8.1.6",
-    "react-router-dom": "^6.6.1",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "vda",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^13.5.0",
+		"framer-motion": "^8.1.7",
+		"node-sass": "^8.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-grid-system": "^8.1.6",
+		"react-router-dom": "^6.6.1",
+		"react-scripts": "5.0.1",
+		"react-uuid": "^2.0.0",
+		"web-vitals": "^2.1.4"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
 }

src/App.js

@@ -1,34 +1,40 @@
-import { useEffect } from "react";
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  useLocation,
-} from "react-router-dom";
-import Home from "./pages/home";
-import ProgramOverview from "./pages/programOverview";
+import { useEffect } from 'react'
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom'
+import Home from './pages/home'
+import ProgramOverview from './pages/programOverview'
+import Showcase from './pages/showcase'
 
 const ScrollToTop = () => {
-  const { pathname } = useLocation();
+	const { pathname } = useLocation()
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+	useEffect(() => {
+		window.scrollTo(0, 0)
+	}, [pathname])
 
-  return null;
-};
+	return null
+}
 
 function App() {
-  return (
-    <Router>
-      {" "}
-      <ScrollToTop />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/program-overview" element={<ProgramOverview />} />
-      </Routes>
-    </Router>
-  );
+	return (
+		<Router>
+			{' '}
+			<ScrollToTop />
+			<Routes>
+				<Route
+					path='/'
+					element={<Home />}
+				/>
+				<Route
+					path='/program-overview'
+					element={<ProgramOverview />}
+				/>
+				<Route
+					path='/showcase'
+					element={<Showcase />}
+				/>
+			</Routes>
+		</Router>
+	)
 }
 
-export default App;
+export default App

src/components/navbar/index.js

@@ -29,12 +29,12 @@ function Navbar() {
           <img className='logo' src={Logo} alt="" />
         </NavLink>
         <ul>
-          <li><NavLink to="/">Home</NavLink></li>
-          <li><NavLink to="/program-overview">Program Overview</NavLink></li>
+          <li><NavLink className={({ isActive }) => isActive ? "active" : ""} to="/">Home</NavLink></li>
+          <li><NavLink className={({ isActive }) => isActive ? "active" : ""} to="/program-overview">Program Overview</NavLink></li>
           <li>
             <a className='button' href="https://forms.gle/2bnSgXW4Usddx6JP6" target='_blank'>
               <p>APPLY</p>
-              <img src={Star} alt="" />
+              <img src={Star} alt="star" />
             </a>
           </li>
         </ul>

src/components/navbar/styles.scss

@@ -28,6 +28,11 @@
             @media only screen and (max-width: $desktop) {
                 margin-left: 1rem;
             }
+
+            .active {
+                font-family: 'Brice Bold';
+            }
+
             a {
                 color: white;
                 text-decoration: none;
@@ -43,7 +48,7 @@
                 align-items: center;
                 background-color: $accent-color-1;
                 color: black;
-                padding: 0.5rem 1rem;
+                padding: 0.7rem 1rem;
                 transition: 0.25s;
 
                 @media only screen and (max-width: $desktop) {
@@ -52,7 +57,8 @@
                 p {
                     font-family: $title-font;
                     font-size: 1.25rem;
-                    transform: translateY(0.1rem);
+                    line-height: 1em;
+                    height: 0.8em;
                     margin-right: 0.4rem;
 
                     @media only screen and (max-width: $desktop) {
@@ -63,11 +69,16 @@
                     object-fit: contain;
                     height: 1.1rem;
                 }
+
+                &:hover, &:focus-visible {
+                    transform: scale(0.9);
+                }
+
+                &:active {
+                    background-color: #008437;
+                }
             }
-            .button:hover {
-                text-decoration: none;
-                transform: scale(0.9);
-            }
+
         }
     }
     .logo {
@@ -141,13 +152,18 @@
                     align-items: center;
                     background-color: $accent-color-1;
                     color: black;
-                    padding: 0.75rem 1.25rem;
+                    padding: 1.25rem 1.25rem;
                     text-decoration: none;
 
+                    &:active {
+                        background-color: #008437;
+                    }
+
                     p {
                         font-family: $title-font;
                         font-size: 1.5rem;
-                        transform: translateY(0.1rem);
+                        line-height: 1em;
+                        height: 0.8em;
                         margin-right: 0.4rem;
                     }
                     img {

src/components/thumbnailList/index.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import uuid from 'react-uuid'
+
+import './styles.scss'
+
+// function ConditionalWrapper({ condition, ComponentWrapper, elementWrapper, props, children }) {
+// 	return condition ? (
+// 		ComponentWrapper ? (
+// 			<ComponentWrapper
+// 				children={children}
+// 				{...props}
+// 			/>
+// 		) : (
+// 			React.createElement(elementWrapper, props, children)
+// 		)
+// 	) : (
+// 		<>{children}</>
+// 	)
+// }
+
+function ThumbnailList({ thumbnails, thumbnailsPerRow = 3, forceSquare = true, justifyContent = 'space-around', imagePadding = 0 }) {
+	const generateKeys = () => {
+		const thumbnailKeys = {}
+
+		Object.keys(thumbnails).forEach(cap => {
+			thumbnailKeys[cap] = uuid()
+		})
+
+		return thumbnailKeys
+	}
+
+	// eslint-disable-next-line
+	const [uuidKeys, _] = useState(generateKeys())
+
+	return (
+		<div
+			className='dcomp-thumbnail-list-container'
+			style={{
+				justifyContent: justifyContent,
+			}}
+		>
+			{Object.keys(thumbnails).map(cap =>
+				React.createElement(
+					// element name
+					typeof thumbnails[cap]?.href === 'string' ? 'a' : 'figure',
+					// props
+					{
+						className: 'dcomp-thumbnail-list-thumbnail',
+						href: typeof thumbnails[cap]?.href === 'string' ? thumbnails[cap].href : undefined,
+						target: typeof thumbnails[cap]?.href === 'string' ? '_blank' : undefined,
+						rel: typeof thumbnails[cap]?.href === 'string' ? 'noreferrer' : undefined,
+						style: {
+							'--max-thumbnail-width': `calc(${Math.floor((100 / thumbnailsPerRow) * 100) / 100}%`,
+							'--image-padding': `${imagePadding}px`,
+						},
+						key: uuidKeys[cap],
+					},
+					// children
+					<>
+						<img
+							className={'dcomp-thumbnail-list-image' + String(forceSquare && ' dcomp-thumbnail-list-image-square')}
+							src={thumbnails[cap].src}
+							alt={thumbnails[cap].alt}
+							width='100%'
+						/>
+						<figcaption className='dcomp-thumbnail-list-image-caption'>{cap}</figcaption>
+					</>,
+				),
+			)}
+		</div>
+	)
+}
+
+export default ThumbnailList

src/components/thumbnailList/styles.scss

@@ -0,0 +1,28 @@
+.dcomp-thumbnail-list-container {
+	display: flex;
+	flex-wrap: wrap;
+
+	figure,
+	figcaption {
+		all: unset;
+	}
+
+	a {
+		color: unset;
+		text-decoration: unset;
+	}
+
+	.dcomp-thumbnail-list-thumbnail {
+		flex: 0 0 calc(var(--max-thumbnail-width) - 2 * var(--image-padding));
+		text-align: center;
+		padding: var(--image-padding);
+		width: 0;
+
+		.dcomp-thumbnail-list-image {
+			&-square {
+				object-fit: cover;
+				aspect-ratio: 1 / 1;
+			}
+		}
+	}
+}