Skip to content

Commit 505110d

Browse files
manuarora700manuarora700
committed
➕ADD: Timeline, Contact form
1 parent 3ceacdd commit 505110d

File tree

7 files changed

+395
-3
lines changed

7 files changed

+395
-3
lines changed

‎components/Contact.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { useState, useRef } from "react";
2+
import Link from "next/link";
3+
// import useSWR from "swr";
4+
import format from "comma-number";
5+
// import { trackGoal } from "fathom-client";
6+
7+
// import fetcher from "@/lib/fetcher";
8+
import SuccessMessage from "@/components/SuccessMessage";
9+
import ErrorMessage from "@/components/ErrorMessage";
10+
import LoadingSpinner from "@/components/LoadingSpinner";
11+
12+
export default function Contact() {
13+
const Divider = () => {
14+
return (
15+
<div className="border border-gray-200 dark:border-gray-600 w-full my-8" />
16+
);
17+
};
18+
const [form, setForm] = useState(false);
19+
const inputEl = useRef(null);
20+
// const { data } = useSWR("/api/subscribers", fetcher);
21+
// const subscriberCount = format(data?.count);
22+
23+
const subscribe = async (e) => {
24+
e.preventDefault();
25+
setForm({ state: "loading" });
26+
27+
// const res = await fetch("/api/subscribe", {
28+
// body: JSON.stringify({
29+
// email: inputEl.current.value,
30+
// }),
31+
// headers: {
32+
// "Content-Type": "application/json",
33+
// },
34+
// method: "POST",
35+
// });
36+
37+
// const { error } = await res.json();
38+
// if (error) {
39+
// setForm({
40+
// state: "error",
41+
// message: error,
42+
// });
43+
// return;
44+
// }
45+
46+
// trackGoal("JYFUFMSF", 0);
47+
inputEl.current.value = "";
48+
setForm({
49+
state: "success",
50+
message: `Hooray! You're now on the list. I'll get back to you soon.`,
51+
});
52+
};
53+
54+
return (
55+
<div className="border border-blue-200 rounded p-6 my-4 w-full dark:border-gray-800 bg-blue-50 dark:bg-blue-opaque">
56+
<h5 className="text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100">
57+
Want to hire me as a freelancer? Let's discuss.
58+
</h5>
59+
<p className="my-1 text-gray-800 dark:text-gray-200">
60+
Drop your message and let's discuss about your project.
61+
</p>
62+
<a
63+
href="https://wa.me/919587738861?text=I want to work on a project with you"
64+
className="mt-4 px-4 text-center w-full font-bold h-8 bg-green-400 dark:bg-gray-700 text-gray-900 py-1 dark:text-gray-100 rounded"
65+
type="submit"
66+
>
67+
Chat on WhatsApp
68+
</a>
69+
70+
<Divider />
71+
<p className="my-1 text-gray-800 dark:text-gray-200">
72+
Drop in your email ID and I will get back to you.
73+
</p>
74+
<form className="relative my-4" onSubmit={subscribe}>
75+
<input
76+
ref={inputEl}
77+
aria-label="Email for newsletter"
78+
placeholder="tim@apple.com"
79+
type="email"
80+
autoComplete="email"
81+
required
82+
className="px-4 py-2 mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
83+
/>
84+
<button
85+
className="flex items-center justify-center absolute right-1 top-1 px-4 font-bold h-8 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded w-28"
86+
type="submit"
87+
>
88+
{form.state === "Sending" ? <LoadingSpinner /> : "Send"}
89+
</button>
90+
</form>
91+
92+
{form.state === "error" ? (
93+
<ErrorMessage>{form.message}</ErrorMessage>
94+
) : form.state === "success" ? (
95+
<SuccessMessage>{form.message}</SuccessMessage>
96+
) : (
97+
<p className="text-sm text-gray-800 dark:text-gray-200"></p>
98+
)}
99+
</div>
100+
);
101+
}

‎components/ErrorMessage.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default function ErrorMessage({ children }) {
2+
return (
3+
<p className="flex items-center text-sm font-bold text-red-800 dark:text-red-400">
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="0 0 20 20"
7+
fill="currentColor"
8+
className="mr-2 h-4 w-4"
9+
>
10+
<path
11+
fillRule="evenodd"
12+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
13+
clipRule="evenodd"
14+
/>
15+
</svg>
16+
{children}
17+
</p>
18+
);
19+
}

‎components/LoadingSpinner.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export default function LoadingSpinner() {
2+
return (
3+
<svg
4+
className="animate-spin h-5 w-5 text-gray-900 dark:text-gray-100"
5+
xmlns="http://www.w3.org/2000/svg"
6+
fill="none"
7+
viewBox="0 0 24 24"
8+
>
9+
<circle
10+
className="opacity-25"
11+
cx="12"
12+
cy="12"
13+
r="10"
14+
stroke="currentColor"
15+
strokeWidth="4"
16+
/>
17+
<path
18+
className="opacity-75"
19+
fill="currentColor"
20+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
21+
/>
22+
</svg>
23+
);
24+
}

‎components/SuccessMessage.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default function SuccessMessage({ children }) {
2+
return (
3+
<p className="flex items-center text-sm font-bold text-green-700 dark:text-green-400">
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="0 0 20 20"
7+
fill="currentColor"
8+
className="mr-2 h-4 w-4"
9+
>
10+
<path
11+
fillRule="evenodd"
12+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
13+
clipRule="evenodd"
14+
/>
15+
</svg>
16+
{children}
17+
</p>
18+
);
19+
}

‎components/Timeline.js‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import { useState } from "react";
2+
3+
const Divider = () => {
4+
return (
5+
<div className="border border-gray-200 dark:border-gray-600 w-full my-8" />
6+
);
7+
};
8+
9+
const Year = ({ children }) => {
10+
return (
11+
<h3 className="text-lg md:text-xl font-bold mb-4 tracking-tight text-gray-900 dark:text-gray-100">
12+
{children}
13+
</h3>
14+
);
15+
};
16+
17+
const Step = ({ title, children }) => {
18+
return (
19+
<li className="mb-4 ml-2">
20+
<div className="flex items-center mb-2 text-green-700 dark:text-green-300">
21+
<span className="sr-only">Check</span>
22+
<svg className="h-4 w-4 mr-2" viewBox="0 0 24 24">
23+
<g
24+
fill="none"
25+
stroke="currentColor"
26+
strokeWidth="2"
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
>
30+
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
31+
<path d="M22 4L12 14.01l-3-3" />
32+
</g>
33+
</svg>
34+
<p className="font-medium text-gray-900 dark:text-gray-100">{title}</p>
35+
</div>
36+
<p className="text-gray-700 dark:text-gray-400 ml-6">{children}</p>
37+
</li>
38+
);
39+
};
40+
41+
const FullTimeline = () => (
42+
<>
43+
<Divider />
44+
<Year>2018</Year>
45+
<ul>
46+
<Step title="Internship - Intel 🤘🏻">
47+
Got an Internship at Intel as a Machine Learning Intern. Developed a
48+
Pothole Detection System & Face Averaging system using Machine Learning.
49+
</Step>
50+
<Step title="Entrepreneurial Workshops 🔩">
51+
Organised workshops (Part of E-Cell) on topics like Entrepreneurship and
52+
Web Development.
53+
</Step>
54+
<Step title="Full-Stack Journey 🔩">
55+
Learnt NodeJS, MongoDB, MySQL along with React and the best practices to
56+
build products and web apps which can scale easily.
57+
</Step>
58+
</ul>
59+
<Divider />
60+
<Year>2016</Year>
61+
<ul>
62+
<Step title="Startup - Aceternity 💣">
63+
Started a web development and digital marketing agency from scratch.
64+
Generated revenue and designed websites for clients.
65+
</Step>
66+
<Step title="React Enthusiast ⚒">
67+
Was introducted to React, took up a course on Udemy to get the hang of
68+
it. I haven't stopped since then.
69+
</Step>
70+
<Step title="Open Source Contributions ⚙️">
71+
Started contributing to open source on a daily basis. Contributed to
72+
smaller projects to learn more on the contributing part.
73+
</Step>
74+
75+
<Step title="Moved to Des Moines 🏙">
76+
I moved Downtown DSM into a quaint 1BR apartment. Des Moines has always
77+
felt like home growing up ~45 minutes away.
78+
</Step>
79+
</ul>
80+
<Divider />
81+
<Year>2015</Year>
82+
<ul>
83+
<Step title="Started College 🔥">
84+
Opted for Computer Science B.Tech Degree from University of Petroleum
85+
and Energy Studies, Dehradun.
86+
</Step>
87+
<Step title="Introduced to Open Source ⚡️">
88+
My Domain was Open Source Software and Open Standards. I got to know
89+
about Free Software Foundation, Git and GitHub and Linux systems.
90+
</Step>
91+
<Step title="jQuery fanboy 🙌🏻">
92+
Started working with jQuery, I was amazed by the level of simplicity it
93+
provided back then.
94+
</Step>
95+
<Step title="C and C++ 🙌🏻">
96+
Started learning logics and basic programming fundamentals with Object
97+
Oriented Programming. C was intimidating, C++ was fun.
98+
</Step>
99+
<Step title="First Back 😂">
100+
I consider this as an achievement. If you're a CS Engineer, you must
101+
have a back in Mathematics.
102+
</Step>
103+
</ul>
104+
<Divider />
105+
<Year>2014</Year>
106+
<ul>
107+
<Step title="Completed 12th Grade 📜">
108+
Completed 12th grade with 93.6% Marks in Science stream. Again, a big
109+
achievement for me.
110+
</Step>
111+
<Step title="Developed interest in Web Development 🚀">
112+
One of my friends introduced me to Web Development. I started off by
113+
making simple HTML, CSS websites with a keen interest in design.
114+
</Step>
115+
</ul>
116+
<Divider />
117+
<Year>2012</Year>
118+
<ul>
119+
<Step title="Completed 10th Grade 📜">
120+
Scored 9/10 CGPA in 10th Grade. For me it was huge.
121+
</Step>
122+
<Step title="Wanted to take up Humanities 🌪❤️">
123+
I always wanted to become a Civil Servant. Though my parents didn't
124+
agree and that let me to opt for Science stream.
125+
</Step>
126+
<Step title="Theatre and Drama 💂🏼‍♀️">
127+
Acted in my first ever skit in school.
128+
</Step>
129+
</ul>
130+
<Divider />
131+
<Year>2008</Year>
132+
<ul>
133+
<Step title="First Computer 💻">
134+
I played GTA San Andreas all day, everyday.
135+
</Step>
136+
</ul>
137+
<Divider />
138+
<Year>2001</Year>
139+
<ul>
140+
<Step title="Moved to Jaipur, Rajasthan 🌆">
141+
We moved to Jaipur from our Hometown.
142+
</Step>
143+
</ul>
144+
<Divider />
145+
<Year>1998</Year>
146+
<ul>
147+
<Step title="An Enginner was Born in India 👶🏼 🍼" />
148+
</ul>
149+
</>
150+
);
151+
152+
export default function Timeline() {
153+
const [isShowingFullTimeline, showFullTimeline] = useState(false);
154+
155+
return (
156+
<>
157+
<h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-4 mt-8 text-black dark:text-white">
158+
Timeline
159+
</h3>
160+
<Year>2020</Year>
161+
<ul>
162+
<Step title="Joined mroads">
163+
{" "}
164+
Joined{" "}
165+
<span className="font-bold">
166+
<span className="text-blue-500">m</span>roads
167+
</span>{" "}
168+
as a Software Development Engineer. Working on their Flagship product
169+
as a Front-End Developer.
170+
</Step>
171+
<Step title="Cleared GATE 2019 💯">
172+
Cleared GATE 2019 after 8 months of continuous studies. I still hate
173+
Computer System Architecture & Organization.
174+
</Step>
175+
<Step title="Competitive Programming 🏆">
176+
Cleared Hackerrank and Hackerearth contests. Got a strong grip on
177+
Competitive Programming.
178+
</Step>
179+
<Step title="Taught programming to students🥳">
180+
Taught fundamental programming to school students. It included Basic C
181+
programming, Introduction to Web Development and logic building.
182+
</Step>
183+
</ul>
184+
<Divider />
185+
<Year>2019</Year>
186+
<ul>
187+
<Step title="Placements - Got Placed ✨">
188+
Had 3 offers in Hand. 1 On-Campus and 2 Off-Campus in the Software
189+
Developer (Full-Stack) roles.
190+
</Step>
191+
<Step title="Full-Stack Applications 🚀">
192+
Started freelancing, developed full-stack applications for clients
193+
ranging from E-Commerce stores to static landing pages.
194+
</Step>
195+
<Step title="GATE Preparation ⚛️">
196+
Started preparing for GATE (Graduate Aptitute Test in Engineering).
197+
Learnt all the Computer Science subjects again from scratch.
198+
</Step>
199+
</ul>
200+
{isShowingFullTimeline ? (
201+
<FullTimeline />
202+
) : (
203+
<button
204+
type="button"
205+
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"
206+
onClick={() => showFullTimeline(true)}
207+
>
208+
See More
209+
<svg
210+
className="h-4 w-4 ml-1"
211+
xmlns="http://www.w3.org/2000/svg"
212+
fill="none"
213+
viewBox="0 0 24 24"
214+
stroke="currentColor"
215+
>
216+
<path
217+
strokeLinecap="round"
218+
strokeLinejoin="round"
219+
strokeWidth={2}
220+
d="M19 9l-7 7-7-7"
221+
/>
222+
</svg>
223+
</button>
224+
)}
225+
</>
226+
);
227+
}

0 commit comments

Comments
 (0)