Skip to content

Commit 6e2395e

Browse files
steadyfallsteadyfall
committed
created components for site
1 parent 2fccc8d commit 6e2395e

File tree

8 files changed

+206
-0
lines changed

8 files changed

+206
-0
lines changed

‎src/app/components/about.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function About() {
2+
return (
3+
<section id="about" className="mb-12">
4+
<h2 className="text-2xl font-bold mb-4">About</h2>
5+
<p className="text-gray-700 dark:text-gray-300">
6+
I am a third-year Computational Mathematics student at the University of Waterloo.
7+
With a passion for technology and innovation, I am constantly exploring new
8+
areas in software development and artificial intelligence.
9+
I am eager to work in areas that leverage the combined potential of machine learning and
10+
software development, regardless of traditional boundaries. Outside of academics,
11+
I enjoy contributing to open-source projects and participating in hackathons.
12+
</p>
13+
</section>
14+
)
15+
}

‎src/app/components/experienceTile.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Image from 'next/image'
2+
3+
export type ExperienceTileProps = {
4+
companyLogo: string
5+
companyName: string
6+
position: string
7+
period: string
8+
responsibilities: string[]
9+
}
10+
11+
export function ExperienceTile({ companyLogo, companyName, position, period, responsibilities }: ExperienceTileProps) {
12+
return (
13+
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
14+
<div className="flex flex-col sm:flex-row items-center sm:items-start mb-4">
15+
<div className="mb-4 sm:mb-0 sm:mr-4 flex-shrink-0">
16+
<Image
17+
src={companyLogo}
18+
alt={`${companyName} logo`}
19+
width={150}
20+
height={75}
21+
className="rounded-lg"
22+
/>
23+
</div>
24+
<div className="sm:text-left">
25+
<h3 className="text-xl font-semibold mb-2">{position}</h3>
26+
<p className="text-gray-600 dark:text-gray-400">{companyName} | {period}</p>
27+
</div>
28+
</div>
29+
<div className="mt-4">
30+
<ul className="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-1">
31+
{responsibilities.map((responsibility, index) => (
32+
<li key={index}>{responsibility}</li>
33+
))}
34+
</ul>
35+
</div>
36+
</div>
37+
)
38+
}

‎src/app/components/experiences.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { useState, useEffect } from 'react'
2+
import { ExperienceTileProps, ExperienceTile } from './experienceTile'
3+
// import { ProjectTile } from './components/projectTile'
4+
5+
interface ExperiencesProps {
6+
arr: ExperienceTileProps[];
7+
}
8+
9+
export function Experiences({ arr }: ExperiencesProps) {
10+
const [experiences, setExperiences] = useState(arr)
11+
return (
12+
<section id="experience" className="mb-12">
13+
<h2 className="text-2xl font-bold mb-4">Experience</h2>
14+
{experiences && experiences.length > 0 ? (
15+
<div className="space-y-6">
16+
{experiences.map((experience, index) => (
17+
<ExperienceTile key={index} {...experience} />
18+
))}
19+
</div>
20+
) : (
21+
<p>No experiences to display.</p>
22+
)}
23+
</section>
24+
)
25+
}

‎src/app/components/footer.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export function Footer() {
2+
return (
3+
<footer className="mt-2 py-6 text-center text-gray-500 dark:text-gray-400">
4+
<p>&copy; 2024 Himank Dave. All rights reserved.</p>
5+
</footer>
6+
)
7+
}

‎src/app/components/header.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Moon, Sun, Github, Linkedin, Mail, StickyNote } from 'lucide-react'
2+
import Image from 'next/image'
3+
4+
export function Header() {
5+
const githubLink: string = "https://github.com/steadyfall"
6+
const linkedinLink: string = "https://www.linkedin.com/in/himank-dave/"
7+
return (
8+
<header className="container mx-auto px-4 py-8">
9+
<div className="flex flex-col md:flex-row items-center justify-between">
10+
<div className="flex-shrink-0 mb-4 md:mb-0 md:mr-8">
11+
<Image
12+
src="/images/topImage.jpg"
13+
alt="Profile"
14+
width={200}
15+
height={200}
16+
className="rounded-full w-40 h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 object-cover"
17+
/>
18+
</div>
19+
<div className="flex-grow text-center md:text-left">
20+
<div className="flex items-center justify-center md:justify-start">
21+
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mr-4">Himank Dave</h1>
22+
{/* <button
23+
onClick={() => setDarkMode(!darkMode)}
24+
className="p-2 rounded-full bg-gray-300 dark:bg-gray-700"
25+
aria-label="Toggle dark mode"
26+
>
27+
{darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
28+
</button> */}
29+
</div>
30+
<div className="flex justify-center md:justify-start mt-4 space-x-4">
31+
<a href={githubLink} target="_blank" rel="noopener noreferrer" aria-label="GitHub">
32+
<Github className="w-6 h-6 md:w-7 md:h-7" />
33+
</a>
34+
<a href={linkedinLink} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
35+
<Linkedin className="w-6 h-6 md:w-7 md:h-7" />
36+
</a>
37+
<a href="mailto:[email protected]" aria-label="Email">
38+
<Mail className="w-6 h-6 md:w-7 md:h-7" />
39+
</a>
40+
<a href="/resume.pdf" aria-label="Resume">
41+
<StickyNote className="w-6 h-6 md:w-7 md:h-7" />
42+
</a>
43+
</div>
44+
<div className="mt-4 text-sm md:text-base lg:text-lg">
45+
<p>he/him/they/them</p>
46+
<p>3A Computational Mathematics @ UWaterloo</p>
47+
<p>hddave [at] uwaterloo.ca</p>
48+
</div>
49+
</div>
50+
</div>
51+
<nav className="mt-8">
52+
<ul className="flex justify-center md:justify-start space-x-6 text-sm md:text-base">
53+
<li><a href="#about" className="hover:underline">About</a></li>
54+
<li><a href="#experience" className="hover:underline">Experience</a></li>
55+
<li><a href="#projects" className="hover:underline">Projects</a></li>
56+
{/* <li><a href="#misc" className="hover:underline">Misc.</a></li> */}
57+
</ul>
58+
</nav>
59+
</header>
60+
)
61+
}

‎src/app/components/miscellaneous.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export function misc() {
2+
return (
3+
<section id="misc" className="mb-12">
4+
<h2 className="text-2xl font-bold mb-4">Misc.</h2>
5+
<ul className="list-disc list-inside text-gray-700 dark:text-gray-300">
6+
<li>Winner of MSU Hackathon 2023</li>
7+
<li>Volunteer coding instructor for local high school students</li>
8+
<li>Avid rock climber and nature photographer</li>
9+
</ul>
10+
</section>
11+
)
12+
}

‎src/app/components/projectTile.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Github } from 'lucide-react'
2+
3+
export type ProjectTileProps = {
4+
title: string
5+
description: string
6+
repo: boolean,
7+
repoUrl: string
8+
}
9+
10+
export function ProjectTile({ title, description, repo, repoUrl }: ProjectTileProps) {
11+
return (
12+
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
13+
<div className="flex justify-between items-start mb-2">
14+
<h3 className="text-xl font-semibold">{title}</h3>
15+
{repo && (
16+
<a href={repoUrl} target="_blank" rel="noopener noreferrer" aria-label={`GitHub repository for ${title}`}>
17+
<Github className="w-6 h-6" />
18+
</a>
19+
)}
20+
</div>
21+
<p className="text-gray-700 dark:text-gray-300">{description}</p>
22+
</div>
23+
)
24+
}

‎src/app/components/projects.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { useState, useEffect } from 'react'
2+
import { ProjectTile, ProjectTileProps } from './projectTile'
3+
4+
interface ProjectProps {
5+
arr: ProjectTileProps[];
6+
}
7+
8+
export function Projects({ arr }: ProjectProps) {
9+
const [projects, setProjects] = useState(arr)
10+
return (
11+
<section id="projects" className="mb-12">
12+
<h2 className="text-2xl font-bold mb-4">Projects</h2>
13+
{projects && projects.length > 0 ? (
14+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
15+
{projects.map((project, index) => (
16+
<ProjectTile key={index} {...project} />
17+
))}
18+
</div>
19+
) : (
20+
<p>No projects to display.</p>
21+
)}
22+
</section>
23+
)
24+
}

0 commit comments

Comments
 (0)