Skip to content

Commit 6356f60

Browse files
steadyfallsteadyfall
committed
chore: replace anchor tags with arrows to LinkWithArrow component
1 parent e88da5e commit 6356f60

File tree

6 files changed

+75
-67
lines changed

6 files changed

+75
-67
lines changed

‎src/components/About.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { ArrowUpRight } from "lucide-react"
21
import BlurFade, { BLUR_FADE_DELAY } from "@/components/ui/BlurFade";
32
import Highlight from "@/components/ui/Highlighter";
43
import { cn } from "@/lib/utils";
4+
import LinkWithArrow from "@/components/ui/LinkWithArrow";
55

66
const About = () => {
77
return (
@@ -38,18 +38,18 @@ const About = () => {
3838
</div>
3939
<p>
4040
For those of you curious, the favicon is a <Highlight text="4-hypercube graph" color="cyan" /> made via Python, using NetworkX and Matplotlib.
41-
Check <a
41+
Check <LinkWithArrow
4242
href="/icon.ico" target="_blank"
43-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-orange-500"
43+
className="mr-1 hover:underline hover:underline-offset-2 text-orange-500"
4444
>
45-
it <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
46-
</a>
47-
out and learn <a
45+
it
46+
</LinkWithArrow>
47+
out and learn <LinkWithArrow
4848
href="https://en.wikipedia.org/wiki/Hypercube_graph" target="_blank"
49-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-blue-violet-500"
49+
className="mr-1 hover:underline hover:underline-offset-2 text-blue-violet-500"
5050
>
51-
more <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
52-
</a>.
51+
more
52+
</LinkWithArrow>.
5353
</p>
5454
</div>
5555
</BlurFade>

‎src/components/Education.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useMediaQuery } from '@/hooks/useMediaQuery'
2-
import { ArrowUpRight } from 'lucide-react'
2+
import LinkWithArrow from "@/components/ui/LinkWithArrow";
33
import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
44
import { cn } from '@/lib/utils'
55

@@ -29,14 +29,14 @@ export function Education() {
2929
<div className={"pl-16 " + (isDesktop && "py-3")}>
3030
<div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
3131
<div>
32-
<a
32+
<LinkWithArrow
3333
href="https://uwaterloo.ca/" target="_blank"
3434
rel="noopener noreferrer" aria-label={`Link to University of Waterloo`}
3535
>
3636
<h2 className="text-xl font-bold inline-flex items-center">
37-
University of Waterloo <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
37+
University of Waterloo
3838
</h2>
39-
</a>
39+
</LinkWithArrow>
4040
<h3 className="text-lg font-semibold">Bachelor of Mathematics, Computational Mathematics Major</h3>
4141
{(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>}
4242
</div>
@@ -46,12 +46,12 @@ export function Education() {
4646
</div>
4747
</div>
4848
<p className="text-gray-700 dark:text-gray-300 mt-1 py-0">
49-
<a
49+
<LinkWithArrow
5050
href="https://uwaterloo.ca/computational-mathematics/" target="_blank"
51-
rel="noopener noreferrer"className="inline-flex items-center"
51+
rel="noopener noreferrer" className="mr-0.5"
5252
>
53-
Computational Mathematics <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
54-
</a> is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer Science, offered by the Faculty of Mathematics.
53+
Computational Mathematics
54+
</LinkWithArrow> is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer Science, offered by the Faculty of Mathematics.
5555
{/* TODO: Insert all courses using a recursive React component */}
5656
</p>
5757
</BlurFade>

‎src/components/Footer.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ArrowUpRight } from "lucide-react"
1+
import LinkWithArrow from "@/components/ui/LinkWithArrow";
22
import { detailsForMetadata, personalDetails } from "@/data/resume"
33
import { cn } from "@/lib/utils"
44

@@ -12,21 +12,24 @@ const Footer = () => {
1212
"mx-auto max-w-full px-4 sm:px-12 md:px-16 lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl"
1313
)}>
1414
<div className="flex justify-center md:justify-start space-x-4">
15-
<a href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
16-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-pink-500"
15+
<LinkWithArrow
16+
href={personalDetails.githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
17+
className="hover:underline hover:underline-offset-2 text-pink-500"
1718
>
18-
github <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
19-
</a>
20-
<a href={personalDetails.linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
21-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-thunderbird-600"
19+
github
20+
</LinkWithArrow>
21+
<LinkWithArrow
22+
href={personalDetails.linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
23+
className="hover:underline hover:underline-offset-2 text-thunderbird-600"
2224
>
23-
linkedin <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
24-
</a>
25-
<a href={`mailto:` + personalDetails.email} aria-label="Email"
26-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
25+
linkedin
26+
</LinkWithArrow>
27+
<LinkWithArrow
28+
href={`mailto:` + personalDetails.email} aria-label="Email"
29+
className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
2730
>
28-
email <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
29-
</a>
31+
email
32+
</LinkWithArrow>
3033
</div>
3134
<div className="mt-6 sm:mt-0">
3235
&copy; 2024 {new URL(detailsForMetadata.baseUrl).hostname}

‎src/components/Header.tsx‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { ArrowUpRight, Copy, CopyCheck } from 'lucide-react'
1+
import { Copy, CopyCheck } from 'lucide-react'
22
import { useMediaQuery } from '@/hooks/useMediaQuery'
3+
import LinkWithArrow from "@/components/ui/LinkWithArrow";
34
import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
45
import Image from 'next/image'
56

@@ -46,32 +47,36 @@ const Header = ({name, pronouns, currentEducation, currentJob, githubLink, linke
4647
</BlurFade>
4748
<div className="flex justify-center md:justify-start mt-4 space-x-4">
4849
<BlurFade delay={BLUR_FADE_DELAY}>
49-
<a href={githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
50-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-pink-500"
50+
<LinkWithArrow
51+
href={githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub"
52+
className="hover:underline hover:underline-offset-2 text-pink-500"
5153
>
52-
github <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
53-
</a>
54+
github
55+
</LinkWithArrow>
5456
</BlurFade>
5557
<BlurFade delay={BLUR_FADE_DELAY}>
56-
<a href={linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
57-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-thunderbird-600"
58+
<LinkWithArrow
59+
href={linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
60+
className="hover:underline hover:underline-offset-2 text-thunderbird-600"
5861
>
59-
linkedin <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
60-
</a>
62+
linkedin
63+
</LinkWithArrow>
6164
</BlurFade>
6265
<BlurFade delay={BLUR_FADE_DELAY}>
63-
<a href={`mailto:` + email} aria-label="Email"
64-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
66+
<LinkWithArrow
67+
href={`mailto:` + email} aria-label="Email"
68+
className="hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
6569
>
66-
email <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
67-
</a>
70+
email
71+
</LinkWithArrow>
6872
</BlurFade>
6973
<BlurFade delay={BLUR_FADE_DELAY}>
70-
<a href={`/` + resumeFile} target="_blank" aria-label="Resume"
71-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-neon-green-500 dark:text-neon-green-400"
74+
<LinkWithArrow
75+
href={`/` + resumeFile} target="_blank" aria-label="Resume"
76+
className="hover:underline hover:underline-offset-2 text-neon-green-500 dark:text-neon-green-400"
7277
>
73-
resume <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
74-
</a>
78+
resume
79+
</LinkWithArrow>
7580
</BlurFade>
7681
</div>
7782
<div className="mt-4 text-sm md:text-base lg:text-lg">

‎src/components/Tiles/ExperienceTile.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ArrowUpRight, Briefcase } from 'lucide-react'
1+
import LinkWithArrow from "@/components/ui/LinkWithArrow";
22
import { useMediaQuery } from '@/hooks/useMediaQuery'
33
import Image from 'next/image'
44

@@ -32,14 +32,14 @@ export function ExperienceTile({ companyLogo, companyName, companyLink, position
3232
<div className="flex flex-col md:items-start justify-between sm:flex-row mb-4">
3333
<div>
3434
<h2 className="text-xl font-bold">{position}</h2>
35-
<a
35+
<LinkWithArrow
3636
href={companyLink} target="_blank"
3737
rel="noopener noreferrer" aria-label={`Link to ${companyName}`}
3838
>
39-
<h3 className="text-lg font-semibold inline-flex items-center">
40-
{companyName} <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
39+
<h3 className="text-lg font-semibold">
40+
{companyName}
4141
</h3>
42-
</a>
42+
</LinkWithArrow>
4343
{(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>}
4444
</div>
4545
{isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>)}

‎src/components/Tiles/ProjectTile.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ArrowUpRight } from 'lucide-react'
1+
import { Icon } from '@iconify/react';
2+
import { techIcons } from '@/lib/techIcons';
23
import { useMediaQuery } from '@/hooks/useMediaQuery'
34
import { Badge } from '@/components/ui/Badge'
45
import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
5-
import { Icon } from '@iconify/react';
6-
import { techIcons } from '@/lib/techIcons';
6+
import LinkWithArrow from "@/components/ui/LinkWithArrow";
77

88
type ProjectTileDetailProps = {
99
title: string
@@ -27,22 +27,22 @@ export function ProjectTile({ delayTime, title, description, repo, repoUrl, live
2727
<h3 className="text-xl font-semibold">{title}</h3>
2828
<div className="space-x-2 justify-end">
2929
{repo && (
30-
<a
31-
href={repoUrl} target="_blank"
32-
rel="noopener noreferrer" aria-label={`Repository link for ${title}`}
33-
className="text-pink-500 inline-flex items-center hover:underline hover:underline-offset-2"
30+
<LinkWithArrow
31+
href={repoUrl} target="_blank"
32+
rel="noopener noreferrer" aria-label={`Repository link for ${title}`}
33+
className="hover:underline hover:underline-offset-2 text-pink-500"
3434
>
35-
repo <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
36-
</a>
35+
repo
36+
</LinkWithArrow>
3737
)}
3838
{live && (
39-
<a
40-
href={liveUrl} target="_blank"
41-
rel="noopener noreferrer" aria-label={`Live link for ${title}`}
42-
className="text-midnight-blue-500 inline-flex items-center hover:underline hover:underline-offset-2"
39+
<LinkWithArrow
40+
href={liveUrl} target="_blank"
41+
rel="noopener noreferrer" aria-label={`Live link for ${title}`}
42+
className="hover:underline hover:underline-offset-2 text-midnight-blue-500"
4343
>
44-
link <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
45-
</a>
44+
link
45+
</LinkWithArrow>
4646
)}
4747
</div>
4848
</div>

0 commit comments

Comments
 (0)