├── app ├── style.css ├── favicon.ico ├── components │ ├── HarshitLogo │ │ └── Logo.tsx │ ├── PageHeader │ │ ├── PageHeader.tsx │ │ └── style.css │ ├── Home │ │ ├── Contact │ │ │ ├── style.css │ │ │ └── Contact.tsx │ │ ├── Github │ │ │ ├── page.tsx │ │ │ └── style.css │ │ ├── About │ │ │ ├── style.css │ │ │ └── About.tsx │ │ ├── Hero │ │ │ ├── Hero.tsx │ │ │ └── style.css │ │ ├── Experience │ │ │ ├── style.css │ │ │ └── page.tsx │ │ ├── Social │ │ │ ├── style.css │ │ │ └── Social.tsx │ │ ├── Projects │ │ │ ├── style.css │ │ │ └── Projects.tsx │ │ └── Skills │ │ │ ├── Skills.tsx │ │ │ └── style.css │ ├── SearchProject │ │ └── SearchProject.jsx │ ├── ContactForm │ │ ├── style.css │ │ └── ContactForm.jsx │ ├── AsideSection │ │ ├── style.css │ │ └── AsideSection.tsx │ ├── Navbar │ │ ├── Navbar.tsx │ │ └── style.css │ └── Footer │ │ ├── Footer.tsx │ │ └── style.css ├── robots.ts ├── page.tsx ├── not-found.jsx ├── terms-and-conditions │ ├── style.css │ ├── layout.tsx │ └── page.tsx ├── api │ └── contact │ │ └── route.ts ├── my-story │ ├── style.css │ ├── layout.tsx │ └── page.tsx ├── privacy-and-policy │ ├── style.css │ ├── layout.tsx │ └── page.tsx ├── contact │ ├── layout.tsx │ ├── style.css │ └── page.tsx ├── blogs │ ├── layout.tsx │ ├── style.css │ └── page.tsx ├── about │ ├── layout.tsx │ ├── style.css │ └── page.tsx ├── sitemap.ts ├── projects │ ├── layout.tsx │ ├── page.tsx │ ├── style.css │ └── projects.js ├── layout.tsx ├── globals.css └── blog │ └── [slug] │ ├── style.css │ └── page.tsx ├── jsconfig.json ├── public ├── open-graph-image.jpg ├── blogImages │ └── javascript.png ├── aboutbg.svg └── harshitclub.svg ├── next.config.js ├── .gitignore ├── tsconfig.json ├── LICENSE ├── package.json ├── helpers └── mailer.ts ├── README.md └── posts └── javascript-functions.mdx /app/style.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshitclub/harshitclubweb/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/open-graph-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshitclub/harshitclubweb/HEAD/public/open-graph-image.jpg -------------------------------------------------------------------------------- /public/blogImages/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshitclub/harshitclubweb/HEAD/public/blogImages/javascript.png -------------------------------------------------------------------------------- /app/components/HarshitLogo/Logo.tsx: -------------------------------------------------------------------------------- 1 | import Logo from "@/public/harshitclub.svg"; 2 | import Image from "next/image"; 3 | 4 | export const HarshitLogo = () => { 5 | return harshitclub logo; 6 | }; 7 | -------------------------------------------------------------------------------- /app/robots.ts: -------------------------------------------------------------------------------- 1 | export default function robots() { 2 | return { 3 | rules: [ 4 | { 5 | userAgent: "*", 6 | }, 7 | ], 8 | sitemap: "https://harshitclub.com/sitemap.xml", 9 | host: "https://harshitclub.com", 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /app/components/PageHeader/PageHeader.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | 4 | function PageHeader({ heading }: any) { 5 | return ( 6 |
7 |

{heading}

8 |
9 | ); 10 | } 11 | 12 | export default PageHeader; 13 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withMDX = require("@next/mdx")(); 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = { 5 | // Configure `pageExtensions`` to include MDX files 6 | pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"], 7 | // Optionally, add any other Next.js config below 8 | }; 9 | 10 | module.exports = withMDX(nextConfig); 11 | -------------------------------------------------------------------------------- /app/components/PageHeader/style.css: -------------------------------------------------------------------------------- 1 | .pageHeader { 2 | background-color: var(--black); 3 | height: 15vh; 4 | margin: 4rem 0 0 0; 5 | border-radius: 0.2rem; 6 | } 7 | 8 | .pageHeader h1 { 9 | color: var(--white); 10 | font-size: var(--h1); 11 | font-weight: 500; 12 | } 13 | 14 | @media screen and (min-width: 200px) and (max-width: 480px) { 15 | .pageHeader { 16 | height: 8vh; 17 | } 18 | } 19 | @media screen and (min-width: 481px) and (max-width: 768px) { 20 | .pageHeader { 21 | height: 8vh; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /app/components/Home/Contact/style.css: -------------------------------------------------------------------------------- 1 | .contactSection { 2 | margin: 0 0 1px 0; 3 | } 4 | .contactSection .contactSContainer { 5 | background-color: var(--black); 6 | 7 | height: 15rem; 8 | border-radius: 0.2rem; 9 | } 10 | 11 | .contactSection .contactSContainer h2 { 12 | font-weight: 500; 13 | color: var(--textWhite); 14 | margin: 0 0 1rem 0; 15 | } 16 | 17 | .contactSection .contactSContainer h3 { 18 | font-weight: 400; 19 | color: var(--white); 20 | } 21 | 22 | .contactSection .contactSContainer h3 a { 23 | color: var(--white); 24 | } 25 | 26 | .contactSIcon { 27 | margin: 0 0 -0.18rem 0; 28 | } 29 | -------------------------------------------------------------------------------- /app/components/SearchProject/SearchProject.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | 5 | function SearchProject() { 6 | return ( 7 |
8 | 18 |
19 | ); 20 | } 21 | 22 | export default SearchProject; 23 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import "./style.css"; 2 | 3 | import About from "./components/Home/About/About"; 4 | import Hero from "./components/Home/Hero/Hero"; 5 | import Social from "./components/Home/Social/Social"; 6 | import Contact from "./components/Home/Contact/Contact"; 7 | import Projects from "./components/Home/Projects/Projects"; 8 | import Skills from "./components/Home/Skills/Skills"; 9 | import Github from "./components/Home/Github/page"; 10 | 11 | export default function Home() { 12 | return ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /app/components/Home/Contact/Contact.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import { RiExternalLinkLine } from "react-icons/ri"; 4 | import Link from "next/link"; 5 | 6 | export default function Contact() { 7 | return ( 8 |
9 |
10 |

Get In Touch

11 |

12 | Mail:{" "} 13 | 14 | harshit@harshitclub.com{" "} 15 | 16 | 17 |

18 |
19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } -------------------------------------------------------------------------------- /app/not-found.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import React from "react"; 3 | import { RiErrorWarningLine } from "react-icons/ri"; 4 | 5 | const PageNotFound = () => { 6 | return ( 7 |
8 |
9 |

404 | Page Not Found

10 | 11 |
12 |
13 | Home 14 |
15 |
16 | Contact 17 |
18 |
19 |
20 |
21 | ); 22 | }; 23 | 24 | export default PageNotFound; 25 | -------------------------------------------------------------------------------- /app/terms-and-conditions/style.css: -------------------------------------------------------------------------------- 1 | .terms .termsContainer { 2 | margin: 1rem 0 2rem 0; 3 | } 4 | 5 | .terms .termsContainer h2 { 6 | font-weight: 500; 7 | margin: 0 0 0.3rem 0; 8 | } 9 | 10 | .terms .termsContainer p { 11 | margin: 0 0 1rem 0; 12 | } 13 | 14 | .terms .termsContainer p a { 15 | color: var(--black); 16 | } 17 | 18 | .terms .termsContainer ul { 19 | list-style: disc; 20 | list-style-position: inside; 21 | margin: 0 0 1rem 0; 22 | } 23 | 24 | .terms .termsContainer ul li { 25 | margin: 0 0 0.5rem 0; 26 | } 27 | 28 | @media screen and (min-width: 200px) and (max-width: 480px) { 29 | .terms .termsContainer { 30 | width: 90%; 31 | } 32 | } 33 | 34 | @media screen and (min-width: 481px) and (max-width: 768px) { 35 | .terms .termsContainer { 36 | width: 90%; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/api/contact/route.ts: -------------------------------------------------------------------------------- 1 | import { sendEmail } from "@/helpers/mailer"; 2 | import { NextRequest, NextResponse } from "next/server"; 3 | 4 | export async function POST(request: NextRequest) { 5 | try { 6 | const reqBody = await request.json(); 7 | 8 | const { name, email, phone, website, country, company, reason, message } = 9 | reqBody; 10 | 11 | await sendEmail({ 12 | name: name, 13 | email: email, 14 | phone: phone, 15 | website: website, 16 | country: country, 17 | company: company, 18 | reason: reason, 19 | message: message, 20 | }); 21 | return NextResponse.json({ 22 | message: "Message Sent", 23 | success: true, 24 | }); 25 | } catch (error: any) { 26 | return NextResponse.json({ error: error.message }, { status: 500 }); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /app/my-story/style.css: -------------------------------------------------------------------------------- 1 | .myStoryContainer { 2 | margin: 1rem 0; 3 | gap: 2rem; 4 | } 5 | 6 | .myStory .myStoryArticle { 7 | width: 75%; 8 | } 9 | 10 | .myStory .myStoryArticle h2 { 11 | font-weight: 600; 12 | color: var(--headingColor); 13 | margin: 0 0 0.2rem 0; 14 | } 15 | 16 | .myStory .myStoryArticle h3 { 17 | font-weight: 600; 18 | color: var(--headingColor); 19 | margin: 0 0 0.2rem 0; 20 | } 21 | 22 | .myStory .myStoryArticle p { 23 | color: var(--textColor); 24 | margin: 0 0 1rem 0; 25 | text-align: justify; 26 | } 27 | 28 | @media screen and (min-width: 200px) and (max-width: 480px) { 29 | .myStory .myStoryArticle { 30 | width: var(--width90); 31 | } 32 | } 33 | 34 | @media screen and (min-width: 481px) and (max-width: 768px) { 35 | .myStory .myStoryArticle { 36 | width: var(--width90); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/privacy-and-policy/style.css: -------------------------------------------------------------------------------- 1 | .pPolicy .pPolicyContainer { 2 | margin: 1rem 0 2rem 0; 3 | } 4 | 5 | .pPolicy .pPolicyContainer h2 { 6 | font-weight: 500; 7 | margin: 0 0 0.3rem 0; 8 | } 9 | 10 | .pPolicy .pPolicyContainer p { 11 | margin: 0 0 1rem 0; 12 | } 13 | 14 | .pPolicy .pPolicyContainer p a { 15 | color: var(--black); 16 | } 17 | 18 | .pPolicy .pPolicyContainer ul { 19 | list-style: disc; 20 | list-style-position: inside; 21 | margin: 0 0 1rem 0; 22 | } 23 | 24 | .pPolicy .pPolicyContainer ul li { 25 | margin: 0 0 0.5rem 0; 26 | } 27 | 28 | @media screen and (min-width: 200px) and (max-width: 480px) { 29 | .pPolicy .pPolicyContainer { 30 | width: 90%; 31 | } 32 | } 33 | 34 | @media screen and (min-width: 481px) and (max-width: 768px) { 35 | .pPolicy .pPolicyContainer { 36 | width: 90%; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/privacy-and-policy/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next"; 2 | import PageHeader from "@/app/components/PageHeader/PageHeader"; 3 | export const metadata: Metadata = { 4 | title: "Privacy & Policy", 5 | description: 6 | "Protecting your privacy is our top priority. Read our privacy policy to learn about how we collect, use, and protect your personal information.", 7 | alternates: { 8 | canonical: "https://www.harshitclub.com/privacy-and-policy", 9 | }, 10 | openGraph: { 11 | type: "website", 12 | title: "Privacy & Policy", 13 | siteName: "harshitclub", 14 | }, 15 | }; 16 | 17 | export default function PrivacyLayout({ 18 | children, 19 | }: { 20 | children: React.ReactNode; 21 | }) { 22 | return ( 23 |
24 | 25 | {children} 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /app/terms-and-conditions/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next"; 2 | import PageHeader from "@/app/components/PageHeader/PageHeader"; 3 | 4 | export const metadata: Metadata = { 5 | title: "Terms and Conditions", 6 | description: 7 | "Our Terms and Conditions provide guidelines and rules for the use of our website. By accessing and using our site, you agree to comply with these terms.", 8 | alternates: { 9 | canonical: "https://www.harshitclub.com/terms-and-conditions", 10 | }, 11 | openGraph: { 12 | type: "website", 13 | title: "Terms & Conditions", 14 | siteName: "harshitclub", 15 | }, 16 | }; 17 | 18 | export default function TermsLayout({ 19 | children, 20 | }: { 21 | children: React.ReactNode; 22 | }) { 23 | return ( 24 |
25 | 26 | {children} 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /app/components/Home/Github/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import { RiExternalLinkLine, RiGithubFill } from "react-icons/ri"; 4 | import Link from "next/link"; 5 | 6 | export default function Github() { 7 | return ( 8 |
9 |
10 |
11 |
12 | 13 |
14 |

Hi 👋, I'm Harshit Kumar

15 | 16 | 19 | 20 |
21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /app/contact/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next"; 2 | import PageHeader from "@/app/components/PageHeader/PageHeader"; 3 | export const metadata: Metadata = { 4 | title: "Contact", 5 | description: 6 | "Get in touch with Harshit Kumar, a full-stack web developer. Contact me for any queries or project collaborations.", 7 | alternates: { 8 | canonical: "https://www.harshitclub.com/contact", 9 | }, 10 | openGraph: { 11 | type: "website", 12 | title: "Contact - Harshit Kumar", 13 | description: 14 | "Get in touch with Harshit Kumar, a full-stack web developer. Contact me for any queries or project collaborations.", 15 | url: "https://www.harshitclub.com/contact", 16 | siteName: "harshitclub", 17 | }, 18 | }; 19 | 20 | export default function ContactLayout({ 21 | children, 22 | }: { 23 | children: React.ReactNode; 24 | }) { 25 | return ( 26 |
27 | 28 | {children} 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /app/components/Home/Github/style.css: -------------------------------------------------------------------------------- 1 | .githubSection { 2 | margin: 0 0 1px 0; 3 | } 4 | 5 | .githubSection .githubSContainer .githubSContent { 6 | background-color: var(--black); 7 | border-radius: 0.2rem; 8 | padding: 2rem 0; 9 | } 10 | 11 | .githubSection .githubSContainer .githubSContent .githubSIcon { 12 | font-size: 4rem; 13 | color: var(--white); 14 | } 15 | 16 | .githubSection .githubSContainer .githubSContent h3 { 17 | font-size: var(--h4); 18 | color: var(--white); 19 | } 20 | 21 | .githubSection .githubSContainer .githubSContent a button { 22 | padding: 0.5rem; 23 | background-color: var(--white); 24 | color: var(--headingColor); 25 | border: 1px solid var(--white); 26 | cursor: pointer; 27 | transition: 0.3s; 28 | border-radius: 0.2rem; 29 | } 30 | 31 | .githubSection .githubSContainer .githubSContent a button .githubSFollowBtn { 32 | margin: 0 0 -0.16rem 0; 33 | } 34 | 35 | .githubSection .githubSContainer .githubSContent a button:hover { 36 | background-color: var(--white); 37 | color: var(--headingColor); 38 | } 39 | -------------------------------------------------------------------------------- /app/components/Home/About/style.css: -------------------------------------------------------------------------------- 1 | .aboutSection { 2 | margin: 0 0 2rem 0; 3 | } 4 | 5 | .aboutSection .aboutSContainer { 6 | background: url(../../../../public/aboutbg.svg); 7 | background-repeat: no-repeat; 8 | background-size: cover; 9 | padding: 0 1rem 0 0; 10 | border-radius: 0.2rem; 11 | } 12 | 13 | .aboutSection .aboutSContainer h2 { 14 | margin: 0 0 1.5rem 0; 15 | color: var(--headingColor); 16 | font-size: 1.4rem; 17 | } 18 | 19 | .aboutSection .aboutSContainer p { 20 | color: var(--textColor); 21 | } 22 | 23 | .aboutSection .aboutSContainer .aboutSBtns .aboutSbtn a button { 24 | padding: 0.5rem; 25 | background-color: var(--headingColor); 26 | color: var(--white); 27 | border: 1px solid var(--headingColor); 28 | margin: 0 1rem 0 0; 29 | width: 8rem; 30 | cursor: pointer; 31 | transition: 0.3s; 32 | border-radius: 0.2rem; 33 | } 34 | 35 | .aboutSection .aboutSContainer .aboutSBtns .aboutSbtn a button:hover { 36 | background-color: var(--white); 37 | color: var(--textColor); 38 | } 39 | 40 | @media screen and (min-width: 200px) and (max-width: 480px) { 41 | } 42 | -------------------------------------------------------------------------------- /app/blogs/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next"; 2 | import PageHeader from "../components/PageHeader/PageHeader"; 3 | 4 | export const metadata: Metadata = { 5 | title: "Blogs", 6 | description: 7 | "Explore insightful articles and engaging content on my blogs page. Discover a wealth of knowledge, tips, and inspiration in a variety of technical and development topics.", 8 | alternates: { 9 | canonical: "https://www.harshitclub.com/blogs", 10 | }, 11 | openGraph: { 12 | type: "website", 13 | title: "Blogs", 14 | description: 15 | "Explore insightful articles and engaging content on my blogs page. Discover a wealth of knowledge, tips, and inspiration in a variety of technical and development topics.", 16 | url: "https://www.harshitclub.com/blogs", 17 | siteName: "harshitclub", 18 | }, 19 | }; 20 | 21 | export default function BlogsLayout({ 22 | children, 23 | }: { 24 | children: React.ReactNode; 25 | }) { 26 | return ( 27 |
28 | 29 | {children} 30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Harshit Kumar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app/my-story/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next"; 2 | import PageHeader from "@/app/components/PageHeader/PageHeader"; 3 | export const metadata: Metadata = { 4 | title: "My Story", 5 | description: 6 | "Discover my journey of becoming a Full Stack Web Developer. From my first interaction with a computer to choosing programming as my career, read my story here.", 7 | alternates: { 8 | canonical: "https://www.harshitclub.com/my-story", 9 | }, 10 | openGraph: { 11 | type: "website", 12 | title: "My Story - Harshit Kumar", 13 | description: 14 | "Discover my journey of becoming a Full Stack Web Developer. From my first interaction with a computer to choosing programming as my career, read my story here.", 15 | url: "https://www.harshitclub.com/my-story", 16 | siteName: "harshitclub", 17 | }, 18 | }; 19 | 20 | export default function MyStoryLayout({ 21 | children, 22 | }: { 23 | children: React.ReactNode; 24 | }) { 25 | return ( 26 |
27 | 28 | {children} 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /app/about/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next"; 2 | import PageHeader from "@/app/components/PageHeader/PageHeader"; 3 | export const metadata: Metadata = { 4 | title: "About", 5 | description: 6 | "Learn more about Harshit Kumar, a Full Stack Web Developer skilled in JavaScript, Next.js, React.js, Node.js, and more. Discover his experience, education, and career journey.", 7 | alternates: { 8 | canonical: "https://www.harshitclub.com/about", 9 | }, 10 | openGraph: { 11 | type: "website", 12 | title: "About - Harshit Kumar", 13 | description: 14 | "Learn more about Harshit Kumar, a Full Stack Web Developer skilled in JavaScript, Next.js, React.js, Node.js, and more. Discover his experience, education, and career journey.", 15 | url: "https://www.harshitclub.com/about", 16 | siteName: "harshitclub", 17 | }, 18 | }; 19 | 20 | export default function AboutLayout({ 21 | children, 22 | }: { 23 | children: React.ReactNode; 24 | }) { 25 | return ( 26 |
27 | 28 | {children} 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /app/sitemap.ts: -------------------------------------------------------------------------------- 1 | import { MetadataRoute } from "next"; 2 | import fs from "fs"; 3 | import path from "path"; 4 | import matter from "gray-matter"; 5 | 6 | export default function sitemap(): MetadataRoute.Sitemap { 7 | const blogDir = "posts"; 8 | const files = fs.readdirSync(path.join(blogDir)); 9 | const blogs = files.map((fileName) => { 10 | const fileContent = fs.readFileSync(path.join(blogDir, fileName), "utf-8"); 11 | const { data: frontMatter } = matter(fileContent); 12 | return { 13 | meta: frontMatter, 14 | slug: fileName.replace(".mdx", ""), 15 | }; 16 | }); 17 | const allBlogs = blogs.map((item) => ({ 18 | url: `https://www.harshitclub.com/blog/${item.slug}`, 19 | lastModified: item.meta.date, 20 | })); 21 | 22 | const routes = [ 23 | "", 24 | "/blogs", 25 | "/projects", 26 | "/about", 27 | "/contact", 28 | "/my-story", 29 | "/privacy-and-policy", 30 | "/terms-and-conditions", 31 | ].map((route) => ({ 32 | url: `https://www.harshitclub.com${route}`, 33 | lastModified: new Date().toISOString().split("T")[0], 34 | })); 35 | 36 | return [...routes, ...allBlogs]; 37 | } 38 | -------------------------------------------------------------------------------- /app/projects/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next"; 2 | import PageHeader from "@/app/components/PageHeader/PageHeader"; 3 | export const metadata: Metadata = { 4 | title: "Projects", 5 | description: 6 | "Explore my latest web development projects showcasing my skills in HTML, CSS, JavaScript, React.js, Node.js, and more. View my portfolio and contact me for collaborations.", 7 | alternates: { 8 | canonical: "https://www.harshitclub.com/projects", 9 | }, 10 | openGraph: { 11 | type: "website", 12 | title: "Projects - Harshit Kumar", 13 | description: 14 | "Explore my latest web development projects showcasing my skills in HTML, CSS, JavaScript, React.js, Node.js, and more. View my portfolio and contact me for collaborations.", 15 | url: "https://www.harshitclub.com/projects", 16 | siteName: "harshitclub", 17 | }, 18 | }; 19 | 20 | export default function ProjectsLayout({ 21 | children, 22 | }: { 23 | children: React.ReactNode; 24 | }) { 25 | return ( 26 |
27 | 28 | {children} 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /app/components/ContactForm/style.css: -------------------------------------------------------------------------------- 1 | form .cInputs { 2 | margin: 0 0 1rem 0; 3 | } 4 | 5 | form input { 6 | padding: 0.5rem; 7 | font-size: 1rem; 8 | outline: none; 9 | border: 1px solid var(--borderColor); 10 | border-radius: 0.2rem; 11 | background: transparent; 12 | } 13 | 14 | form select { 15 | border-radius: 0.2rem; 16 | padding: 0.5rem; 17 | font-size: 1rem; 18 | outline: none; 19 | border: 1px solid var(--borderColor); 20 | background: transparent; 21 | } 22 | 23 | form textarea { 24 | border-radius: 0.2rem; 25 | padding: 0.5rem; 26 | font-size: 1rem; 27 | outline: none; 28 | border: 1px solid var(--borderColor); 29 | background: transparent; 30 | } 31 | 32 | form button { 33 | padding: 0.5rem; 34 | font-size: 1rem; 35 | outline: none; 36 | background-color: var(--headingColor); 37 | color: var(--white); 38 | border: 1px solid var(--headingColor); 39 | border-radius: 0.2rem; 40 | } 41 | 42 | form button:hover { 43 | background-color: var(--white); 44 | color: var(--headingColor); 45 | transition: 0.3s; 46 | cursor: pointer; 47 | } 48 | 49 | form .contactSent { 50 | color: green; 51 | } 52 | 53 | form .contactError { 54 | color: red; 55 | } 56 | -------------------------------------------------------------------------------- /app/components/AsideSection/style.css: -------------------------------------------------------------------------------- 1 | .asideSection { 2 | width: 31%; 3 | border: 1px solid var(--black); 4 | position: sticky; 5 | top: 4rem; 6 | border-radius: 0.2rem; 7 | background-color: var(--black); 8 | padding: 1rem; 9 | } 10 | 11 | .asideSection h2 { 12 | font-weight: 400; 13 | margin: 0 0 0.1rem 0; 14 | color: var(--textWhite); 15 | font-size: 1.4rem; 16 | } 17 | 18 | .asideSection ul { 19 | margin: 0 0 2rem 0; 20 | color: var(--textWhite); 21 | list-style-position: inside; 22 | list-style: disc; 23 | } 24 | 25 | .asideSection ul li { 26 | margin: 0 0 0.3rem 1.2rem; 27 | font-size: 0.9rem; 28 | } 29 | 30 | .asideSection .aboutAsideSocial a { 31 | color: var(--textWhite); 32 | font-size: 1.6rem; 33 | margin: 0 0.5rem 0 0; 34 | } 35 | 36 | .asideSection .asideMail p { 37 | color: var(--textWhite); 38 | margin: 0 0 0.5rem 0; 39 | } 40 | .asideSection .asideMail a { 41 | color: var(--textWhite); 42 | } 43 | 44 | @media screen and (min-width: 200px) and (max-width: 480px) { 45 | .asideSection { 46 | display: none; 47 | } 48 | } 49 | 50 | @media screen and (min-width: 481px) and (max-width: 768px) { 51 | .asideSection { 52 | display: none; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "harshitclub", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Harshit Kumar's Personal Portfolio Website.", 6 | "author": "Harshit Kumar", 7 | "license": "MIT", 8 | "scripts": { 9 | "dev": "next dev", 10 | "build": "next build", 11 | "start": "next start", 12 | "lint": "next lint" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/harshitclub/harshitclubweb" 17 | }, 18 | "dependencies": { 19 | "@mdx-js/loader": "^3.0.0", 20 | "@mdx-js/react": "^3.0.0", 21 | "@next/mdx": "^13.5.6", 22 | "@types/mdx": "^2.0.9", 23 | "@vercel/analytics": "^1.0.0", 24 | "@vercel/speed-insights": "^1.0.2", 25 | "axios": "^1.5.0", 26 | "geist": "^1.0.0", 27 | "gray-matter": "^4.0.3", 28 | "mongoose": "^7.1.0", 29 | "next": "^14.1.4", 30 | "next-mdx-remote": "^4.4.1", 31 | "nextjs-toploader": "^1.5.3", 32 | "nodemailer": "^6.9.4", 33 | "react": "18.2.0", 34 | "react-dom": "18.2.0", 35 | "react-icons": "^4.8.0", 36 | "react-toastify": "^9.1.3", 37 | "supports-color": "^9.4.0", 38 | "typescript": "^5.1.6" 39 | }, 40 | "devDependencies": { 41 | "@types/nodemailer": "^6.4.9", 42 | "@types/react": "18.2.19" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /app/components/Home/Hero/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import Link from "next/link"; 4 | import { BsDownload } from "react-icons/bs"; 5 | import { RiExternalLinkLine } from "react-icons/ri"; 6 | 7 | export default function Hero() { 8 | return ( 9 |
10 |
11 |

12 | Harshit Kumar 13 |
14 | Full-Stack Web Developer 15 |

16 |

17 | Hey There 👋, I'm Harshit Kumar, web developer who creates 18 | dynamic real world websites and web applications. 19 |

20 | 21 |
22 |
23 | 24 |  Mail 25 |   26 | 27 |
28 | 29 |
30 | 31 | Resume 32 | 33 |
34 |
35 | 36 |
37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /app/components/Home/Experience/style.css: -------------------------------------------------------------------------------- 1 | .exSection { 2 | margin: 0 0 2rem 0; 3 | } 4 | .exSection .exSContainer { 5 | border-radius: 0.2rem; 6 | } 7 | 8 | .exSection .exSContainer h2 { 9 | background-color: var(--white); 10 | font-size: 1.4rem; 11 | } 12 | 13 | .exSection .exSContainer .exBox { 14 | padding: 0.5rem; 15 | border: 1px solid var(--borderColor); 16 | /* margin: 0.5rem 1rem 0 0; */ 17 | border-radius: 0.2rem; 18 | color: var(--textColor); 19 | } 20 | 21 | .exSection .exSContainer .exBox:hover { 22 | background-color: var(--white); 23 | color: var(--black); 24 | transition: 0.3s; 25 | } 26 | 27 | .exSection .exSContainer .exBox .exFirst h3 { 28 | font-weight: 500; 29 | margin: 0 0 0.3rem 0; 30 | font-size: 1.1rem; 31 | color: var(--headingColor); 32 | } 33 | 34 | .exHeadIcons { 35 | margin: 0 0 -0.18rem 0; 36 | } 37 | 38 | .exSection .exSContainer .exBox .exFirst p { 39 | margin: 0 0 0.5rem 0; 40 | color: var(--textColor); 41 | } 42 | 43 | .exSection .exSContainer .exBox .exFirst p a { 44 | color: var(--textColor); 45 | } 46 | 47 | .exIcon { 48 | margin: 0 0 -0.1rem 0; 49 | } 50 | 51 | @media screen and (min-width: 200px) and (max-width: 480px) { 52 | .exSection .exSContainer h2 { 53 | margin: 0 0 1rem 0; 54 | } 55 | .exSection .exSContainer { 56 | border: none; 57 | padding: 0; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /app/components/Home/Social/style.css: -------------------------------------------------------------------------------- 1 | .socialSection { 2 | margin: 0 0 1px 0; 3 | } 4 | 5 | .socialSection .socialSContainer { 6 | border-radius: 0.2rem; 7 | } 8 | .socialSection .socialSContainer .socialSProfiles { 9 | gap: 2px; 10 | } 11 | 12 | .socialSection .socialSContainer .socialSProfiles .socialSProfile { 13 | background-color: var(--black); 14 | width: 33.3%; 15 | transition: 0.3s; 16 | border-radius: 0.2rem; 17 | } 18 | 19 | .socialSection .socialSContainer .socialSProfiles .socialSProfile a { 20 | color: var(--textWhite); 21 | } 22 | 23 | .socialSection .socialSContainer .socialSProfiles .socialSProfile a h3 { 24 | font-weight: 500; 25 | font-size: var(--a); 26 | color: var(--textWhite); 27 | padding: 3rem 8rem; 28 | } 29 | 30 | .socialSIcons { 31 | margin: 0 0 -0.15rem 0; 32 | } 33 | 34 | @media screen and (min-width: 200px) and (max-width: 480px) { 35 | .socialSection .socialSContainer .socialSProfiles { 36 | flex-direction: column; 37 | } 38 | 39 | .socialSection .socialSContainer .socialSProfiles .socialSProfile { 40 | width: 100%; 41 | margin: 0 0 1px 0; 42 | } 43 | } 44 | 45 | @media screen and (min-width: 481px) and (max-width: 768px) { 46 | .socialSection .socialSContainer .socialSProfiles { 47 | flex-direction: column; 48 | } 49 | 50 | .socialSection .socialSContainer .socialSProfiles .socialSProfile { 51 | width: 100%; 52 | margin: 0 0 1px 0; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /app/components/Home/Social/Social.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import { RiExternalLinkLine } from "react-icons/ri"; 4 | import Link from "next/link"; 5 | 6 | export default function Social() { 7 | return ( 8 |
9 |
10 |
11 |
12 | 13 |

14 | Github 15 |

16 | 17 |
18 |
19 | 20 |

21 | LinkedIn 22 |

23 | 24 |
25 |
26 | 27 |

28 | Twitter 29 |

30 | 31 |
32 |
33 |
34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /app/projects/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | // import SearchProject from "../components/SearchProject/SearchProject"; 4 | import { RiExternalLinkLine, RiGithubFill } from "react-icons/ri"; 5 | import { allProjects } from "./projects.js"; 6 | 7 | export default function Projects() { 8 | return ( 9 |
10 |
11 | {allProjects.map((project) => { 12 | return ( 13 | <> 14 |
15 |
16 |
17 | 18 | Code Link 19 | 20 | 21 |
22 |
23 | 24 | Live Link 25 | 26 | 27 |
28 |
29 | 30 |

{project.title}

31 |

{project.desc}

32 |
33 |

{project.tech}

34 |
35 |
36 | 37 | ); 38 | })} 39 |
40 |
41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /app/components/Home/Hero/style.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | margin: 4rem 0 0 0; 3 | } 4 | 5 | .hero .heroContainer { 6 | padding: 1rem 1rem 1rem 2rem; 7 | /* background-color: #111111; */ 8 | height: 90vh; 9 | border-radius: 0.2rem; 10 | background-color: var(--black); 11 | } 12 | 13 | .hero .heroContainer h1 { 14 | font-size: 3rem; 15 | color: var(--white); 16 | margin: 0 0 1rem 0; 17 | font-weight: 600; 18 | } 19 | 20 | .hero .heroContainer h1 span { 21 | /* font-size: 2.5rem; */ 22 | font-weight: 400; 23 | } 24 | 25 | .hero .heroContainer h2 { 26 | font-weight: 500; 27 | font-size: 1.5rem; 28 | color: var(--white); 29 | width: 70%; 30 | } 31 | 32 | .hero .heroContainer .heroBtns .heroBtn a { 33 | background-color: var(--white); 34 | color: var(--black); 35 | padding: 0.5rem; 36 | border: 1px solid var(--black); 37 | transition: 0.3s; 38 | margin: 0 1rem 0 0; 39 | border-radius: 0.2rem; 40 | cursor: pointer; 41 | } 42 | 43 | .hero .heroContainer .heroBtns .heroBtn a:hover { 44 | background-color: var(--white); 45 | color: var(--black); 46 | } 47 | 48 | .heroRBtnIcon { 49 | margin: 0 0 -0.12rem 0; 50 | } 51 | 52 | @media screen and (min-width: 200px) and (max-width: 480px) { 53 | .hero { 54 | height: 50vh; 55 | } 56 | 57 | .hero .heroContainer { 58 | padding: 1rem; 59 | } 60 | .hero .heroContainer h1 { 61 | font-size: 2rem; 62 | } 63 | 64 | .hero .heroContainer h2 { 65 | width: 100%; 66 | text-align: justify; 67 | font-size: 1rem; 68 | } 69 | } 70 | 71 | @media screen and (min-width: 481px) and (max-width: 768px) { 72 | .hero { 73 | height: 50vh; 74 | } 75 | .hero .heroContainer h1 { 76 | font-size: 2rem; 77 | } 78 | 79 | .hero .heroContainer h2 { 80 | width: 100%; 81 | font-size: 1.4rem; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /app/components/AsideSection/AsideSection.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import Link from "next/link"; 4 | import { 5 | RiExternalLinkLine, 6 | RiGithubFill, 7 | RiInstagramFill, 8 | RiLinkedinBoxFill, 9 | RiTwitterFill, 10 | } from "react-icons/ri"; 11 | 12 | interface TableOfContentItem { 13 | id: string; 14 | title: string; 15 | } 16 | 17 | interface AsideSectionProps { 18 | tableOfContent: TableOfContentItem[]; 19 | } 20 | 21 | const AsideSection: React.FC = ({ tableOfContent }) => { 22 | return ( 23 | 55 | ); 56 | }; 57 | 58 | export default AsideSection; 59 | -------------------------------------------------------------------------------- /app/components/Home/Experience/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import Link from "next/link"; 4 | import { RiArrowDropDownLine, RiExternalLinkLine } from "react-icons/ri"; 5 | 6 | export default function Experience() { 7 | return ( 8 |
9 |
10 |

Work Experience

11 |
12 |
13 |

14 | Position 15 | 16 |

17 |

Web Developer

18 | 19 |

20 | Company 21 | 22 |

23 |

24 | 25 | 3a Learning Solutions India Pvt. Ltd{" "} 26 | 27 | 28 |

29 |

30 | Duration 31 | 32 |

33 |

2022 May - Current

34 |

35 | Skills Used 36 | 37 |

38 |

MERN Stack | Next.js | On-Page SEO

39 |

40 | Full Stack Web Developer in 3a Learning Solutions, Build and 41 | Manage Full Stack Professional Websites Specially in Javascript 42 | MERN Stack. 43 |

44 |
45 |
46 |
47 |
48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /app/components/Home/About/About.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.css"; 3 | import Link from "next/link"; 4 | export default function About() { 5 | return ( 6 |
7 |
8 |

Get to Know Me

9 |

10 | Hi, I'm Harshit Kumar, a web developer who specializes in creating 11 | dynamic and responsive websites and web applications. I use the latest 12 | technologies such as React.js, Next.js, Node.js, and more to build 13 | websites that are not only visually appealing but also high-performing 14 | and scalable. 15 |

16 |

17 | In addition to my technical skills, I also understand the importance 18 | of on-page SEO in driving relevant traffic to a website. By optimizing 19 | the content and HTML source code of each page, I ensure that the 20 | websites I create rank higher on search engines, improving user 21 | engagement and overall performance. 22 |

23 |

24 | I'm passionate about creating meaningful digital experiences that help 25 | businesses and individuals achieve their goals. Let's work together to 26 | bring your ideas to life and make a difference on the web! 27 |

28 |
29 |
30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 |
39 |
40 |
41 |
42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import Footer from "./components/Footer/Footer"; 2 | import Navbar from "./components/Navbar/Navbar"; 3 | import "./globals.css"; 4 | import { GeistSans, GeistMono } from "geist/font"; 5 | import { Analytics } from "@vercel/analytics/react"; 6 | import { Metadata } from "next"; 7 | import NextTopLoader from "nextjs-toploader"; 8 | import { SpeedInsights } from "@vercel/speed-insights/next"; 9 | 10 | export const metadata: Metadata = { 11 | title: "Harshit Kumar - Full Stack Web Developer", 12 | creator: "Harshit Kumar", 13 | description: 14 | "Harshit Kumar Portfolio Website, a full stack web developer proficient in frontend and backend technologies like React, Next, Node, Express, JavaScript, TypeScript. Explore My Work and Skills To know more.", 15 | alternates: { 16 | canonical: "https://www.harshitclub.com", 17 | }, 18 | openGraph: { 19 | type: "website", 20 | title: "Harshit Kumar - Full Stack Web Developer", 21 | description: 22 | "Harshit Kumar Portfolio Website, a full stack web developer proficient in frontend and backend technologies like React, Next, Node, Express, JavaScript, TypeScript. Explore My Work and Skills To know more.", 23 | url: "https://harshitclub.com", 24 | siteName: "harshitclub", 25 | locale: "en_US", 26 | images: "../public/open-graph-image.jpg", 27 | }, 28 | twitter: { 29 | card: "summary_large_image", 30 | site: "@harshitclub", 31 | creator: "@harshitclub", 32 | }, 33 | verification: { 34 | google: "", 35 | }, 36 | metadataBase: new URL("https://harshitclub.com"), 37 | }; 38 | 39 | export default function RootLayout({ 40 | children, 41 | }: { 42 | children: React.ReactNode; 43 | }) { 44 | return ( 45 | 46 | 47 | 48 | 49 | {children} 50 | 51 | 52 |