Skip to content

Commit e8671dd

Browse files
retz8retz8
committed
feat: updated all the contents of the portfolio (done)
1 parent 6319776 commit e8671dd

15 files changed

Lines changed: 655 additions & 242 deletions

‎package-lock.json‎

Lines changed: 372 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@radix-ui/react-hover-card": "1.1.13",
1314
"@radix-ui/react-slot": "1.2.2",
1415
"@tailwindcss/vite": "4.1.5",
1516
"class-variance-authority": "0.7.1",

‎src/components/HoverLinkIcon.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from "react";
2+
import {
3+
HoverCard,
4+
HoverCardContent,
5+
HoverCardTrigger,
6+
} from "@/components/ui/hover-card";
7+
8+
interface HoverLinkIconProps {
9+
url: string;
10+
description: string;
11+
icon: React.ReactNode;
12+
}
13+
14+
/**
15+
* HoverLinkIcon is a component that displays a link icon and a hover card when the icon is hovered over.
16+
* @param url - The URL of the link.
17+
* @param description - The description of the link.
18+
* @param icon - The icon to display.
19+
* @returns A React component that displays a link icon and a hover card when the icon is hovered over.
20+
*
21+
* If description is empty, it is not hoverable.
22+
*/
23+
export default function HoverLinkIcon({
24+
url,
25+
description,
26+
icon,
27+
}: HoverLinkIconProps) {
28+
const isHoverable = description !== "";
29+
30+
if (!isHoverable) {
31+
return (
32+
<a href={url} target="_blank" className="hover:text-muted-foreground">
33+
{icon}
34+
</a>
35+
);
36+
}
37+
38+
return (
39+
<a
40+
key={url}
41+
href={url}
42+
target="_blank"
43+
className="hover:text-muted-foreground"
44+
>
45+
<HoverCard>
46+
<HoverCardTrigger>{icon}</HoverCardTrigger>
47+
<HoverCardContent className="w-fit py-1 px-3 text-sm">
48+
<span>{description}</span>
49+
</HoverCardContent>
50+
</HoverCard>
51+
</a>
52+
);
53+
}

‎src/components/ui/hover-card.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as React from "react"
2+
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
function HoverCard({
7+
...props
8+
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
9+
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
10+
}
11+
12+
function HoverCardTrigger({
13+
...props
14+
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
15+
return (
16+
<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
17+
)
18+
}
19+
20+
function HoverCardContent({
21+
className,
22+
align = "center",
23+
sideOffset = 4,
24+
...props
25+
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
26+
return (
27+
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
28+
<HoverCardPrimitive.Content
29+
data-slot="hover-card-content"
30+
align={align}
31+
sideOffset={sideOffset}
32+
className={cn(
33+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
34+
className
35+
)}
36+
{...props}
37+
/>
38+
</HoverCardPrimitive.Portal>
39+
)
40+
}
41+
42+
export { HoverCard, HoverCardTrigger, HoverCardContent }

‎src/data/experiencesData.js‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎src/data/projectsData.js‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎src/domains/portfolio/components/AboutMe.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ export default function AboutMe() {
66
<p>
77
I'm a developer who values{" "}
88
<span className="font-semibold text-foreground">UX and DX</span>, always
9-
seeking better structures and more efficient dev environments. I believe
10-
that great technology emerges from collaboration, clear communication,
11-
and commitment to continuous improvement.
9+
striving to create seamless experiences and intuitive development
10+
environments. I double down on clean architecture, readable code, and
11+
scalable systems. I believe that great technology is built through clear
12+
communication, attention to detail, and a commitment to constant
13+
refinement.
1214
</p>
1315
{/* 2. 학교 소개 + 과거 경력 간단 요약 */}
1416
<p>
@@ -35,21 +37,10 @@ export default function AboutMe() {
3537

3638
{/* 3. Past Experiences */}
3739
<p>
38-
In the past, I worked as a{" "}
39-
<span className="font-semibold text-foreground">
40-
Research Assistant
41-
</span>{" "}
42-
at{" "}
43-
<a
44-
href="https://umtri.umich.edu"
45-
target="_blank"
46-
className="text-foreground hover:text-michigan-maize font-semibold"
47-
>
48-
UMTRI
49-
</a>
50-
, where I contributed to projects in transportation research. I also
51-
served as Lead Software Engineer for a 7-member team, building apps for
52-
Korean student community.
40+
In the past, I've worked as a developer across diverse environments,
41+
from a research institute to early-stage startups in both the US and
42+
Korea. I also led a 7-member development team, building and operating
43+
live applications for the Korean student community.
5344
</p>
5445

5546
{/* 3. Spare Time: 요리 + 축구 */}

‎src/domains/portfolio/components/ExperienceCard.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,21 @@ const renderJobTitleText = (
1515
<a
1616
href={companyLink}
1717
target="_blank"
18-
className={`flex items-center gap-1 ${companyTailwindColor}`}
18+
className={`flex items-center gap-1 text-foreground font-semibold`}
1919
>
20-
<span className="text-foreground font-semibold">{title} •</span>
21-
<span>{company}</span>
22-
<ArrowUpRight className="w-4 h-4" />
20+
{title} •{" "}
21+
<span className={`${companyTailwindColor} flex items-center`}>
22+
{company}
23+
</span>
24+
<ArrowUpRight className={`w-4 h-4 ${companyTailwindColor}`} />
2325
</a>
2426
);
2527
} else {
2628
return (
27-
<span className={`${companyTailwindColor}`}>
28-
{title} • {company}
29+
<span className="flex items-center">
30+
<span className="text-foreground font-semibold">
31+
{title} • <span className={`${companyTailwindColor}`}>{company}</span>
32+
</span>
2933
</span>
3034
);
3135
}
@@ -36,6 +40,7 @@ export default function ExperienceCard({
3640
company,
3741
companyLink,
3842
companyTailwindColor,
43+
location,
3944
description,
4045
startDate,
4146
endDate,
@@ -59,14 +64,19 @@ export default function ExperienceCard({
5964
companyTailwindColor
6065
)}
6166
</h3>
62-
<p className="text-sm text-muted-foreground">
63-
{startDate} - {endDate}
67+
<p className="text-sm text-muted-foreground flex flex-row items-center gap-2 group-hover:text-foreground">
68+
<span>
69+
{startDate} - {endDate}
70+
</span>
71+
<span>|</span>
72+
<span>{location}</span>
6473
</p>
6574
</div>
66-
<p
67-
className="text-sm text-muted-foreground
68-
group-hover:text-foreground"
69-
>
75+
{/* <div
76+
className="text-sm text-muted-foreground group-hover:text-foreground"
77+
dangerouslySetInnerHTML={{ __html: description }}
78+
/> */}
79+
<p className="text-sm text-muted-foreground group-hover:text-foreground">
7080
{description}
7181
</p>
7282
<ul className="flex flex-wrap gap-2 mt-1">

‎src/domains/portfolio/components/ExperienceList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { experiencesListData } from "@/domains/portfolio/data/experienceData";
1+
import { experiencesListData } from "@/domains/portfolio/data/experienceData.tsx";
22
import ExperienceCard from "@/domains/portfolio/components/ExperienceCard";
33
import Divider from "@/components/ui/divider";
44
export default function ExperiencesList() {

‎src/domains/portfolio/components/ProjectCard.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import { LuExternalLink } from "react-icons/lu";
33

44
import { Card } from "@/components/ui/card";
55
import { Badge } from "@/components/ui/badge";
6+
import HoverLinkIcon from "@/components/HoverLinkIcon";
67

78
import type { Project } from "@/domains/portfolio/types/project";
8-
import { Link } from "react-router-dom";
9-
109
export default function ProjectCard({
1110
id,
1211
title,
@@ -26,16 +25,17 @@ export default function ProjectCard({
2625
<div className="md:w-1/3">
2726
<img
2827
src={imageUrl}
29-
alt={title}
28+
alt={`${id} ${title} image`}
3029
className="z-0 w-full aspect-video object-fit"
3130
/>
3231
</div>
3332

3433
<div className="flex-1 flex flex-col gap-2">
35-
<Link to={`/projects/${id}`}>
36-
<span className="leading-none font-semibold">{title}</span>{" "}
37-
</Link>
38-
34+
{/* <Link to={`/projects/${id}`}> */}
35+
<span className="leading-none font-semibold group-hover:underline">
36+
{title}
37+
</span>{" "}
38+
{/* </Link> */}
3939
<p className="text-sm text-muted-foreground group-hover:text-foreground">
4040
{description}
4141
</p>
@@ -45,15 +45,15 @@ export default function ProjectCard({
4545
{/* links */}
4646
<div className="w-1/3 flex flex-row gap-2">
4747
{githubUrls &&
48-
githubUrls.map((url) => (
49-
<a
48+
githubUrls.map(({ url, description }) => (
49+
<HoverLinkIcon
5050
key={url}
51-
href={url}
52-
target="_blank"
53-
className="hover:text-muted-foreground"
54-
>
55-
<AiFillGithub className="text-xl text-muted-foreground hover:text-foreground" />
56-
</a>
51+
url={url}
52+
description={description}
53+
icon={
54+
<AiFillGithub className="text-xl text-muted-foreground hover:text-foreground" />
55+
}
56+
/>
5757
))}
5858
{websiteUrl && (
5959
<a href={websiteUrl} target="_blank">

0 commit comments

Comments
 (0)