Skip to content

Commit e2eeaff

Browse files
steadyfallsteadyfall
committed
feat: abstracted Header section and added Copy button for email
1 parent 2ae5afb commit e2eeaff

File tree

5 files changed

+86
-18
lines changed

5 files changed

+86
-18
lines changed

‎site/package-lock.json

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"class-variance-authority": "^0.7.0",
1414
"clsx": "^2.1.1",
15+
"copy-to-clipboard": "^3.3.3",
1516
"devicons-react": "^1.3.0",
1617
"framer-motion": "^11.11.8",
1718
"lucide-react": "^0.445.0",

‎site/src/app/config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ export const detailsForMetadata = {
66
description: "A sleek, minimalistic and dynamic personal website built with React, TailwindCSS, Next.js and Framer Motion."
77
};
88

9+
export const personalDetails = {
10+
name: "Himank Dave",
11+
pronouns: "he/him/his",
12+
currentEducation: "3A Computational Mathematics @ UWaterloo",
13+
githubLink: "https://github.com/steadyfall",
14+
linkedinLink: "https://www.linkedin.com/in/himank-dave/",
15+
email: "[email protected]",
16+
resumeFile: "resume.pdf",
17+
}
18+
919
export const experiencesArray = [
1020
{
1121
companyLogo: "/images/cactuscreatives.png",

‎site/src/app/page.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@ import { Projects } from '@/components/Projects'
88
import { Education } from '@/components/Education'
99
import { Skills } from '@/components/Skills';
1010
import Navbar from '@/components/Navbar';
11-
import { experiencesArray, projectsArray, skillsArray } from '@/app/config';
11+
import { personalDetails, experiencesArray, projectsArray, skillsArray } from '@/app/config';
1212

1313
export default function Portfolio() {
1414
return (
1515
<div className="bg-neutral-100 dark:bg-neutral-950 text-gray-800 dark:text-gray-200 transition-colors duration-300">
1616
<Navbar />
1717
<div className="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">
18-
<Header />
18+
<Header {...personalDetails} />
1919
<main className="container mx-auto px-4 py-8 z-1">
2020
<About />
21-
<Experiences arr={experiencesArray}/>
21+
<Experiences arr={experiencesArray} />
2222
<Education />
2323
<Skills arr={skillsArray}/>
24-
<Projects arr={projectsArray}/>
24+
<Projects arr={projectsArray} />
2525
</main>
2626
<Footer />
2727
</div>

‎site/src/components/Header.tsx

Lines changed: 57 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
1-
import { ArrowUpRight } from 'lucide-react'
1+
import { ArrowUpRight, Copy, CopyCheck } from 'lucide-react'
22
import ThemeSwitch from './ThemeSwitch'
33
import { useMediaQuery } from '@/hooks/useMediaQuery'
44
import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
55
import Image from 'next/image'
66

7-
const Header = () => {
7+
import { useEffect, useState } from 'react';
8+
import copy from 'copy-to-clipboard';
9+
10+
export type HeaderProps = {
11+
name: string,
12+
pronouns: string,
13+
currentEducation: string,
14+
currentJob?: string,
15+
githubLink: string,
16+
linkedinLink: string,
17+
email: string,
18+
resumeFile: string,
19+
}
20+
21+
const Header = ({name, pronouns, currentEducation, currentJob, githubLink, linkedinLink, email, resumeFile}: HeaderProps) => {
822
const isDesktop = useMediaQuery('(min-width: 768px)')
9-
const githubLink: string = "https://github.com/steadyfall"
10-
const linkedinLink: string = "https://www.linkedin.com/in/himank-dave/"
23+
const [copied, setCopiedId] = useState<string>();
24+
useEffect(() => { setTimeout(() => { setCopiedId(undefined); }, 3000) }, [copied]);
25+
1126
return (
1227
<header className="container mx-auto px-4 py-8">
1328
<div className="flex flex-col md:flex-row items-center justify-between">
@@ -27,7 +42,7 @@ const Header = () => {
2742
<div className="flex-grow text-center md:text-left">
2843
<BlurFade delay={BLUR_FADE_DELAY}>
2944
<div className="flex items-center justify-center md:justify-start">
30-
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mr-4">Himank Dave</h1>
45+
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mr-4">{name}</h1>
3146
<ThemeSwitch />
3247
</div>
3348
</BlurFade>
@@ -47,29 +62,57 @@ const Header = () => {
4762
</a>
4863
</BlurFade>
4964
<BlurFade delay={BLUR_FADE_DELAY}>
50-
<a href="mailto:[email protected]" aria-label="Email"
65+
<a href={`mailto:` + email} aria-label="Email"
5166
className="inline-flex items-center hover:underline hover:underline-offset-2 text-azure-radiance-600" // text-orange-500"
5267
>
5368
email <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
5469
</a>
5570
</BlurFade>
5671
<BlurFade delay={BLUR_FADE_DELAY}>
57-
<a href="/resume.pdf" target="_blank" aria-label="Resume"
72+
<a href={`/` + resumeFile} target="_blank" aria-label="Resume"
5873
className="inline-flex items-center hover:underline hover:underline-offset-2 text-neon-green-500 dark:text-neon-green-400"
5974
>
6075
resume <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
6176
</a>
6277
</BlurFade>
6378
</div>
6479
<div className="mt-4 text-sm md:text-base lg:text-lg">
80+
{pronouns && (<BlurFade delay={BLUR_FADE_DELAY}>
81+
<p>{pronouns}</p>
82+
</BlurFade>)}
83+
{currentJob && (<BlurFade delay={BLUR_FADE_DELAY}>
84+
<p>{currentJob}</p>
85+
</BlurFade>)}
86+
{currentEducation && (<BlurFade delay={BLUR_FADE_DELAY}>
87+
<p>{currentEducation}</p>
88+
</BlurFade>)}
6589
<BlurFade delay={BLUR_FADE_DELAY}>
66-
<p>he/him/his</p>
67-
</BlurFade>
68-
<BlurFade delay={BLUR_FADE_DELAY}>
69-
<p>3A Computational Mathematics @ UWaterloo</p>
70-
</BlurFade>
71-
<BlurFade delay={BLUR_FADE_DELAY}>
72-
<p className="font-typewriter">hddave[at]uwaterloo.ca</p>
90+
<div className="inline-flex">
91+
<p className="font-typewriter">
92+
{email.split('').map(
93+
(char) => {
94+
return (char === '@') ? "[at]" : char;
95+
}
96+
)}
97+
</p>
98+
<button
99+
className="ml-3 text-slate-600 dark:text-slate-300 hover:text-black dark:hover:text-white cursor-pointer"
100+
onClick={async () => {
101+
if ('clipboard' in navigator) {
102+
await navigator.clipboard.writeText(email);
103+
} else {
104+
copy(email);
105+
}
106+
setCopiedId('copied-email');
107+
}}
108+
>
109+
{
110+
copied === 'copied-email'
111+
? <CopyCheck className="w-4 h-4 md:w-5 md:h-5"/>
112+
: <Copy className="w-4 h-4 md:w-5 md:h-5"/>
113+
}
114+
</button>
115+
</div>
73116
</BlurFade>
74117
</div>
75118
</div>

0 commit comments

Comments
 (0)