Skip to content

Commit f0ae138

Browse files
GRA0007GRA0007
committed
Use new image info
1 parent 1c633ee commit f0ae138

File tree

6 files changed

+38
-38
lines changed

6 files changed

+38
-38
lines changed

‎app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { DesignWork } from '/components/DesignWork'
22
import { Eyes } from '/components/Eyes'
33
import { ProjectCard } from '/components/ProjectCard'
44
import { Socials } from '/components/Socials'
5+
import { DESIGN_WORK } from '/res/designWork'
56
import { PROJECTS } from '/res/projects'
6-
import { DESIGNWORK } from '../res/design'
77
import { AllProjects } from './projects'
88

99
const projectCards = PROJECTS.map((project) => <ProjectCard key={project.name} {...project} />)
@@ -55,7 +55,7 @@ const Home = async () => {
5555

5656
<section className="bg-light py-14 text-dark">
5757
<h1 className="mb-10 px-gutter text-4xl">Design Work</h1>
58-
{DESIGNWORK.map((work) => (
58+
{DESIGN_WORK.map((work) => (
5959
<DesignWork key={work.name} {...work} />
6060
))}
6161
</section>

‎components/DesignWork/index.tsx‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,39 @@
1-
import type { DesignWork as DesignWorkProps } from '../../res/design'
1+
import { useId } from 'react'
2+
import type { DesignWork as DesignWorkProps } from '/res/designWork'
3+
4+
export const DesignWork = ({ name, image, href }: DesignWorkProps) => {
5+
const id = useId()
26

3-
export const DesignWork = ({ name, imageURL, href }: DesignWorkProps) => {
47
return (
58
<a
69
href={href}
7-
className="!no-underline group relative flex items-center px-gutter py-2 transition-[font-weight,color] hover:font-black hover:text-light"
10+
className="!no-underline group transition-[font-weight,color] hover:font-black hover:text-light"
811
target="_blank"
12+
aria-labelledby={id}
913
>
10-
<img
11-
src={imageURL}
12-
alt=""
13-
className="-translate-x-1.5 absolute inset-0 h-full w-full bg-dark object-cover opacity-0 transition-[opacity,translate] group-hover:translate-x-0 group-hover:opacity-100"
14-
/>
15-
<div className="absolute inset-0 bg-dark/60 opacity-0 transition-opacity group-hover:opacity-100" />
14+
<article className="relative flex items-center px-gutter py-2">
15+
<img
16+
src={`https://benji-portfolio.s3.ap-southeast-2.amazonaws.com/Portfolio/Design+Work/${image}`}
17+
alt=""
18+
className="-translate-x-1.5 absolute inset-0 h-full w-full bg-dark object-cover opacity-0 transition-[opacity,translate] group-hover:translate-x-0 group-hover:opacity-100"
19+
/>
20+
<div className="absolute inset-0 bg-dark/60 opacity-0 transition-opacity group-hover:opacity-100" />
1621

17-
<h1 className="relative z-10 flex-1 underline">{name}</h1>
22+
<h1 className="relative z-10 flex-1 underline" id={id}>
23+
{name}
24+
</h1>
1825

19-
<svg
20-
viewBox="0 0 85 85"
21-
fill="none"
22-
xmlns="http://www.w3.org/2000/svg"
23-
width="56"
24-
height="56"
25-
className="relative z-10 h-14 w-14 stroke-4 transition-[stroke-width] group-hover:stroke-7"
26-
>
27-
<path d="M42.5 17.7083L67.2917 42.4999L42.5 67.2916M17.7083 42.4999H67.2917H17.7083Z" stroke="currentColor" />
28-
</svg>
26+
<svg
27+
viewBox="0 0 85 85"
28+
fill="none"
29+
xmlns="http://www.w3.org/2000/svg"
30+
width="56"
31+
height="56"
32+
className="relative z-10 h-14 w-14 stroke-4 transition-[stroke-width] group-hover:stroke-7"
33+
>
34+
<path d="M42.5 17.7083L67.2917 42.4999L42.5 67.2916M17.7083 42.4999H67.2917H17.7083Z" stroke="currentColor" />
35+
</svg>
36+
</article>
2937
</a>
3038
)
3139
}

‎components/ProjectCard/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useId } from 'react'
22
import type { Project as ProjectProps } from '/res/projects'
33

4-
export const ProjectCard = ({ name, description, imageURL, href }: ProjectProps) => {
4+
export const ProjectCard = ({ name, description, image, href }: ProjectProps) => {
55
const id = useId()
66

77
return (
@@ -12,7 +12,11 @@ export const ProjectCard = ({ name, description, imageURL, href }: ProjectProps)
1212
aria-describedby={`${id}-description`}
1313
>
1414
<article>
15-
<img src={imageURL} alt="" className="aspect-video w-full rounded-2xl bg-current object-cover" />
15+
<img
16+
src={`https://benji-portfolio.s3.ap-southeast-2.amazonaws.com/Portfolio/Projects/${image.src}`}
17+
alt={image.alt}
18+
className="aspect-video w-full rounded-2xl bg-current object-cover"
19+
/>
1620
<h1 id={`${id}-title`} className="mt-4 mb-0.5 font-semibold text-xl group-hover:underline">
1721
{name}
1822
</h1>

‎components/Socials/Socials.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,6 @@ export const SOCIAL_LINKS: Link[] = [
3232
</svg>
3333
),
3434
},
35-
{
36-
title: 'Notion',
37-
href: 'https://benjibenji.notion.site/',
38-
icon: (
39-
<svg viewBox="12 0.18999999999999906 487.619 510.941" width="24" height="24" fill="currentColor">
40-
<path
41-
d="M96.085 91.118c15.81 12.845 21.741 11.865 51.43 9.884l279.888-16.806c5.936 0 1-5.922-.98-6.906L379.94 43.686c-8.907-6.915-20.773-14.834-43.516-12.853L65.408 50.6c-9.884.98-11.858 5.922-7.922 9.883zm16.804 65.228v294.491c0 15.827 7.909 21.748 25.71 20.769l307.597-17.799c17.81-.979 19.794-11.865 19.794-24.722V136.57c0-12.836-4.938-19.758-15.84-18.77l-321.442 18.77c-11.863.997-15.82 6.931-15.82 19.776zm303.659 15.797c1.972 8.903 0 17.798-8.92 18.799l-14.82 2.953v217.412c-12.868 6.916-24.734 10.87-34.622 10.87-15.831 0-19.796-4.945-31.654-19.76l-96.944-152.19v147.248l30.677 6.922s0 17.78-24.75 17.78l-68.23 3.958c-1.982-3.958 0-13.832 6.921-15.81l17.805-4.935V210.7l-24.721-1.981c-1.983-8.903 2.955-21.74 16.812-22.736l73.195-4.934 100.889 154.171V198.836l-25.723-2.952c-1.974-10.884 5.927-18.787 15.819-19.767zM42.653 23.919l281.9-20.76c34.618-2.969 43.525-.98 65.283 14.825l89.986 63.247c14.848 10.876 19.797 13.837 19.797 25.693v346.883c0 21.74-7.92 34.597-35.608 36.564L136.64 510.14c-20.785.991-30.677-1.971-41.562-15.815l-66.267-85.978C16.938 392.52 12 380.68 12 366.828V58.495c0-17.778 7.922-32.608 30.653-34.576z"
42-
fillRule="evenodd"
43-
/>
44-
</svg>
45-
),
46-
},
4735
{
4836
title: 'Keybase',
4937
href: 'https://keybase.io/benpai',

‎components/Socials/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { SOCIAL_LINKS } from './socials'
22

33
export const Socials = () => (
4-
<ul className="mt-8 flex items-center justify-center gap-6">
4+
<ul className="mt-8 flex items-center justify-center gap-6" aria-label="Social links">
55
{SOCIAL_LINKS.map((link) => (
66
<li key={link.title}>
77
<a href={link.href} target="_blank" className="inline-block" title={link.title}>

‎res/design.ts‎ renamed to ‎res/designWork.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export interface DesignWork {
55
href: string
66
}
77

8-
export const DESIGNWORK: DesignWork[] = [
8+
export const DESIGN_WORK: DesignWork[] = [
99
{
1010
name: 'Monash Society for Physics, Astro & Maths Brand Redesign',
1111
image: 'spam_logo.webp',

0 commit comments

Comments
 (0)