Skip to content

Commit 933d196

Browse files
kapillamba4kapillamba4
committed
Add Projects section with Vitality App web and native versions
1 parent 9ee5112 commit 933d196

4 files changed

Lines changed: 143 additions & 3 deletions

File tree

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Toaster } from "@/components/ui/toaster";
44
import Layout from "./components/Layout";
55
import Home from "./pages/Home";
66
import About from "./pages/About";
7+
import Projects from "./pages/Projects";
78
import Reading from "./pages/Reading";
89
import Writing from "./pages/Writing";
910
import MediumRedirect from "./pages/MediumRedirect";
@@ -20,6 +21,7 @@ function App() {
2021
<Routes>
2122
<Route path="/" element={<Home />} />
2223
<Route path="/about" element={<About />} />
24+
<Route path="/projects" element={<Projects />} />
2325
<Route path="/reading" element={<Reading />} />
2426
<Route path="/writing" element={<Writing />} />
2527
</Routes>

‎src/components/Navigation.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const Navigation = () => {
1010
const navItems = [
1111
{ href: "/", label: "Home" },
1212
{ href: "/about", label: "About" },
13+
{ href: "/projects", label: "Projects" },
1314
{ href: "/reading", label: "Reading" },
1415
{ href: "/writing", label: "Writing" },
1516
];

‎src/pages/Home.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect } from "react";
22
import { Link } from "react-router-dom";
3-
import { Book, FileText, User, ArrowRight } from "lucide-react";
3+
import { Book, FileText, User, ArrowRight, Code } from "lucide-react";
44
import { Button } from "@/components/ui/button";
55
import { Card, CardContent } from "@/components/ui/card";
66

@@ -24,6 +24,13 @@ const Home = () => {
2424
href: "/about",
2525
color: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
2626
},
27+
{
28+
title: "Projects",
29+
description: "Explore my personal projects and apps",
30+
icon: Code,
31+
href: "/projects",
32+
color: "bg-orange-500/10 text-orange-600 dark:text-orange-400",
33+
},
2734
{
2835
title: "Reading",
2936
description: "My personal library of books and research papers",
@@ -93,7 +100,7 @@ const Home = () => {
93100
{profileData.title || "Backend Engineer"}, Open-Source & DSA Enthusiast
94101
</p>
95102
<p className="text-lg text-muted-foreground max-w-3xl mx-auto">
96-
{profileData.bio || "Passionate about building scalable systems, contributing to open-source projects, and exploring data structures and algorithms. Welcome to my digital space."}
103+
{profileData.bio || "Passionate about building scalable systems, contributing to open-source projects, and exploring data structures and algorithms."}
97104
</p>
98105
{profileData.location && (
99106
<p className="text-sm text-muted-foreground">
@@ -103,7 +110,7 @@ const Home = () => {
103110
</section>
104111

105112
{/* Navigation Cards */}
106-
<section className="grid md:grid-cols-3 gap-6">
113+
<section className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
107114
{sections.map((section) => {
108115
const Icon = section.icon;
109116
return (

‎src/pages/Projects.tsx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import { ExternalLink, Calendar, Tag } from "lucide-react";
2+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
3+
import { Badge } from "@/components/ui/badge";
4+
import { Button } from "@/components/ui/button";
5+
6+
interface Project {
7+
id: string;
8+
title: string;
9+
description: string;
10+
url: string;
11+
category: string;
12+
tags: string[];
13+
year: string;
14+
image?: string;
15+
status: "Live" | "In Development" | "Beta Testing" | "Completed";
16+
}
17+
18+
const Projects = () => {
19+
const projects: Project[] = [
20+
{
21+
id: "vitality-app-web",
22+
title: "Vitality App - Web",
23+
description: "A comprehensive wellness platform focused on overall health. Features personalized wellness tracking, mindfulness exercises, and holistic health insights.",
24+
url: "https://vitalityapp.fit/body-and-mind-wellness",
25+
category: "Health & Wellness",
26+
tags: ["Vite", "React", "Supabase", "PostgreSQL", "Node.js", "OpenAI"],
27+
year: "2024",
28+
status: "Live"
29+
},
30+
{
31+
id: "vitality-app-native",
32+
title: "Vitality App - Native",
33+
description: "iOS and Android mobile applications for the Vitality wellness platform. Bringing comprehensive health tracking and mindfulness exercises to your pocket.",
34+
url: "https://vitalityapp.fit/body-and-mind-wellness",
35+
category: "Health & Wellness",
36+
tags: ["Vite", "React", "Supabase", "PostgreSQL", "Node.js", "OpenAI"],
37+
year: "2025",
38+
status: "Beta Testing"
39+
}
40+
];
41+
42+
const getStatusColor = (status: string) => {
43+
switch (status) {
44+
case "Live":
45+
return "bg-green-500/10 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800";
46+
case "Beta Testing":
47+
return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-800";
48+
case "In Development":
49+
return "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800";
50+
case "Completed":
51+
return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800";
52+
default:
53+
return "bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800";
54+
}
55+
};
56+
57+
return (
58+
<div className="space-y-8">
59+
{/* Header */}
60+
<div className="space-y-4">
61+
<h1 className="text-4xl md:text-5xl font-bold tracking-tight">
62+
Personal Projects
63+
</h1>
64+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto text-center">
65+
A collection of projects I've built, ranging from apps to open-source contributions.
66+
</p>
67+
</div>
68+
69+
{/* Projects Grid */}
70+
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
71+
{projects.map((project) => (
72+
<Card key={project.id} className="group hover:shadow-lg transition-all duration-200 hover:-translate-y-1 flex flex-col">
73+
<CardHeader className="space-y-3">
74+
<div className="flex items-start justify-between">
75+
<div className="space-y-1">
76+
<CardTitle className="text-xl">{project.title}</CardTitle>
77+
<CardDescription className="flex items-center gap-2 text-sm">
78+
<Calendar className="h-3 w-3" />
79+
{project.year}
80+
</CardDescription>
81+
</div>
82+
<Badge className={getStatusColor(project.status)}>
83+
{project.status}
84+
</Badge>
85+
</div>
86+
<div className="flex items-center gap-2">
87+
<Tag className="h-3 w-3 text-muted-foreground" />
88+
<span className="text-sm text-muted-foreground">{project.category}</span>
89+
</div>
90+
</CardHeader>
91+
92+
<CardContent className="flex-1 flex flex-col space-y-4">
93+
<div className="flex-1 space-y-4">
94+
<p className="text-muted-foreground text-sm leading-relaxed text-left">
95+
{project.description}
96+
</p>
97+
98+
<div className="flex flex-wrap gap-2">
99+
{project.tags.map((tag) => (
100+
<Badge key={tag} variant="secondary" className="text-xs">
101+
{tag}
102+
</Badge>
103+
))}
104+
</div>
105+
</div>
106+
107+
<Button
108+
asChild
109+
className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors"
110+
variant="outline"
111+
>
112+
<a
113+
href={project.url}
114+
target="_blank"
115+
rel="noopener noreferrer"
116+
className="flex items-center justify-center gap-2"
117+
>
118+
View Project
119+
<ExternalLink className="h-4 w-4" />
120+
</a>
121+
</Button>
122+
</CardContent>
123+
</Card>
124+
))}
125+
</div>
126+
</div>
127+
);
128+
};
129+
130+
export default Projects;

0 commit comments

Comments
 (0)