Link image assets by reference instead of by name

src/app/pages/About/About.js

@@ -8,8 +8,8 @@ import { Text } from 'app/components';
 import { Section, Space, Icon } from 'app/Symbols.js';
 import ALUMNI_BOARD from 'assets/data/alumniBoard.json';
 import TESTIMONIALS from 'assets/data/boardTestimonials.json';
-import CURRENT_BOARD from 'assets/data/currentBoard.json';
-import CURRENT_INTERNS from 'assets/data/currentBoardInterns.json';
+import CURRENT_BOARD from 'assets/data/currentBoard.js';
+import CURRENT_INTERNS from 'assets/data/currentBoardInterns.js';
 
 import { Profile } from './components';
 import { ReactComponent as LinkArrow } from './link-arrow.svg';

src/app/pages/About/components/Profile/Profile.js

@@ -6,13 +6,7 @@ const Profile = ({ textOnly = false, data }) => (
 	<div className={cn.container}>
 		{!textOnly && (
 			<div className={cn.aspect}>
-				<img
-					src={
-						require(`assets/images/board/current/${data.photo}`)
-							.default
-					}
-					alt={data.name + ' headshot'}
-				/>
+				<img src={data.photo} alt={'Headshot of ' + data.name} />
 			</div>
 		)}
 		<p>

src/app/pages/Designathons/Designathon22.js

@@ -7,9 +7,9 @@ import { Section, Space, Icon, Photo } from 'app/Symbols.js';
 import { Text } from 'app/components';
 import { Judges, Prizes, Rules, SectionNavigation, WinnerShowcase, WorkshopHosts } from './components';
 import WINNERS_2022 from 'assets/data/designathon/2022/winners.json'
-import JUDGES_2022 from 'assets/data/designathon/2022/judges.json'
+import JUDGES_2022 from 'assets/data/designathon/2022/judges.js'
 import PRIZES_2022 from 'assets/data/designathon/2022/prizes.json';
-import WORKSHOP_HOSTS_2022 from 'assets/data/designathon/2022/workshop-hosts.json';
+import WORKSHOP_HOSTS_2022 from 'assets/data/designathon/2022/workshop-hosts.js';
 import RULES_2023 from 'assets/data/designathon/2022/rules.json';
 
 const Designathon22 = () => {

src/app/pages/Designathons/components/Judges/index.jsx

@@ -8,18 +8,21 @@ const Judges = ({ profiles }) => {
 		<Section className={clsx(cn.container, 'flatBot')}>
 			<Text size='XL'>Judges</Text>
 			<div className='split4 s-judges'>
-				{profiles.map(item => (
-					<div className='flex left top spaceChildrenSmall'>
+				{profiles.map((item) => (
+					<div
+						key={item.name}
+						className='flex left top spaceChildrenSmall'
+					>
 						<img
-							src={require(`assets/${item.photo}`).default}
+							src={item.photo}
 							alt={'headshot'}
 							style={{
 								height: 'unset',
 								backgroundColor: 'var(--silver)',
 								width: '100%',
 								position: 'relative',
 							}}
-						 />
+						/>
 						{/* <Text className="color gray">{item.pronouns}</Text> */}
 						<Text size='L'>{item.name}</Text>
 						<Text>{item.role}</Text>

src/app/pages/Designathons/components/Workshop/Hosts.jsx

@@ -6,9 +6,9 @@ const Hosts = ({ profiles }) => (
 		<Text size='XL'>Workshop Hosts</Text>
 		<div className='split4'>
 			{profiles.map(item => (
-				<div className='flex left top spaceChildrenSmall'>
+				<div key={item.name} className='flex left top spaceChildrenSmall'>
 					<img
-						src={require(`assets/${item.photo}`).default}
+						src={item.photo}
 						alt="headshots"
 						style={{
 							height: 'unset',

src/app/pages/Merch/Merch.js

@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet';
 
 import { Text } from 'app/components';
 import { Section } from 'app/Symbols.js';
-import MERCH_LIST from 'assets/data/merchList.json';
+import MERCH_LIST from 'assets/data/merchList.js';
 
 import { MerchDropListing } from './components';
 

src/app/pages/Merch/components/MerchDropListing/MerchDropListing.js

@@ -7,14 +7,7 @@ import MerchItem from '../MerchItem';
 
 import cn from './MerchDropListing.module.scss';
 
-const MerchDropListing = ({
-	name,
-	inStock,
-	buyLink,
-	description,
-	items,
-	path,
-}) => (
+const MerchDropListing = ({ name, inStock, buyLink, description, items }) => (
 	<Section className={clsx(cn.container, 'short')}>
 		<div className='flex left spaceChildren'>
 			<Text size='XL'>{name}</Text>
@@ -40,8 +33,8 @@ const MerchDropListing = ({
 		</div>
 		<Space h='0' />
 		<div className={clsx(cn.split4, 'split4')}>
-			{items.map(item => (
-				<MerchItem key={item.name} path={path} {...item} />
+			{items.map((item) => (
+				<MerchItem key={item.name} {...item} />
 			))}
 		</div>
 	</Section>

src/app/pages/Merch/components/MerchItem/MerchItem.js

@@ -7,14 +7,7 @@ import cn from './MerchItem.module.scss';
 const MerchItem = ({ path, ...item }) => (
 	<div key={item.name} className={cn.container}>
 		<div className={cn.aspect}>
-			<img
-				className={cn.photo}
-				src={
-					require(`../../../../../assets/images/merch/${path}/${item.photo}`)
-						.default
-				}
-				alt={item.name}
-			/>
+			<img className={cn.photo} src={item.photo} alt={item.name} />
 		</div>
 		{/* Currently not adding the holo effect since it requires some planning to incorporate cleanly. @TODO */}
 		{/* {item?.type === 'holo' && (

src/assets/data/currentBoard.js

@@ -0,0 +1,222 @@
+import {
+	headshot_Carly_Chan,
+	headshot_Cinta_Adhiningrat,
+	headshot_Emily_Huynh,
+	headshot_Hannah_Limary,
+	headshot_Isabel_Pham,
+	headshot_Jolin_Huang,
+	headshot_Jorina_Chen,
+	headshot_Karla_Avalos,
+	headshot_Khanh_Tran,
+	headshot_Krey_Daniel,
+	headshot_Kristy_Chung,
+	headshot_Meghna_Kaligotla,
+	headshot_Ryan_Yang,
+	headshot_Sunny_Stetsyuk,
+	headshot_Taesung_Hwang,
+	headshot_Vanna_Vuong,
+	headshot_Vyctoria_Vu,
+	headshot_Yui_Guo,
+	headshot_Zoya_Soy,
+} from 'assets/images/board';
+
+const CURRENT_BOARD = [
+	{
+		name: 'Meghna Kaligotla',
+		position: 'President',
+		photo: headshot_Meghna_Kaligotla,
+		links: [
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/meghna-kaligotla-605/',
+			},
+		],
+	},
+	{
+		name: 'Carly Chan',
+		position: 'Vice President',
+		photo: headshot_Carly_Chan,
+		links: [
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/carlychan/',
+			},
+			{
+				type: 'website',
+				href: 'https://carlychan.com/',
+			},
+			{
+				type: 'instagram',
+				href: 'https://www.instagram.com/_carlychan_/',
+			},
+		],
+	},
+	{
+		name: 'Jolin Huang',
+		position: 'Marketing Director',
+		photo: headshot_Jolin_Huang,
+		links: [
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/jolin-huang-30a4451b0/',
+			},
+			{
+				type: 'website',
+				href: 'https://jolinuxui.myportfolio.com',
+			},
+			{
+				type: 'instagram',
+				href: 'https://www.instagram.com/j.huanggg/',
+			},
+		],
+	},
+	{
+		name: 'Kristy Chung',
+		position: 'Marketing Coordinator',
+		photo: headshot_Kristy_Chung,
+		links: [
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/kristychung1/',
+			},
+			{
+				type: 'instagram',
+				href: 'https://www.instagram.com/kriisty.c/',
+			},
+		],
+	},
+	{
+		name: 'Vyctoria Vu',
+		position: 'Marketing Coordinator',
+		photo: headshot_Vyctoria_Vu,
+	},
+	{
+		name: 'Emily Huynh',
+		position: 'Marketing Coordinator',
+		photo: headshot_Emily_Huynh,
+	},
+	{
+		name: 'Khanh Tran',
+		position: 'Workshop Coordinator',
+		photo: headshot_Khanh_Tran,
+		links: [],
+	},
+	{
+		name: 'Vanna Vuong',
+		position: 'Industry Outreach Coordinator',
+		photo: headshot_Vanna_Vuong,
+	},
+	{
+		name: 'Cinta Adhiningrat',
+		position: 'Industry Outreach Coordinator',
+		photo: headshot_Cinta_Adhiningrat,
+		links: [],
+	},
+	{
+		name: 'Hannah Limary',
+		position: 'Designathon Director',
+		photo: headshot_Hannah_Limary,
+		links: [
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/hannah-limary',
+			},
+			{
+				type: 'website',
+				href: 'https://hannahlimary.squarespace.com/',
+			},
+		],
+	},
+	{
+		name: 'Sunny Stetsyuk',
+		position: 'Project Teams Coordinator',
+		photo: headshot_Sunny_Stetsyuk,
+	},
+	{
+		name: 'Jorina Chen',
+		position: 'Project Teams Coordinator',
+		photo: headshot_Jorina_Chen,
+		links: [
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/jorinachen/',
+			},
+			{
+				type: 'website',
+				href: 'https://www.jorinachen.com/',
+			},
+		],
+	},
+	{
+		name: 'Zoya Soy',
+		position: 'Project Teams Coordinator',
+		photo: headshot_Zoya_Soy,
+	},
+	{
+		name: 'Isabel Pham',
+		position: 'Creative Director',
+		photo: headshot_Isabel_Pham,
+		links: [
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/isabe1pham/',
+			},
+		],
+	},
+	{
+		name: 'Karla Avalos',
+		position: 'Graphic Designer',
+		photo: headshot_Karla_Avalos,
+	},
+	{
+		name: 'Krey Daniel',
+		position: 'Graphic Designer',
+		photo: headshot_Krey_Daniel,
+		links: [
+			{
+				type: 'instagram',
+				href: 'https://www.instagram.com/in.krey.dible/',
+			},
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/krey-daniel/',
+			},
+			{
+				type: 'website',
+				href: 'https://kreydaniel.wixsite.com/inkreydible',
+			},
+		],
+	},
+
+	{
+		name: 'Ryan Yang',
+		position: 'Webmaster',
+		photo: headshot_Ryan_Yang,
+		links: [
+			{
+				type: 'instagram',
+				href: 'https://instagram.com/veryfewsbux',
+			},
+			{
+				type: 'linkedin',
+				href: 'https://www.linkedin.com/in/ryanqyang/',
+			},
+			{
+				type: 'website',
+				href: 'https://ryqn.dev',
+			},
+		],
+	},
+	{
+		name: 'Taesung Hwang',
+		position: 'Webmaster',
+		photo: headshot_Taesung_Hwang,
+	},
+	{
+		name: 'Yui Guo',
+		position: 'Finance Chair',
+		photo: headshot_Yui_Guo,
+	},
+];
+
+export default CURRENT_BOARD;