Skip to content

Commit 231bd6a

Browse files
steadyfallsteadyfall
committed
feat: added BlurFade effect to all sections
1 parent b1fb262 commit 231bd6a

File tree

7 files changed

+198
-135
lines changed

7 files changed

+198
-135
lines changed

‎src/components/About.tsx

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ArrowUpRight } from "lucide-react"
2+
import BlurFade, { BLUR_FADE_DELAY } from "@/components/ui/BlurFade";
23

34
function Highlight(text: string, color = "yellow") {
45
var colorClassName: string = "bg-opacity-50 px-1 rounded ";
@@ -25,38 +26,42 @@ function Highlight(text: string, color = "yellow") {
2526
const About = () => {
2627
return (
2728
<section id="about" className="mb-12">
28-
<h2 className="text-2xl md:text-3xl lg:text-4xl font-section mb-4">About</h2>
29-
<p className="text-gray-700 dark:text-gray-300">
30-
I am a {Highlight("junior")} at the {Highlight("University of Waterloo")}, pursuing a major in {Highlight("Computational Mathematics")}.
31-
With a {Highlight(`passion for technology and innovation`)}, I am constantly exploring new
32-
areas in {Highlight(`software development`)} and {Highlight(`artificial intelligence`)}.
33-
I am eager to work in areas that leverage the combined potential of {Highlight(`machine learning`)} and
34-
software development, regardless of traditional boundaries. <br></br>
35-
Outside of academics and professional career, I enjoy contributing to open-source projects, working on side projects, participating in hackathons and playing
36-
table tennis, football, cricket and badminton. I also like to travel & explore new places, cuisines & restaurants.<br></br>
37-
You can find me {Highlight(`re-watching`, "pink")} any one of these TV series:
38-
{Highlight(`Suits`, "pink")},
39-
{Highlight(`The Office`, "pink")},
40-
{Highlight(`Brooklyn 9-9`, "pink")},
41-
{Highlight(`How I Met Your Mother`, "pink")},
42-
{Highlight(`The Big Bang Theory`, "pink")},
43-
{Highlight(`South Park`, "pink")},
44-
{Highlight(`Impractical Jokers`, "pink")}.
45-
<br></br>
46-
For those of you curious, the favicon is a {Highlight("4-hypercube graph", "cyan")} made via Python, using NetworkX and Matplotlib.
47-
Check the <a
48-
href="/icon.ico" target="_blank"
49-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-orange-500"
50-
>
51-
image <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
52-
</a>
53-
out and learn <a
54-
href="https://en.wikipedia.org/wiki/Hypercube_graph" target="_blank"
55-
className="inline-flex items-center hover:underline hover:underline-offset-2 text-blue-violet-500"
56-
>
57-
more <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
58-
</a>.
59-
</p>
29+
<BlurFade delay={BLUR_FADE_DELAY * 3}>
30+
<h2 className="text-2xl md:text-3xl lg:text-4xl font-section mb-4">About</h2>
31+
</BlurFade>
32+
<BlurFade delay={BLUR_FADE_DELAY * 4}>
33+
<p className="text-gray-700 dark:text-gray-300">
34+
I am a {Highlight("junior")} at the {Highlight("University of Waterloo")}, pursuing a major in {Highlight("Computational Mathematics")}.
35+
With a {Highlight(`passion for technology and innovation`)}, I am constantly exploring new
36+
areas in {Highlight(`software development`)} and {Highlight(`artificial intelligence`)}.
37+
I am eager to work in areas that leverage the combined potential of {Highlight(`machine learning`)} and
38+
software development, regardless of traditional boundaries. <br></br>
39+
Outside of academics and professional career, I enjoy contributing to open-source projects, working on side projects, participating in hackathons and playing
40+
table tennis, football, cricket and badminton. I also like to travel & explore new places, cuisines & restaurants.<br></br>
41+
You can find me {Highlight(`re-watching`, "pink")} any one of these TV series:
42+
{Highlight(`Suits`, "pink")},
43+
{Highlight(`The Office`, "pink")},
44+
{Highlight(`Brooklyn 9-9`, "pink")},
45+
{Highlight(`How I Met Your Mother`, "pink")},
46+
{Highlight(`The Big Bang Theory`, "pink")},
47+
{Highlight(`South Park`, "pink")},
48+
{Highlight(`Impractical Jokers`, "pink")}.
49+
<br></br>
50+
For those of you curious, the favicon is a {Highlight("4-hypercube graph", "cyan")} made via Python, using NetworkX and Matplotlib.
51+
Check the <a
52+
href="/icon.ico" target="_blank"
53+
className="inline-flex items-center hover:underline hover:underline-offset-2 text-orange-500"
54+
>
55+
image <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
56+
</a>
57+
out and learn <a
58+
href="https://en.wikipedia.org/wiki/Hypercube_graph" target="_blank"
59+
className="inline-flex items-center hover:underline hover:underline-offset-2 text-blue-violet-500"
60+
>
61+
more <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
62+
</a>.
63+
</p>
64+
</BlurFade>
6065
</section>
6166
)
6267
}

‎src/components/Education.tsx

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,56 @@
11
import { useMediaQuery } from '@/hooks/useMediaQuery'
22
import { ArrowUpRight } from 'lucide-react'
3+
import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
34

45
export function Education() {
56
const isDesktop = useMediaQuery('(min-width: 768px)')
67
return (
78
<section id="education" className="mb-12">
8-
<h2 className="text-2xl md:text-3xl lg:text-4xl font-section font-bold mb-4">Education</h2>
9-
<div className="flex items-center">
10-
<div className="relative flex-grow md:pl-12">
11-
<div className={"bg-white aspect-square absolute left-[5px] rounded-lg"}>
12-
{/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
13-
<img
14-
src="/images/uwaterlooLogo.png"
15-
alt={`University of Waterloo logo`}
16-
width={isDesktop ? 80 : 45}
17-
height={isDesktop ? 80 : 45}
18-
className="rounded-md"
19-
/>
20-
</div>
21-
<div className={"pl-16 " + (isDesktop && "py-3")}>
22-
<div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
23-
<div>
24-
<a
25-
href="https://uwaterloo.ca/" target="_blank"
26-
rel="noopener noreferrer" aria-label={`Link to University of Waterloo`}
27-
>
28-
<h2 className="text-xl font-bold inline-flex items-center">
29-
University of Waterloo <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
30-
</h2>
31-
</a>
32-
<h3 className="text-lg font-semibold">Bachelor of Mathematics, Computational Mathematics Major</h3>
33-
{(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>}
9+
<BlurFade delay={BLUR_FADE_DELAY * 7}>
10+
<h2 className="text-2xl md:text-3xl lg:text-4xl font-section font-bold mb-4">Education</h2>
11+
</BlurFade>
12+
<BlurFade delay={BLUR_FADE_DELAY * 8}>
13+
<div className="flex items-center">
14+
<div className="relative flex-grow md:pl-12">
15+
<div className={"bg-white aspect-square absolute left-[5px] rounded-lg"}>
16+
{/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
17+
<img
18+
src="/images/uwaterlooLogo.png"
19+
alt={`University of Waterloo logo`}
20+
width={isDesktop ? 80 : 45}
21+
height={isDesktop ? 80 : 45}
22+
className="rounded-md"
23+
/>
24+
</div>
25+
<div className={"pl-16 " + (isDesktop && "py-3")}>
26+
<div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
27+
<div>
28+
<a
29+
href="https://uwaterloo.ca/" target="_blank"
30+
rel="noopener noreferrer" aria-label={`Link to University of Waterloo`}
31+
>
32+
<h2 className="text-xl font-bold inline-flex items-center">
33+
University of Waterloo <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
34+
</h2>
35+
</a>
36+
<h3 className="text-lg font-semibold">Bachelor of Mathematics, Computational Mathematics Major</h3>
37+
{(!isDesktop) && <h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>}
38+
</div>
39+
{isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>)}
3440
</div>
35-
{isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">Sept 2022 - Present</h3>)}
3641
</div>
3742
</div>
3843
</div>
39-
</div>
40-
<p className="text-gray-700 dark:text-gray-300 mt-1 py-0">
41-
<a
42-
href="https://uwaterloo.ca/computational-mathematics/" target="_blank"
43-
rel="noopener noreferrer"className="inline-flex items-center"
44-
>
45-
Computational Mathematics <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
46-
</a> is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer Science, offered by the Faculty of Mathematics.
47-
{/* TODO: Insert all courses using a recursive React component */}
48-
</p>
44+
<p className="text-gray-700 dark:text-gray-300 mt-1 py-0">
45+
<a
46+
href="https://uwaterloo.ca/computational-mathematics/" target="_blank"
47+
rel="noopener noreferrer"className="inline-flex items-center"
48+
>
49+
Computational Mathematics <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
50+
</a> is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer Science, offered by the Faculty of Mathematics.
51+
{/* TODO: Insert all courses using a recursive React component */}
52+
</p>
53+
</BlurFade>
4954
</section>
5055
)
5156
}

‎src/components/Experiences.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { useState, useEffect } from 'react'
44
import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile'
5+
import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
56

67
interface ExperiencesProps {
78
arr: ExperienceTileProps[];
@@ -11,11 +12,18 @@ export function Experiences({ arr }: ExperiencesProps) {
1112
const [experiences, setExperiences] = useState(arr)
1213
return (
1314
<section id="experience" className="mb-12">
14-
<h2 className="text-2xl md:text-3xl lg:text-4xl font-section mb-4">Experience</h2>
15+
<BlurFade delay={BLUR_FADE_DELAY * 5}>
16+
<h2 className="text-2xl md:text-3xl lg:text-4xl font-section mb-4">Experience</h2>
17+
</BlurFade>
1518
{experiences && experiences.length > 0 ? (
1619
<div className="space-y-6">
1720
{experiences.map((experience, index) => (
18-
<ExperienceTile key={index} {...experience} />
21+
<BlurFade
22+
key={index}
23+
delay={BLUR_FADE_DELAY * 6 + index * 0.05}
24+
>
25+
<ExperienceTile key={index} {...experience} />
26+
</BlurFade>
1927
))}
2028
</div>
2129
) : (

‎src/components/Footer.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1+
import { Heart } from "lucide-react"
2+
13
const Footer = () => {
24
return (
35
<footer className="mt-2 py-6 text-center text-gray-500 dark:text-gray-400">
4-
<p>&copy; 2024 <span className="underline underline-offset-4">Himank Dave</span>. All rights reserved.</p>
6+
<p>
7+
Designed & built with <span className="inline-flex items-center">
8+
<Heart className="w-3 h-3 md:w-4 md:h-4" color="#ff4444"/>
9+
</span> by <span className="underline underline-offset-4">Himank Dave</span>. Take inspirations from this, as long as you credit me.
10+
</p>
511
</footer>
612
)
713
}

0 commit comments

Comments
 (0)