Skip to content

Commit d518905

Browse files
Arvind644Arvind644
authored
feat: UI changes
feat: UI changes
2 parents 572978f + da502de commit d518905

File tree

15 files changed

+219
-132
lines changed

15 files changed

+219
-132
lines changed

‎public/img/companies/parkpoolr.png‎

1.12 KB
Loading

‎public/img/projects/ortelius.png‎

153 KB
Loading

‎public/img/projects/profilkep-landing-page.png‎

654 KB
Loading

‎public/img/projects/rechat-landing-page.png‎

558 KB
Loading

‎public/img/speaking/ortelius-talk.png‎

324 KB
Loading

‎src/components/Header.astro‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import removeTrailingSlash from "@/utils/removeTrailingSlash";
33
import presentation from "@/data/presentation";
4-
import ThemeToggle from "./ThemeToggle.astro";
4+
// import ThemeToggle from "./ThemeToggle.astro";
55
66
const pathname = removeTrailingSlash(Astro.url.pathname);
77
---
@@ -25,11 +25,21 @@ const pathname = removeTrailingSlash(Astro.url.pathname);
2525
<li class="text-neutral-600 dark:text-neutral-400">/</li>
2626
<li>
2727
<a
28-
href="/posts"
28+
href="/tutorials"
2929
class:list={{
3030
["text-neutral-600 hover:text-neutral-800 dark:hover:text-neutral-100 dark:text-neutral-400"]: true,
31-
["text-neutral-800 dark:text-neutral-100"]: pathname === "/posts",
32-
}}>Posts</a
31+
["text-neutral-800 dark:text-neutral-100"]: pathname === "/tutorials",
32+
}}>Tutorials</a
33+
>
34+
</li>
35+
<li class="text-neutral-600 dark:text-neutral-400">/</li>
36+
<li>
37+
<a
38+
href="/projects"
39+
class:list={{
40+
["text-neutral-600 hover:text-neutral-800 dark:hover:text-neutral-100 dark:text-neutral-400"]: true,
41+
["text-neutral-800 dark:text-neutral-100"]: pathname === "/projects",
42+
}}>Projects</a
3343
>
3444
</li>
3545
<li class="text-neutral-600 dark:text-neutral-400">/</li>
@@ -43,6 +53,6 @@ const pathname = removeTrailingSlash(Astro.url.pathname);
4353
>
4454
</li>
4555
</ul>
46-
<ThemeToggle />
56+
<!-- <ThemeToggle /> -->
4757
</nav>
4858
</header>

‎src/components/ProjectCard.astro‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,58 @@
11
---
22
import type { Project } from "@/data/projects";
3+
import { Image } from "astro:assets";
34
45
type Props = Project;
56
6-
const { title, techs, link, isComingSoon, description } = Astro.props;
7+
const { title, techs, link, isComingSoon, description, screenshot, hoverText } = Astro.props;
78
89
const formatTechs = (values: string[]) =>
910
values.toString().replaceAll(",", " • ");
1011
---
1112

1213
<div class="w-full">
1314
{isComingSoon ? (
14-
<div class="group flex w-full flex-col justify-between gap-2 rounded-md border border-neutral-300 dark:border-neutral-700 p-4">
15-
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
16-
<div class="flex flex-col gap-2 md:flex-row md:items-center md:gap-4">
17-
<p class="text-neutral-800 dark:text-neutral-100">{title}</p>
18-
<p>{formatTechs(techs)}</p>
19-
</div>
15+
<div class="group flex w-full flex-col justify-between gap-3 rounded-md border border-neutral-300 dark:border-neutral-700 p-4">
16+
<div class="flex items-center justify-between">
17+
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100">{title}</h3>
2018
<div class="block">
21-
<p class="w-fit rounded-md bg-neutral-200 dark:bg-neutral-900 px-4 py-1">Soon</p>
19+
<p class="w-fit rounded-md bg-neutral-200 dark:bg-neutral-900 px-4 py-1 text-sm">Soon</p>
2220
</div>
2321
</div>
24-
<p class="mt-2 break-words text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">{description}</p>
22+
<p class="text-sm text-neutral-600 dark:text-neutral-400">{formatTechs(techs)}</p>
23+
<p class="break-words text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">{description}</p>
2524
</div>
2625
) : (
2726
<a
28-
class="group flex w-full cursor-pointer flex-col justify-between gap-2 rounded-md border border-neutral-300 dark:border-neutral-700 p-4 transition-all duration-300 hover:-translate-y-2 hover:border-neutral-600 dark:hover:border-neutral-400"
27+
class="group flex w-full cursor-pointer flex-col justify-between gap-4 rounded-md border border-neutral-300 dark:border-neutral-700 p-4 transition-all duration-300 hover:-translate-y-2 hover:border-neutral-600 dark:hover:border-neutral-400"
2928
href={link}
3029
target="_blank"
3130
rel="noreferrer"
3231
>
33-
<div class="flex flex-col gap-2">
34-
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
35-
<div class="flex flex-col gap-2 md:flex-row md:items-center">
36-
<p class="text-neutral-800 dark:text-neutral-100">{title}</p>
37-
<p>{formatTechs(techs)}</p>
38-
</div>
32+
{screenshot && (
33+
<div class="relative overflow-hidden rounded-md">
34+
<img
35+
src={screenshot}
36+
alt={`${title} screenshot`}
37+
class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105"
38+
/>
39+
{hoverText && (
40+
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
41+
<p class="text-white text-center px-4 text-sm font-medium">{hoverText}</p>
42+
</div>
43+
)}
44+
</div>
45+
)}
46+
47+
<div class="flex flex-col gap-3">
48+
<div class="flex items-center justify-between">
49+
<h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">{title}</h3>
3950
<svg
4051
width="18"
4152
height="18"
4253
viewBox="0 0 18 18"
4354
fill="none"
44-
class="transition-all duration-300 group-hover:translate-x-1"
55+
class="transition-all duration-300 group-hover:translate-x-1 flex-shrink-0"
4556
>
4657
<path
4758
d="M5.25 12.75L12.75 5.25"
@@ -57,6 +68,7 @@ const formatTechs = (values: string[]) =>
5768
/>
5869
</svg>
5970
</div>
71+
<p class="text-sm text-neutral-600 dark:text-neutral-400">{formatTechs(techs)}</p>
6072
<p class="break-words text-sm leading-relaxed text-cyan-800 dark:text-cyan-200 whitespace-pre-line">{description}</p>
6173
</div>
6274
</a>

‎src/components/TalkCard.astro‎

Lines changed: 71 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,39 +11,85 @@ type Props = {
1111
videoUrl?: string;
1212
slidesUrl?: string;
1313
tags?: string[];
14+
screenshot?: string;
15+
hoverText?: string;
1416
};
1517
16-
const { title, event, date, location, description, videoUrl, slidesUrl, tags } = Astro.props;
18+
const { title, event, date, location, description, videoUrl, slidesUrl, tags, screenshot, hoverText } = Astro.props;
1719
---
1820

19-
<div class="flex w-full flex-col gap-4 rounded-md border border-neutral-300 p-6 dark:border-neutral-700">
20-
<div class="flex flex-col gap-2">
21-
<h3 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">{title}</h3>
22-
<div class="flex flex-wrap items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
23-
<span>{event}</span>
24-
<span>•</span>
25-
<span>{formatDate(date)}</span>
26-
<span>•</span>
27-
<span>{location}</span>
21+
<div class="group flex w-full gap-6 rounded-md border border-neutral-300 p-6 dark:border-neutral-700 transition-all duration-300 hover:-translate-y-1 hover:border-neutral-600 dark:hover:border-neutral-400">
22+
{screenshot && (
23+
<div class="relative overflow-hidden rounded-md flex-shrink-0 w-48">
24+
{videoUrl ? (
25+
<a
26+
href={videoUrl}
27+
target="_blank"
28+
rel="noopener noreferrer"
29+
class="block cursor-pointer"
30+
>
31+
<img
32+
src={screenshot}
33+
alt={`${title} screenshot`}
34+
class="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105"
35+
/>
36+
{hoverText && (
37+
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
38+
<div class="text-center">
39+
<p class="text-white px-2 text-xs font-medium mb-1">{hoverText}</p>
40+
<p class="text-white text-xs opacity-80">Click to watch</p>
41+
</div>
42+
</div>
43+
)}
44+
</a>
45+
) : (
46+
<>
47+
<img
48+
src={screenshot}
49+
alt={`${title} screenshot`}
50+
class="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105"
51+
/>
52+
{hoverText && (
53+
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
54+
<p class="text-white text-center px-2 text-xs font-medium">{hoverText}</p>
55+
</div>
56+
)}
57+
</>
58+
)}
2859
</div>
29-
</div>
60+
)}
3061

31-
<p class="text-neutral-700 dark:text-neutral-300">{description}</p>
62+
<div class="flex flex-col gap-4 flex-1">
63+
<div class="flex flex-col gap-2">
64+
<h3 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">{title}</h3>
65+
<div class="flex flex-wrap items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
66+
<span>{event}</span>
67+
<span>•</span>
68+
<span>{formatDate(date)}</span>
69+
<span>•</span>
70+
<span>{location}</span>
71+
</div>
72+
</div>
3273

33-
<div class="flex flex-wrap gap-2">
34-
{tags?.map((tag) => (
35-
<span class="rounded-full bg-neutral-200 px-3 py-1 text-xs text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
36-
{tag}
37-
</span>
38-
))}
39-
</div>
74+
<p class="text-neutral-700 dark:text-neutral-300">{description}</p>
4075

41-
<div class="flex gap-4">
42-
{videoUrl && (
43-
<Link href={videoUrl} label="Watch Recording" />
44-
)}
45-
{slidesUrl && (
46-
<Link href={slidesUrl} label="View Slides" />
76+
{tags && tags.length > 0 && (
77+
<div class="flex flex-wrap gap-2">
78+
{tags.map((tag) => (
79+
<span class="rounded-full bg-neutral-200 px-3 py-1 text-xs text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
80+
{tag}
81+
</span>
82+
))}
83+
</div>
4784
)}
85+
86+
<!-- <div class="flex gap-4">
87+
{videoUrl && (
88+
<Link href={videoUrl} label="Watch Recording" />
89+
)}
90+
{slidesUrl && (
91+
<Link href={slidesUrl} label="View Slides" />
92+
)}
93+
</div> -->
4894
</div>
4995
</div>

‎src/data/projects.ts‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,33 @@ export type Project = {
44
link: string;
55
isComingSoon?: boolean;
66
description?: string;
7+
screenshot?: string;
8+
hoverText?: string;
79
};
810

911
const projects: Project[] = [
1012
{
11-
title: "AI project - Fitness Assistant",
12-
techs: ["Python", "OpenAI", "Docker", "Flask", "Postgresql", "Grafana"],
13-
link: "https://github.com/Arvind644/QA-Chatbot",
14-
description: "Staying consistent with fitness routines is challenging, especially for beginners. Gyms can be intimidating, and personal trainers aren't always available. \nThe Fitness Assistant provides a conversational AI that helps users choose exercises and find alternatives, making fitness more manageable.",
13+
title: "AI SaaS - Rechat",
14+
techs: ["Next JS", "Tailwind CSS", "Shadcn UI", "Clerk", "Prisma", "Postgresql", "OpenAI"],
15+
link: "https://rechat.vc/",
16+
description: "A SaaS platform to manage networking from all social media platforms in one place and get daily networking tasks to grow your network.",
17+
screenshot: "/img/projects/rechat-landing-page.png",
18+
hoverText: "AI-powered networking platform with social media integration",
1519
},
1620
{
17-
title: "SaaS - lms-platform",
18-
techs: ["Next JS", "Tailwind CSS", "Shadcn UI", "Clerk", "Prisma", "MYSQL"],
19-
link: "https://github.com/Arvind644/lms-platform",
20-
description: "It is a LMS platform allowing Creators to create their courses with chapters and video streaming, and allowing students to access the course after purchase the course using Stripe.",
21-
},
22-
{
23-
title: "AI project - QA Chatbot",
24-
techs: ["Streamlit", "OpenAI", "Langchain", "ChromaDB", "Python"],
25-
link: "https://github.com/Arvind644/QA-Chatbot",
26-
description: "This is a QA chatbot, that answers question related to a fictional company named Red30 Shoes. It also stores context with chat history in the memory. You can access the application using UI and as a CLI app.",
27-
},
28-
{
29-
title: "AI project - Chat with PDF RAG",
30-
techs: ["Chainlit", "OpenAI", "Langchain", "ChromaDB", "Python"],
31-
link: "https://github.com/Arvind644/chainlit-llm-app",
32-
description: "This is a Chat with PDF RAG application, that take pdf as input and you can query your questions and the application will give answer based on context available in the pdf.",
21+
title: "AI SaaS - profilkep",
22+
techs: ["Next JS", "Tailwind CSS", "Shadcn UI", "Clerk", "Prisma", "Supabase"],
23+
link: "https://profilkep.hu/",
24+
description: "Full-stack platform for generating professional profile pictures with credit system and payment integration.",
25+
screenshot: "/img/projects/profilkep-landing-page.png",
26+
hoverText: "Full-stack platform for generating professional profile pictures",
3327
},
3428
{
3529
title: "Ortelius (Open Source)",
3630
techs: ["docker", "kubernetes", "Golang", "github actions"],
3731
link: "https://github.com/pulls?q=is%3Apr+author%3AArvind644+archived%3Afalse+is%3Aclosed+user%3Aortelius",
32+
screenshot: "/img/projects/ortelius.png",
33+
hoverText: "Open source contributions to microservice cataloging and management tools",
3834
},
3935
];
4036

‎src/data/speaking.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ type Talk = {
77
videoUrl?: string;
88
slidesUrl?: string;
99
tags?: string[];
10+
screenshot?: string;
11+
hoverText?: string;
1012
};
1113

1214
const talks: Talk[] = [
@@ -17,6 +19,8 @@ const talks: Talk[] = [
1719
location: "Virtual",
1820
description: "Ortelius hoards an amazing amount of data. As we move the project forward, Data Science will allow us to leverage this data to pursue machine learning and predictive behavior of microservices shared across teams. Join Arvind, a data science enthusiast and brilliant University student as he shared is thoughts on the road forward to applying data science to the Ortelius project.",
1921
videoUrl: "https://www.youtube.com/watch?v=nuvxafqMm84",
22+
screenshot: "/img/speaking/ortelius-talk.png",
23+
hoverText: "Data Science insights for microservices management and predictive behavior",
2024
// slidesUrl: "https://example.com/talk-slides",
2125
// tags: ["Astro", "Web Development", "Performance"]
2226
},

0 commit comments

Comments
 (0)