Skip to content

Commit 2b820f0

Browse files
committed
➕ADD: Optional Tag cloud on projects page
1 parent b2d9e90 commit 2b820f0

File tree

5 files changed

+197
-5
lines changed

5 files changed

+197
-5
lines changed

components/Contact.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function Contact() {
7575
<input
7676
ref={inputEl}
7777
aria-label="Email for newsletter"
78-
placeholder="tim@apple.com"
78+
placeholder="manu@gmail.com"
7979
type="email"
8080
autoComplete="email"
8181
required

components/Container.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,12 +96,14 @@ export default function Container(props) {
9696
</a>
9797
</NextLink>
9898
<NextLink href="/snippets">
99-
<a className="p-1 sm:p-4 text-gray-900 dark:text-gray-100">
99+
<a className="p-1 sm:p-4 hidden md:inline text-gray-900 dark:text-gray-100">
100100
Snippets
101101
</a>
102102
</NextLink>
103-
<NextLink href="/about">
104-
<a className="p-1 sm:p-4 text-gray-900 dark:text-gray-100">About</a>
103+
<NextLink href="/projects">
104+
<a className="p-1 sm:p-4 text-gray-900 dark:text-gray-100">
105+
Projects
106+
</a>
105107
</NextLink>
106108
</div>
107109
</nav>

components/ProjectCard.js

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
export default function ProjectCard({ title, description, href, icon }) {
1+
export default function ProjectCard({ title, description, href, icon, tags }) {
2+
// const tags = ["GitHub", "React", "JamStack"];
23
return (
34
<a
45
className="mb-4 hover:shadow"
@@ -8,6 +9,58 @@ export default function ProjectCard({ title, description, href, icon }) {
89
rel="noopener noreferrer"
910
>
1011
<div className="flex items-center border border-gray-200 dark:border-gray-800 rounded p-4">
12+
{icon === "github" && (
13+
<div className="h-8 w-8 ml-2 mr-4">
14+
<svg
15+
className="h-8 w-8 min-w-lg text-gray-900 dark:text-gray-100"
16+
role="img"
17+
viewBox="0 0 24 24"
18+
xmlns="http://www.w3.org/2000/svg"
19+
>
20+
<title>GitHub icon</title>
21+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
22+
</svg>
23+
</div>
24+
)}
25+
{icon === "ipl" && (
26+
<div className="h-8 w-8 ml-2 mr-4">
27+
<svg
28+
className="h-8 w-8 min-w-lg text-gray-900 dark:text-gray-100"
29+
fill="none"
30+
stroke="currentColor"
31+
viewBox="0 0 24 24"
32+
xmlns="http://www.w3.org/2000/svg"
33+
>
34+
<path
35+
stroke-linecap="round"
36+
stroke-linejoin="round"
37+
stroke-width="2"
38+
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"
39+
></path>
40+
</svg>
41+
</div>
42+
)}
43+
{icon === "music" && (
44+
<div className="h-8 w-8 ml-2 mr-4">
45+
<span className="sr-only">Music Streaming Application</span>
46+
47+
<svg
48+
className="h-8 w-8 min-w-lg text-gray-900 dark:text-gray-100"
49+
class="w-6 h-6"
50+
fill="none"
51+
stroke="currentColor"
52+
viewBox="0 0 24 24"
53+
xmlns="http://www.w3.org/2000/svg"
54+
>
55+
<path
56+
stroke-linecap="round"
57+
stroke-linejoin="round"
58+
stroke-width="2"
59+
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
60+
></path>
61+
</svg>
62+
</div>
63+
)}
1164
{icon == "placeholdertech" && (
1265
<div className="h-8 w-8 ml-2 mr-4">
1366
<span className="sr-only">PlaceholderTech</span>
@@ -187,6 +240,16 @@ export default function ProjectCard({ title, description, href, icon }) {
187240
<p className="leading-5 text-gray-700 dark:text-gray-300">
188241
{description}
189242
</p>
243+
<div className="pt-2 flex md:flex-row space-x-2">
244+
{tags?.map((tag, idx) => (
245+
<p
246+
key={idx}
247+
className={`leading-5 text-gray-700 dark:text-gray-300 rounded-md text-xs italic bg-gray-50 `}
248+
>
249+
{tag}
250+
</p>
251+
))}
252+
</div>
190253
</>
191254
)}
192255
</div>

pages/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,28 @@ export default function Home() {
7171
href="https://feedmeback-beta.vercel.app/"
7272
icon="fastfeedback"
7373
/>
74+
<Link href="/projects">
75+
<a
76+
type="button"
77+
className="flex items-center text-sm my-4 mx-auto px-4 py-2 rounded-md font-medium text-gray-900 dark:text-gray-100"
78+
>
79+
See More
80+
<svg
81+
className="h-4 w-4 ml-1"
82+
xmlns="http://www.w3.org/2000/svg"
83+
fill="none"
84+
viewBox="0 0 24 24"
85+
stroke="currentColor"
86+
>
87+
<path
88+
strokeLinecap="round"
89+
strokeLinejoin="round"
90+
strokeWidth={2}
91+
d="M19 9l-7 7-7-7"
92+
/>
93+
</svg>
94+
</a>
95+
</Link>
7496

7597
<h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-4 mt-8 text-black dark:text-white">
7698
Upcoming Projects

pages/projects.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from "react";
2+
import Container from "@/components/Container";
3+
import Link from "next/link";
4+
import ProjectCard from "@/components/ProjectCard";
5+
import Contact from "@/components/Contact";
6+
7+
export default function projects() {
8+
return (
9+
<Container
10+
title="Projects – Manu Arora"
11+
description="Projects that I've built from scratch, upcoming projects, learned from courses and projects that I'm proud of."
12+
image="/avatar.jpg"
13+
>
14+
<div className="flex flex-col justify-center items-start max-w-2xl mx-auto mb-16">
15+
<h1 className="font-bold text-3xl md:text-5xl tracking-tight mb-4 text-black dark:text-white">
16+
Projects
17+
</h1>
18+
<h2 className="prose text-gray-600 dark:text-gray-400 mb-16">
19+
I’ve developed commercial projects as well as hobby projects. All
20+
projects are included (along with course related projects) here.
21+
–&nbsp;
22+
<Link href="/blog">
23+
<a className="text-blue-500 hover:underline">
24+
checkout my blog&nbsp;
25+
</a>
26+
</Link>
27+
while you're here. <br />I write about technology, learning and memes.
28+
</h2>
29+
<h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-4 text-black dark:text-white">
30+
Full-Stack
31+
</h3>
32+
<ProjectCard
33+
title="PlaceholderTech"
34+
description="We build modern, blazing-fast web applications which helps your business grow and increase sales."
35+
href="https://placeholdertech.in/"
36+
icon="placeholdertech"
37+
tags={["Freelancing", "React", "Node", "Firebase"]}
38+
/>
39+
<ProjectCard
40+
title="Playground"
41+
description="An open-source playground to create HTML, CSS and Javascript components on the go."
42+
href="https://play.placeholdertech.in/"
43+
icon="play"
44+
tags={["NextJS", "Tailwind", "Chakra", "MongoDB"]}
45+
/>
46+
<ProjectCard
47+
title="Feedmeback"
48+
description="The easiest way to add comments or reviews to your static site. Built as part of React 2025."
49+
href="https://feedmeback-beta.vercel.app/"
50+
icon="fastfeedback"
51+
tags={["NextJS", "Jamstack", "Firebase", "OAuth"]}
52+
/>
53+
<ProjectCard
54+
title="Music Streaming Application"
55+
description="🎶 An Open-Source music streaming website (like spotify) with rich features like creating playlist, pause, play and user login/authentication."
56+
href="https://github.com/manuarora700/music-streaming-project"
57+
icon="music"
58+
tags={["PHP", "MySQL", "Spotify-UI", "Minimal"]}
59+
/>
60+
<ProjectCard
61+
title="GitHub Lookup"
62+
description="A minimal application to search for GitHub users with user details using the GitHub API"
63+
href="https://github-lookup-new.netlify.app/"
64+
icon="github"
65+
tags={["React", "Front-end", "Custom-CSS"]}
66+
/>
67+
68+
<ProjectCard
69+
title="IPL Statistics"
70+
description="A bundled web application to get details and statistics of Every player, Team and detailed analysis of each match played in IPL"
71+
href="https://ipl-statistics.vercel.app/"
72+
icon="ipl"
73+
tags={["NextJS", "Vercel", "Dataset", "Real-world"]}
74+
/>
75+
76+
<h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-4 mt-8 text-black dark:text-white">
77+
Upcoming Projects
78+
</h3>
79+
<ProjectCard
80+
title="Algochurn"
81+
description="Your last moment friend before a Technical Interview round. Practice the most popular Data Structures & Algorithms"
82+
href="#"
83+
icon="algochurn"
84+
tags={["NextJS", "Tailwind", "MongoDB", "NodeJS"]}
85+
/>
86+
<ProjectCard
87+
title="VSCode Resume"
88+
description="A VSCode themed resume for all the web developers out there. A UI which looks exactly like a React file-system based VSCode window with create and update operations."
89+
href="#"
90+
icon="vscode"
91+
tags={["NextJS", "Tailwind", "Hackerearth"]}
92+
/>
93+
<ProjectCard
94+
title="More projects coming soon.."
95+
description="I get ideas all day 🙄, All of them are updated here as soon as I start working on them."
96+
href="#"
97+
icon="more"
98+
/>
99+
100+
{/* 🎶 A music streaming website (like spotify) built using PHP, HTML/CSS, AJAX, JS, jQuery, JSON, mySQL and more. */}
101+
<Contact />
102+
</div>
103+
</Container>
104+
);
105+
}

0 commit comments

Comments
 (0)