nishchay17 · nishchay17 · Nov 17, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/app/Analytics.tsx b/app/Analytics.tsx
@@ -0,0 +1,29 @@
+import Script from "next/script";
+
+import * as gtag from "../lib/gtag";
+
+function Analytics() {
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+      />
+      <Script
+        id="gtag-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${gtag.GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+        }}
+      />
+    </>
+  );
+}
+export default Analytics;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,32 @@
+import "../styles/globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+import { Providers } from "./provider";
+import Analytics from "./Analytics";
+
+export const metadata: Metadata = {
+  title: {
+    template: "%s | Nishchay",
+    default: "Nishchay",
+  },
+  description: "Portfolio made with Next JS | Nishchay17",
+  icons: ["/svg/logo.svg"],
+};
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <Analytics />
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/pages/index.tsx → app/page.tsx b/pages/index.tsx → app/page.tsx
@@ -1,12 +1,10 @@
 import { ReactElement } from "react";
-import dynamic from "next/dynamic";
 import { Container } from "@chakra-ui/layout";
 
-const HeroSection = dynamic(() => import("../components/Landing/HeroSection"));
-const Projects = dynamic(() => import("../components/Landing/Projects"));
-const Tech = dynamic(() => import("../components/Landing/Tech"));
-const Social = dynamic(() => import("../components/Landing/Social"));
-
+import HeroSection from "../components/Landing/HeroSection";
+import Projects from "../components/Landing/Projects";
+import Tech from "../components/Landing/Tech";
+import Social from "../components/Landing/Social";
 import Layout from "../components/Layout";
 
 function Home(): ReactElement {

diff --git a/app/project/[id]/page.tsx b/app/project/[id]/page.tsx
@@ -0,0 +1,32 @@
+import React, { ReactElement } from "react";
+import type { Metadata } from "next";
+
+import ProjectLayout from "../../../components/ProjectPage/ProjectLayout";
+import Layout from "../../../components/Layout";
+import { projects } from "../../../config/project";
+import { Project } from "../../../interface/Project";
+
+export const metadata: Metadata = {
+  title: "Project",
+};
+
+function Project({ params: { id } }: { params: { id: string } }): ReactElement {
+  let project: Project = {
+    id: 99,
+    name: "No project found",
+    description: "No project with this Id found",
+    tag: "",
+  };
+  if (id) {
+    const currentProject = projects.find((project) => project.id == +id);
+    if (!!currentProject) {
+      project = currentProject;
+    }
+  }
+
+  return (
+    <Layout>{!project ? <></> : <ProjectLayout project={project} />}</Layout>
+  );
+}
+
+export default Project;
diff --git a/app/provider.tsx b/app/provider.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { ChakraProvider } from "@chakra-ui/react";
+import { AnimatePresence } from "framer-motion";
+
+import { theme } from "../lib/theme";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ChakraProvider theme={theme}>
+      <AnimatePresence>{children}</AnimatePresence>
+    </ChakraProvider>
+  );
+}
diff --git a/components/Landing/Experience.tsx b/components/Landing/Experience.tsx
@@ -2,30 +2,7 @@ import React, { ReactElement } from "react";
 import { Box, Flex, Text, List, ListItem, ListIcon } from "@chakra-ui/react";
 import { FiMinus } from "react-icons/fi";
 
-const exps = [
-  {
-    company: "Homelane",
-    title: "Software Engineer Intern",
-    date: "Jan 2022 - Present",
-    points: [
-      "Worked on developing dashboard using React js and SCSS",
-      "Migrated vanilla javascript code to React js code",
-      "Fixed existing bugs and added functionalities in dashboards",
-      "Converted design to pixel-perfect components",
-    ],
-  },
-  {
-    company: "The Internet Folks",
-    title: "Software Engineer Intern",
-    date: "Dec 2020 - June 2021",
-    points: [
-      "Used Next js (react js) with server-side rendering",
-      "Used Redux (Redux toolkit) for state management",
-      "Converted UI design to reusable, scalable react components",
-      "Implemented Debouncing to reduce API calls",
-    ],
-  },
-];
+import { experience } from "../../config/experience";
 
 function Experience(): ReactElement {
   return (
@@ -34,7 +11,7 @@ function Experience(): ReactElement {
         Experience
       </Text>
 
-      {exps.map(({ company, title, points, date }) => {
+      {experience.map(({ company, title, points, date }) => {
         return (
           <Box key={date} mb="2rem">
             <Box

diff --git a/components/Landing/HeroSection.tsx b/components/Landing/HeroSection.tsx
@@ -35,7 +35,7 @@ function HeroSection(): ReactElement {
                 fontSize={["2.75rem", "3rem", "4rem", "6vw"]}
                 letterSpacing="1px"
                 lineHeight={1}
-                fontWeight={600}
+                fontWeight={500}
                 textAlign="center"
               >
                 Hello there <br /> I am Nishchay
@@ -46,7 +46,7 @@ function HeroSection(): ReactElement {
               animate={{ opacity: 1 }}
               transition={{ delay: 0.6 }}
               as={Text}
-              fontSize={["1.1rem", "1.2rem", "1.4rem", "1.5rem", "1.5vw"]}
+              fontSize={["1.1rem", "1.2rem", "1.3rem", "1.4rem", "1.4vw"]}
               mt="1rem"
               color="blackAlpha.800"
               lineHeight="120%"
@@ -70,7 +70,6 @@ function HeroSection(): ReactElement {
               >
                 <Button
                   variant="btn-black"
-                  isFullWidth={false}
                   leftIcon={<FiDownload size="1.2rem" />}
                   size="sm"
                 >
@@ -84,7 +83,6 @@ function HeroSection(): ReactElement {
                   variant="btn-black"
                   initial={{ scale: 0.9 }}
                   animate={{ scale: 1 }}
-                  isFullWidth={false}
                   leftIcon={<FiMail size="1.2rem" />}
                   ml={[0, "1rem"]}
                   mt={["1rem", 0]}

diff --git a/components/Landing/Projects.tsx b/components/Landing/Projects.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { ReactElement, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
@@ -46,53 +48,51 @@ function ProjectCard({
 
   return (
     <Link href={`/project/${id}`}>
-      <a>
-        <MotionBox
-          ref={ref}
-          initial="hidden"
-          animate={controls}
-          variants={item}
-          custom={index}
-          cursor="pointer"
-          width={"100%"}
-          height={"100%"}
-          borderRadius="7px"
-          border="1px"
+      <MotionBox
+        ref={ref}
+        initial="hidden"
+        animate={controls}
+        variants={item}
+        custom={index}
+        cursor="pointer"
+        width={"100%"}
+        height={"100%"}
+        borderRadius="7px"
+        border="1px"
+        borderColor="blackAlpha.300"
+        overflow="hidden"
+      >
+        <MotionBox initial={false} layoutId={id} position="relative">
+          <Image
+            style={{ objectFit: "cover" }}
+            src={image ? `/img/${image}` : "/img/no-img.png"}
+            height={400}
+            width={708}
+            quality={100}
+            alt={`${image}`}
+            draggable={false}
+          />
+        </MotionBox>
+        <Box
+          borderTop="1px"
           borderColor="blackAlpha.300"
-          overflow="hidden"
+          mt={-1.5}
+          px="1rem"
+          pb="1rem"
+          bg={bg}
+          h="full"
         >
-          <MotionBox initial={false} layoutId={id} position="relative">
-            <Image
-              objectFit="cover"
-              src={image ? `/img/${image}` : "/img/no-img.png"}
-              height={400}
-              width={708}
-              quality={100}
-              alt={`${image}`}
-              draggable={false}
-            />
-          </MotionBox>
-          <Box
-            borderTop="1px"
-            borderColor="blackAlpha.300"
-            mt={-1.5}
-            px="1rem"
-            pb="1rem"
-            bg={bg}
-            h="full"
-          >
-            <Flex gap="0.5rem" alignItems="center" mt="1rem">
-              <Text fontSize="xl">{name}</Text>
-              {additionalTags?.map((tag) => (
-                <Badge colorScheme="purple" key={tag}>
-                  {tag}
-                </Badge>
-              ))}
-            </Flex>
-            <Text>{description}</Text>
-          </Box>
-        </MotionBox>
-      </a>
+          <Flex gap="0.5rem" alignItems="center" mt="1rem">
+            <Text fontSize="xl">{name}</Text>
+            {additionalTags?.map((tag) => (
+              <Badge colorScheme="purple" key={tag}>
+                {tag}
+              </Badge>
+            ))}
+          </Flex>
+          <Text>{description}</Text>
+        </Box>
+      </MotionBox>
     </Link>
   );
 }
@@ -118,7 +118,7 @@ function Projects(): ReactElement {
           textAlign="center"
           fontSize={["4xl", "5xl", "6xl"]}
           py="3.5rem"
-          fontWeight={600}
+          fontWeight={500}
           lineHeight={"100%"}
         >
           Featured Projects

diff --git a/components/Landing/Tech.tsx b/components/Landing/Tech.tsx
@@ -29,7 +29,7 @@ function Tech(): ReactElement {
         <Heading
           as="h3"
           fontSize={["4xl", "5xl", "6xl"]}
-          fontWeight={600}
+          fontWeight={500}
           lineHeight={"100%"}
           mb="1.5rem"
         >

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,27 +1,22 @@
+"use client";
+
 import React, { ReactElement, useState } from "react";
-import Head from "next/head";
 import { Waypoint } from "react-waypoint";
 
 import MotionBox from "./MotionBox";
 import Nav from "./Nav";
 interface Props {
   children: ReactElement[] | ReactElement;
-  title: string;
-  withAuth: boolean;
-  withAnimation: boolean;
+  withAnimation?: boolean;
 }
 
 const variants = {
   hidden: { opacity: 0, x: 0, y: -100 },
   enter: { opacity: 1, x: 0, y: 0 },
   exit: { opacity: 0, x: 0, y: -100 },
 };
-function Layout({
-  children,
-  title,
-  withAuth,
-  withAnimation,
-}: Props): ReactElement {
+
+function Layout({ children, withAnimation = false }: Props): ReactElement {
   const [isSticky, setIsSticky] = useState<boolean>(false);
 
   const setSticky = () => {
@@ -52,9 +47,6 @@ function Layout({
       exit="exit"
       transition={{ type: "linear", duration: 0.45 }}
     >
-      <Head>
-        <title>{title !== "" ? `Nishchay | ${title}` : "Nishchay"}</title>
-      </Head>
       <Waypoint
         onEnter={removeSticky}
         onPositionChange={onWaypointPositionChange}
@@ -65,10 +57,4 @@ function Layout({
   );
 }
 
-Layout.defaultProps = {
-  title: "",
-  withAuth: false,
-  withAnimation: true,
-};
-
 export default Layout;
diff --git a/components/MotionBox.tsx b/components/MotionBox.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { ReactElement } from "react";
 import { Box, BoxProps } from "@chakra-ui/layout";
 import { motion } from "framer-motion";