Skip to content

Commit b4545eb

Browse files
davinash97davinash97
authored
Update (#10)
* Update - Add Readme - Reduce Load time - Project Link update * Update UI - Minor animation changes - Font updates - Other UI improvements * Disable preload for fonts
1 parent b804123 commit b4545eb

18 files changed

Lines changed: 1008 additions & 938 deletions

File tree

‎Readme.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Portfolio of Avinash
2+
3+
## Introduction
4+
5+
Hey! 👋 I’m Avinash (not that you couldn’t already tell from the repo name).
6+
This repo holds my portfolio - basically a place where I dumped my skills, experience, and random bits about me in one spot.
7+
8+
It’s live here → [davinash97.xyz](https://davinash97.xyz)
9+
10+
Go check it out if you want. Feedback, roast, constructive criticism — all welcome.
11+
12+
---
13+
14+
## What makes this _special_?
15+
16+
Honestly? Nothing groundbreaking. I just started building it one day and kept adding whatever came to mind.
17+
Might be slightly over-engineered in places… but hey, that’s subjective.
18+
19+
Here’s what I actually did though:
20+
21+
- Practiced the good old **DRY** (Don’t Repeat Yourself) principle
22+
- Naming conventions: `camelCase` for functions, `SCREAMING_CASE` for constants, and normal case for variables
23+
- Kept [data](src/app/data) separate instead of hardcoding things like a rookie
24+
- Offloaded data loading to a [web worker](src/app/worker/LoadData.ts) so the main thread chills
25+
- Broke stuff into reusable [components](src/app/components/) (future me will thank me)
26+
- Contact form works (limited to 3 mails/hour because people on the internet can’t be trusted 🙃)
27+
- Custom domain with SSL/TLS - so yes, it’s **https** like a civilized site
28+
- Sprinkled some framer-motion for subtle animations
29+
- TailwindCSS for styling (because writing raw CSS is pain)
30+
- TypeScript, because types save lives
31+
- Next.js - because React alone wasn’t enough pain
32+
- Deployed on Netlify (easy button for hosting)
33+
- Auto Day/Night mode (according to your Operating System's Preference)
34+
35+
---
36+
37+
## Final note
38+
39+
At the end of the day, it’s “just another portfolio.”
40+
But it’s my space on the internet - built with some love, some overthinking, and a lot of coffee. ☕
41+
42+
## Collaborators
43+
44+
If anyone wants to contribute, [here](https://github.com/davinash97/davinash97.github.io/graphs/contributors)'s your credit.
45+
46+
## Status
47+
48+
![Netlify Status](https://api.netlify.com/api/v1/badges/6be0ecfa-868e-44f6-b156-0cb8efb444b4/deploy-status)

‎package-lock.json‎

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

‎src/app/components/Card.tsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { CommonItem } from "app/types/Section";
22

3-
import { Lato } from "next/font/google";
3+
import { Fira_Sans, Montserrat, Roboto_Slab } from "next/font/google";
44
import React from "react";
5+
import { motion } from "framer-motion";
56
import { IoIosLink } from "react-icons/io";
67

7-
const lato = Lato({ weight: "400", subsets: ["latin"] });
8+
const roboto = Roboto_Slab({ preload: false });
9+
const fira = Fira_Sans({ weight: "300", preload: false });
10+
const monsterrat = Montserrat({ preload: false });
811

912
export default React.memo(function Card({
1013
title,
@@ -16,18 +19,26 @@ export default React.memo(function Card({
1619
linkIcon: LinkIcon = IoIosLink, // Default icon
1720
}: CommonItem) {
1821
return (
19-
<article
20-
className={`max-w-md h-full justify-between flex flex-col gap-4 p-4 rounded-lg border border-gray-200 shadow-sm ${
22+
<motion.article
23+
className={`max-w-md h-full justify-between flex flex-col gap-4 p-4 rounded-lg border border-gray-200 ${
2124
className || ""
22-
}`}>
23-
<h3 className="text-2xl font-semibold">{title}</h3>
25+
}`}
26+
initial={{ boxShadow: "0 5px 5px rgba(0,0,0,0.10)" }}
27+
whileHover={{
28+
boxShadow: "0 8px 15px rgba(0,0,0,0.15)",
29+
transition: { duration: 0.2 },
30+
}}
31+
transition={{ duration: 0.6 }}>
32+
<h3 className={`text-2xl ${roboto.className}`}>{title}</h3>
2433

25-
<div className="flex justify-between text-sm">
34+
<div
35+
className={`flex justify-between text-sm ${monsterrat.className}`}>
2636
<span className="no-anim">{subtitle}</span>
2737
<time>{duration}</time>
2838
</div>
2939

30-
<p className={`leading-relaxed text-justify ${lato.className}`}>
40+
<p
41+
className={`leading-relaxed text-justify text-base ${fira.className}`}>
3142
{detail ||
3243
`Lorem Ipsum is simply dummy text of the printing and typesetting industry...`}
3344
</p>
@@ -38,11 +49,11 @@ export default React.memo(function Card({
3849
href={link}
3950
target="_blank"
4051
rel="noopener noreferrer"
41-
className={`text-(--primary) inline-flex items-center ${lato.className}`}>
52+
className={`text-(--primary) inline-flex items-center ${fira.className}`}>
4253
<LinkIcon className="mr-1" /> Visit
4354
</a>
4455
)}
4556
</div>
46-
</article>
57+
</motion.article>
4758
);
4859
});

‎src/app/components/ContactCard.tsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,45 @@
11
import { ContactItem } from "app/types/Section";
22

3-
import { Lato } from "next/font/google";
3+
import { motion } from "framer-motion";
4+
import { Fira_Sans, Roboto_Slab } from "next/font/google";
45

5-
const lato = Lato({ weight: "400", subsets: ["latin"] });
6+
const roboto = Roboto_Slab({ preload: false });
7+
const fira = Fira_Sans({ weight: "300", preload: false });
68

79
export default function ContactCard({
810
title,
911
image: Icon,
1012
content,
13+
link,
1114
}: ContactItem) {
12-
return (
13-
<div className="flex flex-row w-full gap-4 rounded-xl p-4 border-2 border-solid border-(--primary) items-center">
15+
const data = (
16+
<motion.div
17+
className="flex flex-row w-full gap-4 rounded-xl p-4 items-center border border-gray-200"
18+
initial={{ boxShadow: "0 5px 5px rgba(0,0,0,0.10)" }}
19+
whileHover={{
20+
boxShadow: "0 8px 15px rgba(0,0,0,0.25)",
21+
transition: { duration: 0 },
22+
}}
23+
transition={{ duration: 0.1 }}>
1424
{/* Icon */}
1525
<div className="h-[80px] w-[80px] flex items-center justify-center text-4xl text-(--primary)">
1626
<Icon />
1727
</div>
1828

1929
{/* Content */}
2030
<div className="flex flex-col justify-center text-left min-w-0">
21-
<h3 className="font-semibold">{title}</h3>
22-
<div className={`break-words text-sm ${lato.className}`}>
31+
<h3 className={`${roboto.className}`}>{title}</h3>
32+
<div className={`break-words text-sm ${fira.className}`}>
2333
{content}
2434
</div>
2535
</div>
26-
</div>
36+
</motion.div>
37+
);
38+
return link ? (
39+
<a href={link} target="_blank" rel="noopener noreferrer">
40+
{data}
41+
</a>
42+
) : (
43+
data
2744
);
2845
}

‎src/app/components/Loading.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ const greatVibes = Great_Vibes({ weight: "400", subsets: ["latin"] });
77
export default function Loading() {
88
return (
99
<div className="fixed inset-0 flex items-center justify-center bg-black/70 z-50">
10-
<h1 className={`text-5xl text-purple-500 ${greatVibes.className}`}>
11-
{"<Loading... />"}
10+
<h1
11+
className={`flex justify-center gap-5 text-6xl text-purple-500 animate-pulse ${greatVibes.className}`}>
12+
{"<Loading.../>"}
1213
</h1>
1314
</div>
1415
);

‎src/app/components/ProjectCard.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { ProjectItem } from "app/types/Section";
22

3-
import { Lato } from "next/font/google";
3+
import { motion } from "framer-motion";
4+
5+
import { Fira_Sans, Roboto_Slab } from "next/font/google";
46
import Image from "next/image";
57
import { IoIosLink } from "react-icons/io";
68

7-
const lato = Lato({ weight: "400", subsets: ["latin"] });
9+
const roboto = Roboto_Slab({ preload: false });
10+
const fira = Fira_Sans({ weight: "300", preload: false });
811

912
export default function ProjectCard({
1013
title,
@@ -17,10 +20,16 @@ export default function ProjectCard({
1720
linkIcon: LinkIcon = IoIosLink,
1821
}: ProjectItem) {
1922
return (
20-
<div
21-
className={`flex flex-col gap-5 w-full h-full max-w-md items-center justify-between border-2 rounded-xl p-5 ${
23+
<motion.div
24+
className={`flex flex-col gap-5 w-full h-full max-w-md items-center justify-between rounded-xl p-5 border border-gray-200 ${
2225
className || ""
23-
}`}>
26+
}`}
27+
initial={{ boxShadow: "0 5px 5px rgba(0,0,0,0.10)" }}
28+
whileHover={{
29+
boxShadow: "0 8px 15px rgba(0,0,0,0.25)",
30+
transition: { duration: 0 },
31+
}}
32+
transition={{ duration: 0.1 }}>
2433
<div className="relative flex flex-col h-[200px] w-[300px]">
2534
<Image
2635
src={image || "https://dummyimage.com/600x400/000/fff"}
@@ -30,13 +39,14 @@ export default function ProjectCard({
3039
draggable="false"
3140
className="w-full h-full select-none object-cover rounded-md"
3241
/>
33-
<h3 className="absolute font-bold text-lg z-10 w-full bottom-1 text-center text-(--accent) bg-(--secondary)">
42+
<h3
43+
className={`absolute font-bold text-lg z-10 w-full bottom-1 text-center text-(--accent) bg-(--secondary) ${roboto.className}`}>
3444
{title || "This is a dummy project name"}
3545
</h3>
3646
</div>
3747

3848
<div
39-
className={`flex flex-col gap-3 w-full max-w-sm justify-between ${lato.className}`}>
49+
className={`flex flex-col gap-3 w-full max-w-sm justify-between ${fira.className}`}>
4050
<p className="text-justify">{detail}</p>
4151
<ol className="list-decimal list-inside flex flex-col gap-1">
4252
{points.map((point, index) => (
@@ -66,6 +76,6 @@ export default function ProjectCard({
6676
<LinkIcon className="mr-1" /> Visit
6777
</a>
6878
</div>
69-
</div>
79+
</motion.div>
7080
);
7181
}

‎src/app/components/SkillCard.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
import { SkillItem } from "app/types/Section";
22

3-
import { Lato } from "next/font/google";
3+
import { motion } from "framer-motion";
4+
import { Fira_Sans, Roboto_Slab } from "next/font/google";
45

5-
const lato = Lato({ weight: "400", subsets: ["latin"] });
6+
const roboto = Roboto_Slab({ preload: false });
7+
const fira = Fira_Sans({ weight: "300", preload: false });
68

79
export default function SkillCard({ title, set, className }: SkillItem) {
810
return (
9-
<article
10-
className={`flex flex-col text-left p-10 border-2 rounded-lg
11-
hover:shadow-2xl hover:shadow-black/40 transition duration-200
12-
cursor-pointer max-w-sm w-full h-full ${lato.className} ${className || ""}`}>
13-
<h3 className="text-xl font-semibold">{title}</h3>
14-
<ul className="mt-3 list-disc list-inside space-y-1">
11+
<motion.article
12+
className={`flex flex-col text-left p-10 rounded-lg
13+
transition duration-200 cursor-pointer max-w-sm w-full h-full ${
14+
roboto.className
15+
} ${className || ""} border border-gray-200`}
16+
initial={{ boxShadow: "0 5px 5px rgba(0,0,0,0.10)" }}
17+
whileHover={{
18+
boxShadow: "0 8px 15px rgba(0,0,0,0.25)",
19+
transition: { duration: 0 },
20+
}}
21+
transition={{ duration: 0.1 }}>
22+
<h3 className={`text-xl ${roboto.className}`}>{title}</h3>
23+
<ul
24+
className={`mt-3 list-disc list-inside space-y-1 ${fira.className}`}>
1525
{set.map((skill, index) => (
1626
<li key={index}>{skill}</li>
1727
))}
1828
</ul>
19-
</article>
29+
</motion.article>
2030
);
2131
}

‎src/app/data/Project.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"Dynamic routing to browse news by categories.",
1111
"Deployed on Netlify for fast and reliable access."
1212
],
13-
"link": "https://global-buzz.netlify.app",
13+
"link": "https://global-buzz.davinash97.xyz",
1414
"techStack": [
1515
"Next.js",
1616
"TailwindCSS"
@@ -27,7 +27,7 @@
2727
"Fully responsive design, works seamlessly across devices.",
2828
"Lightweight codebase ensuring fast load times and performance."
2929
],
30-
"link": "https://davinash97.github.io/pass-gen",
30+
"link": "https://pass-gen.davinash97.xyz",
3131
"techStack": [
3232
"HTML",
3333
"CSS",

‎src/app/globals.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ body {
2828
}
2929

3030
h1,
31-
h2,
32-
h3 {
31+
h2 {
3332
@apply select-none;
3433
}
3534

‎src/app/hooks/useSectionData.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import { useState, useEffect } from "react";
22
import { SectionType, SectionDataMap } from "../types/Section";
33
import { motion } from "framer-motion";
44
import AnimatedSection from "@components/AnimatedSection";
5+
import { Lexend_Deca } from "next/font/google";
6+
7+
const lex_deca = Lexend_Deca({ preload: false });
58

69
export function SectionTitle({ title }: { title: string }) {
710
return (
811
<AnimatedSection>
912
<motion.h2
10-
className="w-full flex flex-row justify-center items-center cursor-pointer"
13+
className={`w-full flex flex-row justify-center items-center cursor-pointer ${lex_deca.className}`}
1114
initial={{ opacity: 0, y: -50 }}
1215
whileInView={{ opacity: 1, y: 0 }}
1316
exit={{ opacity: 0, y: -50 }}

0 commit comments

Comments
 (0)