next 14 upgrade

nishchay17 · Nov 17, 2023 · ec56296 · ec56296
1 parent b09059b
commit ec56296
Show file tree

Hide file tree

Showing 21 changed files with 993 additions and 793 deletions.
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/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";
@@ -116,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";

diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { ReactElement } from "react";
 import Link from "next/link";
 import { Box, Flex, Text } from "@chakra-ui/react";

diff --git a/components/ProjectPage/ProjectLayout.tsx b/components/ProjectPage/ProjectLayout.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { ReactElement, useEffect, useState } from "react";
 import Link from "next/link";
 import { Button, ButtonGroup } from "@chakra-ui/button";
@@ -162,7 +164,9 @@ function ProjectLayout({ project }: Props): ReactElement {
               </Badge>
             ))}
           </Flex>
-          <Text fontSize="lg">Created on: {project.createdOn}</Text>
+          {!!project?.createdOn ? (
+            <Text fontSize="lg">Created on: {project.createdOn}</Text>
+          ) : null}
           <Box mt="1rem">
             <Text>{project?.description}</Text>
             <ButtonGroup variant="btn-black" mt="2rem">

diff --git a/interface/Project.ts b/interface/Project.ts
@@ -7,6 +7,6 @@ export type Project = {
   live?: string;
   tag: string;
   bg?: string;
-  createdOn: string;
+  createdOn?: string;
   additionalTags?: Readonly<string[]>;
 };
diff --git a/next.config.js b/next.config.js
@@ -5,8 +5,5 @@ module.exports = {
   typescript: {
     ignoreBuildErrors: true,
   },
-  images: {
-    domains: ["bkgsewdluleimqnwhzyo.supabase.co"],
-  },
   productionBrowserSourceMaps: true,
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,17 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.6.6",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@chakra-ui/next-js": "^2.1.5",
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@fontsource/cormorant-garamond": "^4.5.10",
     "@fontsource/source-sans-pro": "^4.5.10",
     "chakra-ui-markdown-renderer": "^4.0.0",
-    "framer-motion": "^4",
+    "framer-motion": "^10.16.4",
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.11.0",
     "react-intersection-observer": "^8.32.1",
     "react-markdown": "^8.0.0",
     "react-waypoint": "^10.3.0"

diff --git a/pages/_app.tsx b/pages/_app.tsx