Skip to content

Commit aa9e434

Browse files
thugharithughari
committed
added project
1 parent 191f1eb commit aa9e434

4 files changed

Lines changed: 128 additions & 28 deletions

File tree

‎components/Projects.tsx‎

Lines changed: 93 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,10 @@ const Projects: React.FC = () => {
2626

2727
useEffect(() => {
2828
let timer: number | undefined;
29-
// prevent background page scrolling while modal is open
3029
if (selected) {
3130
document.body.style.overflow = 'hidden';
3231
setIframeLoaded(false);
3332
setIframeMaybeBlocked(false);
34-
// if iframe doesn't call onLoad within 1500ms, show a helpful note
3533
timer = window.setTimeout(() => setIframeMaybeBlocked(true), 1500);
3634
} else {
3735
document.body.style.overflow = '';
@@ -57,6 +55,10 @@ const Projects: React.FC = () => {
5755
window.open(url, '_blank', 'noopener,noreferrer');
5856
};
5957

58+
const getPreviewUrl = (project: Project) => {
59+
return project.demoUrl || project.githubUrl || project.githubUrls?.frontend || project.githubUrls?.backend;
60+
};
61+
6062
return (
6163
<>
6264
<motion.h2
@@ -65,6 +67,7 @@ const Projects: React.FC = () => {
6567
>
6668
Featured <span className="gradient-text">Projects</span>
6769
</motion.h2>
70+
6871
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
6972
{projectsData.map((project, index) => (
7073
<motion.div
@@ -91,23 +94,55 @@ const Projects: React.FC = () => {
9194
</button>
9295
</div>
9396
</div>
97+
9498
<div className="p-6 flex-grow flex flex-col">
9599
<div className="flex justify-between items-start mb-4">
96100
<h3 className="text-2xl font-bold text-slate-100 group-hover:text-spidey-red transition-colors duration-300">{project.title}</h3>
97-
<div className="flex items-center space-x-4 z-10">
98-
{project.githubUrl && (
99-
<a onClick={(e) => { e.stopPropagation(); openInNewTab(project.githubUrl); }} className="text-slate-400 hover:text-spidey-red transition-colors cursor-pointer" aria-label="Open GitHub repo">
100-
<GitHubIcon />
101-
</a>
101+
102+
<div className="flex items-center space-x-3 z-10">
103+
{project.githubUrls ? (
104+
<>
105+
{project.githubUrls.frontend && (
106+
<a
107+
onClick={(e) => { e.stopPropagation(); openInNewTab(project.githubUrls?.frontend); }}
108+
className="text-slate-400 hover:text-spidey-red transition-colors cursor-pointer flex items-center gap-1"
109+
title="Frontend Repository"
110+
>
111+
<GitHubIcon /> <span className="text-[10px] font-bold">FE</span>
112+
</a>
113+
)}
114+
{project.githubUrls.backend && (
115+
<a
116+
onClick={(e) => { e.stopPropagation(); openInNewTab(project.githubUrls?.backend); }}
117+
className="text-slate-400 hover:text-spidey-red transition-colors cursor-pointer flex items-center gap-1"
118+
title="Backend Repository"
119+
>
120+
<GitHubIcon /> <span className="text-[10px] font-bold">BE</span>
121+
</a>
122+
)}
123+
</>
124+
) : (
125+
project.githubUrl && (
126+
<a
127+
onClick={(e) => { e.stopPropagation(); openInNewTab(project.githubUrl); }}
128+
className="text-slate-400 hover:text-spidey-red transition-colors cursor-pointer"
129+
aria-label="Open GitHub repo"
130+
>
131+
<GitHubIcon />
132+
</a>
133+
)
102134
)}
135+
103136
{project.demoUrl && (
104137
<a onClick={(e) => { e.stopPropagation(); openInNewTab(project.demoUrl); }} className="text-slate-400 hover:text-spidey-red transition-colors cursor-pointer" aria-label="Open demo">
105138
<ExternalLinkIcon />
106139
</a>
107140
)}
108141
</div>
109142
</div>
143+
110144
<p className="text-slate-300 mb-4 flex-grow">{project.description}</p>
145+
111146
<div className="flex flex-wrap gap-2">
112147
{project.tech.map((tech, i) => (
113148
<span key={i} className="bg-slate-700 text-red-300 text-xs font-medium px-2.5 py-1 rounded-full">
@@ -120,7 +155,6 @@ const Projects: React.FC = () => {
120155
))}
121156
</div>
122157

123-
{/* Preview Modal */}
124158
{selected && (
125159
<motion.div
126160
className="fixed inset-0 z-50 flex items-center justify-center p-4"
@@ -141,31 +175,69 @@ const Projects: React.FC = () => {
141175
aria-modal="true"
142176
aria-label={`Preview ${selected.title}`}
143177
>
144-
<header className="flex items-center justify-between p-4 border-b border-slate-700 sticky top-0 bg-slate-900 z-10">
145-
<div>
178+
179+
180+
<header className="flex flex-col md:flex-row md:items-center justify-between p-4 border-b border-slate-700 sticky top-0 bg-slate-900 z-10 gap-4">
181+
182+
<div className="w-full md:w-auto">
146183
<h3 className="text-lg font-semibold text-slate-100">{selected.title}</h3>
147-
<p className="text-sm text-slate-400">{selected.tech.join(', ')}</p>
184+
<p className="text-sm text-slate-400 line-clamp-1">{selected.tech.join(', ')}</p>
148185
</div>
149-
<div className="flex items-center gap-3">
186+
187+
<div className="flex flex-wrap items-center gap-2 w-full md:w-auto">
150188
{selected.demoUrl && (
151-
<button onClick={() => openInNewTab(selected.demoUrl)} className="px-3 py-2 text-sm bg-spidey-red text-white rounded-md">
189+
<button
190+
onClick={() => openInNewTab(selected.demoUrl)}
191+
className="flex-1 md:flex-none px-3 py-2 text-sm bg-spidey-red text-white rounded-md text-center whitespace-nowrap"
192+
>
152193
Open Project
153194
</button>
154195
)}
155-
{selected.githubUrl && (
156-
<button onClick={() => openInNewTab(selected.githubUrl)} className="px-3 py-2 text-sm bg-slate-700 text-slate-200 rounded-md">
157-
View Repo
158-
</button>
196+
197+
{selected.githubUrls ? (
198+
<>
199+
{selected.githubUrls.frontend && (
200+
<button
201+
onClick={() => openInNewTab(selected.githubUrls?.frontend)}
202+
className="flex-1 md:flex-none px-3 py-2 text-sm bg-slate-700 text-slate-200 rounded-md hover:bg-slate-600 text-center whitespace-nowrap"
203+
>
204+
Frontend
205+
</button>
206+
)}
207+
{selected.githubUrls.backend && (
208+
<button
209+
onClick={() => openInNewTab(selected.githubUrls?.backend)}
210+
className="flex-1 md:flex-none px-3 py-2 text-sm bg-slate-700 text-slate-200 rounded-md hover:bg-slate-600 text-center whitespace-nowrap"
211+
>
212+
Backend
213+
</button>
214+
)}
215+
</>
216+
) : (
217+
selected.githubUrl && (
218+
<button
219+
onClick={() => openInNewTab(selected.githubUrl)}
220+
className="flex-1 md:flex-none px-3 py-2 text-sm bg-slate-700 text-slate-200 rounded-md hover:bg-slate-600 text-center whitespace-nowrap"
221+
>
222+
Repo
223+
</button>
224+
)
159225
)}
160-
<button onClick={closePreview} className="px-3 py-2 text-sm text-slate-300">Close</button>
226+
227+
<button
228+
onClick={closePreview}
229+
className="px-3 py-2 text-sm text-slate-300 hover:text-white ml-auto md:ml-0"
230+
>
231+
Close
232+
</button>
161233
</div>
162234
</header>
163235

164236
<div className="h-full">
165-
{(selected.demoUrl || selected.githubUrl) ? (
237+
{getPreviewUrl(selected) ? (
166238
<iframe
167239
title={`Preview - ${selected.title}`}
168-
src={selected.demoUrl || selected.githubUrl}
240+
src={getPreviewUrl(selected)}
169241
className="w-full h-full bg-white"
170242
onLoad={() => { setIframeLoaded(true); setIframeMaybeBlocked(false); }}
171243
sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-presentation"
@@ -191,4 +263,4 @@ const Projects: React.FC = () => {
191263
);
192264
};
193265

194-
export default Projects;
266+
export default Projects;

‎constants.ts‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,36 +46,60 @@ export const educationData = {
4646

4747
export const projectsData: Project[] = [
4848
{
49-
title: "RandomChat - Real-time Video Chat",
49+
title: "CarbonScope - Emissions Analytics Dashboard",
50+
description: "an end-to-end emissions analytics platform with Chart.js visualizations, Gemini-powered data analysis and web insights, deployed on Google Cloud Run for scalability.",
51+
tech: ["Java", "Spring Boot", "Angular", "Chart.js", "Google Cloud Run", "Gemini API", "Docker"],
52+
imageUrl: "./images/carbon-scope.png",
53+
demoUrl: "https://thughari.github.io/carbon-scope/",
54+
githubUrl: "https://github.com/thughari/carbon-scope",
55+
githubUrls: {
56+
frontend: "https://github.com/thughari/carbon-scope",
57+
backend: "https://github.com/thughari/carbonscope"
58+
}
59+
},
60+
{
61+
title: "RandomChat - Peer To Peer Video Chat",
5062
description: "A peer-to-peer video chat application built from the ground up, leveraging modern Java features. It uses WebRTC for direct browser-to-browser video streaming and Java 21's Virtual Threads for a highly scalable signaling server.",
5163
tech: ["Java 21", "Spring Boot", "WebRTC", "WebSockets", "Virtual Threads", "JavaScript"],
5264
imageUrl: "./images/randomchat.png",
5365
demoUrl: "https://randomchat-hfta.onrender.com/",
5466
githubUrl: "https://github.com/thughari/RandomChat"
5567
},
5668
{
57-
title: "CollabEditor - Real-time Collaborative Editor",
69+
title: "CollabEditor - Online Editor like Google Docs",
5870
description: "An online collaborative text editor that allows multiple users to edit a document simultaneously. Built with a Spring Boot backend using WebSockets for instant synchronization of changes across all clients.",
5971
tech: ["Java", "Spring Boot", "WebSockets", "Maven", "TypeScript", "Angular"],
6072
imageUrl: "./images/collabeditor.png",
6173
demoUrl: "https://thughari.github.io/Collaborative-Editor-UI/editor/hari",
62-
githubUrl: "https://github.com/thughari/CollabEditor"
74+
githubUrl: "https://github.com/thughari/CollabEditor",
75+
githubUrls: {
76+
frontend: "https://github.com/thughari/Collaborative-Editor-UI",
77+
backend: "https://github.com/thughari/CollabEditor"
78+
}
6379
},
6480
{
6581
title: "AI-Powered Mental Health App",
6682
description: "A full-stack mental wellness application featuring a microservices backend and a real-time AI chatbot. Integrated Ollama & LLaMA 3 with RAG to provide personalized, context-aware support.",
6783
tech: ["Java", "Spring Boot", "Angular", "Microservices", "MongoDB", "Ollama", "LLaMA 3"],
6884
imageUrl: "./images/mental-health.png",
6985
demoUrl: "https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7313487684994285568?compact=1",
70-
githubUrl: "https://github.com/thughari/Mental-Health-App-Backend"
86+
githubUrl: "https://github.com/thughari/Mental-Health-App-Backend",
87+
githubUrls: {
88+
frontend: "https://github.com/thughari/Mental-Health-App",
89+
backend: "https://github.com/thughari/Mental-Health-App-Backend"
90+
}
7191
},
7292
{
7393
title: "National Scholarship Portal",
7494
description: "A comprehensive scholarship management system with multi-role access for students, institutes, and administrators. The backend is containerized with Docker for easy deployment and scalability.",
7595
tech: ["Java", "Spring Boot", "Angular", "MongoDB", "Docker", "REST APIs"],
7696
imageUrl: "./images/nsp.png",
7797
demoUrl: "https://thughari.github.io/NationalScholarshipPortal-FrontEnd/#/",
78-
githubUrl: "https://github.com/thughari/NationalScholarshipPortal-FrontEnd"
98+
githubUrl: "https://github.com/thughari/NationalScholarshipPortal-FrontEnd",
99+
githubUrls: {
100+
frontend: "https://github.com/thughari/NationalScholarshipPortal-FrontEnd",
101+
backend: "https://github.com/thughari/National_Scholarship_Portal_Backend"
102+
}
79103
},
80104
{
81105
title: "Music Player Web App",
@@ -95,7 +119,7 @@ export const openSourceData: OpenSourceItem[] = [
95119
},
96120
{
97121
title: "Open Source Enthusiast",
98-
description: "Engaged with the open-source ecosystem by contributing to, forking, and learning from influential projects like Spring AI, Kubernetes, and First Contributions. Always exploring new tools and frameworks to stay at the cutting edge.",
122+
description: "Engaged with the open-source ecosystem by contributing to, forking, and learning from influential projects like Spring, Apache, GSoC and First Contributions. Always exploring new tools and frameworks to stay at the cutting edge.",
99123
icon: GitBranchIcon
100124
}
101125
];
@@ -151,7 +175,7 @@ export const certificationsData: Certification[] = [
151175
];
152176

153177
export const githubStatsData: GitHubStat[] = [
154-
{ icon: RepoIcon, value: "61", label: "Repositories" },
178+
{ icon: RepoIcon, value: "66", label: "Repositories" },
155179
{ icon: CommitIcon, value: "786", label: "Commits" },
156180
{ icon: StarIcon, value: "30", label: "Stars" },
157181
];

‎public/images/carbon-scope.png‎

139 KB
Loading

‎types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export interface Project {
1313
imageUrl: string;
1414
demoUrl?: string;
1515
githubUrl?: string;
16+
githubUrls?: {
17+
frontend?: string;
18+
backend?: string;
19+
};
1620
}
1721

1822
export interface SkillCategory {

0 commit comments

Comments
 (0)