jooncco · dependabot · Jul 12, 2023 · Jul 12, 2023
diff --git a/app/competitive-programming/page.tsx b/app/competitive-programming/page.tsx
@@ -1,10 +1,12 @@
-import {H1} from '@/components/Header';
 import React from 'react';
+import {Typography} from '../provider';
 
 export default function Cp(): JSX.Element {
   return (
     <div>
-      <H1>Competitive Programming</H1>
+      <Typography variant="h1" className="my-6">
+        Competitive Programming
+      </Typography>
     </div>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,15 @@
 import HomeBanner from '@/components/home/HomeBanner';
-import {H2} from '@/components/Header';
+import {Typography} from './provider';
+import {H2} from '@/components/Headers';
 import React from 'react';
 import Testimonials from '@/components/home/Testimonials';
 
 export default function Home(): JSX.Element {
   return (
     <div>
+      <Typography variant="h1" className="my-6">
+        About
+      </Typography>
       <HomeBanner />
       <H2 className="mt-10 mb-4">Testimonials</H2>
       <Testimonials />

diff --git a/app/posts/page.tsx b/app/posts/page.tsx
@@ -1,20 +1,12 @@
-import {H1, H2, H3, H4, H5} from '@/components/Header';
 import React from 'react';
+import {Typography} from '../provider';
 
 export default function Posts(): JSX.Element {
   return (
-    <div >
-      <H1>Posts</H1>
-      <br />
-      <H1>Heading 1</H1>
-      <br />
-      <H2>Heading 2</H2>
-      <br />
-      <H3>Heading 3</H3>
-      <br />
-      <H4>Heading 4</H4>
-      <br />
-      <H5>Heading 5</H5>
+    <div>
+      <Typography variant="h1" className="my-6">
+        Posts
+      </Typography>
     </div>
   );
 }
diff --git a/app/provider.ts b/app/provider.ts
@@ -1,6 +1,22 @@
 'use client';
 import {ThemeProvider} from 'next-themes';
-import {Carousel} from '@material-tailwind/react';
+import {
+  Carousel,
+  IconButton,
+  SpeedDial,
+  SpeedDialHandler,
+  SpeedDialContent,
+  SpeedDialAction,
+  Typography,
+} from '@material-tailwind/react';
 
 export {ThemeProvider};
-export {Carousel};
+export {
+  Carousel,
+  IconButton,
+  SpeedDial,
+  SpeedDialHandler,
+  SpeedDialContent,
+  SpeedDialAction,
+  Typography,
+};
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
@@ -1,10 +1,12 @@
-import {H1} from '@/components/Header';
 import React from 'react';
+import {Typography} from '../provider';
 
 export default function Resume(): JSX.Element {
   return (
     <div>
-      <H1>Resume</H1>
+      <Typography variant="h1" className="my-6">
+        Resume
+      </Typography>
     </div>
   );
 }
diff --git a/components/Header.tsx → components/Headers.tsx b/components/Header.tsx → components/Headers.tsx
@@ -10,7 +10,7 @@ export function H1({className, children}: HeaderProps): JSX.Element {
     <h1
       className={`${
         className ?? ''
-      } px-4 py-3 font-bold text-3xl lg:text-5xl bg-gradient-to-r from-indigo-700/30 to-70% rounded-xl`}>
+      } px-4 py-3 font-bold text-3xl lg:text-4xl bg-gradient-to-r from-indigo-700/30 to-70% rounded-xl`}>
       {children}
     </h1>
   );
@@ -21,7 +21,7 @@ export function H2({className, children}: HeaderProps): JSX.Element {
     <h2
       className={`${
         className ?? ''
-      } px-4 py-2 font-bold text-2xl lg:text-4xl bg-gradient-to-r from-indigo-700/30 to-60% rounded-xl`}>
+      } px-4 py-2 font-bold text-2xl lg:text-3xl bg-gradient-to-r from-indigo-700/30 to-60% rounded-xl`}>
       {children}
     </h2>
   );
@@ -32,7 +32,7 @@ export function H3({className, children}: HeaderProps): JSX.Element {
     <h3
       className={`${
         className ?? ''
-      } px-4 py-2 font-bold text-xl lg:text-3xl bg-gradient-to-r from-indigo-700/30 to-50% rounded-xl`}>
+      } px-4 py-2 font-bold text-xl lg:text-2xl bg-gradient-to-r from-indigo-700/30 to-50% rounded-xl`}>
       {children}
     </h3>
   );

diff --git a/components/Icons.tsx b/components/Icons.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+}
+
+export function HomeIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
+      <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
+    </svg>
+  );
+}
+
+export function DownloadIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path
+        fillRule="evenodd"
+        d="M5.625 1.5H9a3.75 3.75 0 013.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 013.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 01-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875zm5.845 17.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V12a.75.75 0 00-1.5 0v4.19l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z"
+        clipRule="evenodd"
+      />
+      <path d="M14.25 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0016.5 7.5h-1.875a.375.375 0 01-.375-.375V5.25z" />
+    </svg>
+  );
+}
+
+export function IdCardIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path
+        fillRule="evenodd"
+        d="M4.5 3.75a3 3 0 00-3 3v10.5a3 3 0 003 3h15a3 3 0 003-3V6.75a3 3 0 00-3-3h-15zm4.125 3a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5zm-3.873 8.703a4.126 4.126 0 017.746 0 .75.75 0 01-.351.92 7.47 7.47 0 01-3.522.877 7.47 7.47 0 01-3.522-.877.75.75 0 01-.351-.92zM15 8.25a.75.75 0 000 1.5h3.75a.75.75 0 000-1.5H15zM14.25 12a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H15a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h3.75a.75.75 0 000-1.5H15z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+export function MoonIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path
+        fillRule="evenodd"
+        d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+export function SunIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+    </svg>
+  );
+}
+
+export function HeartIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
+    </svg>
+  );
+}
+
+export function SquaresIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-6 h-6`}>
+      <path
+        fillRule="evenodd"
+        d="M3 6a3 3 0 013-3h2.25a3 3 0 013 3v2.25a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm9.75 0a3 3 0 013-3H18a3 3 0 013 3v2.25a3 3 0 01-3 3h-2.25a3 3 0 01-3-3V6zM3 15.75a3 3 0 013-3h2.25a3 3 0 013 3V18a3 3 0 01-3 3H6a3 3 0 01-3-3v-2.25zm9.75 0a3 3 0 013-3H18a3 3 0 013 3V18a3 3 0 01-3 3h-2.25a3 3 0 01-3-3v-2.25z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+export function VariableIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path
+        fillRule="evenodd"
+        d="M19.253 2.292a.75.75 0 01.955.461A28.123 28.123 0 0121.75 12c0 3.266-.547 6.388-1.542 9.247a.75.75 0 11-1.416-.494c.94-2.7 1.458-5.654 1.458-8.753s-.519-6.054-1.458-8.754a.75.75 0 01.461-.954zm-14.227.013a.75.75 0 01.414.976A23.183 23.183 0 003.75 12c0 3.085.6 6.027 1.69 8.718a.75.75 0 01-1.39.563c-1.161-2.867-1.8-6-1.8-9.281 0-3.28.639-6.414 1.8-9.281a.75.75 0 01.976-.414zm4.275 5.052a1.5 1.5 0 012.21.803l.716 2.148L13.6 8.246a2.438 2.438 0 012.978-.892l.213.09a.75.75 0 11-.584 1.381l-.214-.09a.937.937 0 00-1.145.343l-2.021 3.033 1.084 3.255 1.445-.89a.75.75 0 11.786 1.278l-1.444.889a1.5 1.5 0 01-2.21-.803l-.716-2.148-1.374 2.062a2.437 2.437 0 01-2.978.892l-.213-.09a.75.75 0 01.584-1.381l.214.09a.938.938 0 001.145-.344l2.021-3.032-1.084-3.255-1.445.89a.75.75 0 11-.786-1.278l1.444-.89z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+export function BookmarkIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path
+        fillRule="evenodd"
+        d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12 18.089l-7.165 3.583A.75.75 0 013.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+export function TrophyIcon({className}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={`${className ?? ''} w-5 h-5`}>
+      <path
+        fillRule="evenodd"
+        d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 00-.584.859 6.753 6.753 0 006.138 5.6 6.73 6.73 0 002.743 1.346A6.707 6.707 0 019.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 00-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 00.75-.75 2.25 2.25 0 00-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 01-1.112-3.173 6.73 6.73 0 002.743-1.347 6.753 6.753 0 006.139-5.6.75.75 0 00-.585-.858 47.077 47.077 0 00-3.07-.543V2.62a.75.75 0 00-.658-.744 49.22 49.22 0 00-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 00-.657.744zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 013.16 5.337a45.6 45.6 0 012.006-.343v.256zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 01-2.863 3.207 6.72 6.72 0 00.857-3.294z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -4,30 +4,25 @@ import React, {useEffect, useState} from 'react';
 import Logo from './navbar/Logo';
 import MobileNav from './navbar/MobileNav';
 import DesktopNav from './navbar/DesktopNav';
-import {
-  HomeIcon,
-  BookOpenIcon,
-  VariableIcon,
-  UserIcon,
-} from '@heroicons/react/24/solid';
+import {HomeIcon, BookmarkIcon, TrophyIcon, IdCardIcon} from './Icons';
 import ThemeSwitch from './navbar/ThemeSwitch';
 
 export const navItems = {
-  Home: {
+  About: {
     path: '/',
     icon: <HomeIcon className="h-5 w-5" />,
   },
   Posts: {
     path: '/posts',
-    icon: <BookOpenIcon className="h-5 w-5" />,
+    icon: <BookmarkIcon className="h-5 w-5" />,
   },
   Cp: {
     path: '/competitive-programming',
-    icon: <VariableIcon className="h-5 w-5" />,
+    icon: <TrophyIcon className="h-5 w-5" />,
   },
   Resume: {
     path: '/resume',
-    icon: <UserIcon className="h-5 w-5" />,
+    icon: <IdCardIcon className="h-5 w-5" />,
   },
 };
 

diff --git a/components/navbar/MobileNav.tsx b/components/navbar/MobileNav.tsx
@@ -5,8 +5,9 @@ import {
   SpeedDialHandler,
   SpeedDialContent,
   SpeedDialAction,
-} from '@material-tailwind/react';
-import {PlusIcon} from '@heroicons/react/24/solid';
+  Typography,
+} from '@/app/provider';
+import {SquaresIcon} from '../Icons';
 import {navItems} from '../NavBar';
 import Link from 'next/link';
 
@@ -15,17 +16,22 @@ export default function MobileNav(): JSX.Element {
     <div className="sm:hidden">
       <SpeedDial placement="bottom">
         <SpeedDialHandler>
-          <IconButton className="h-8 w-8 rounded-full shadow-0 hover:shadow-0 bg-gray-800 border-gray-800">
-            <PlusIcon className="h-4 w-4 transition-transform group-hover:rotate-45" />
+          <IconButton className="h-8 w-8 rounded-full bg-transparent shadow-transparent hover:bg-blue-500/10 hover:shadow-transparent">
+            <SquaresIcon className="h-4 w-4 transition-transform group-hover:rotate-45 text-black dark:text-white" />
           </IconButton>
         </SpeedDialHandler>
         <SpeedDialContent>
           {Object.entries(navItems).map(([name, {path, icon}]) => {
             return (
               <SpeedDialAction
                 key={name}
-                className="h-6 w-6 bg-gray-800 border-gray-800">
-                <Link href={path}>{icon}</Link>
+                className="h-14 w-14 border-transparent bg-blue-200 dark:bg-[#121640] rounded-xl">
+                <Link
+                  href={path}
+                  className="flex flex-col items-center justify-items-center space-y-1">
+                  {icon}
+                  <Typography className="text-xs">{name}</Typography>
+                </Link>
               </SpeedDialAction>
             );
           })}

diff --git a/components/navbar/ThemeSwitch.tsx b/components/navbar/ThemeSwitch.tsx
@@ -2,7 +2,7 @@
 
 import React, {useEffect, useState} from 'react';
 import {useTheme} from 'next-themes';
-import {MoonIcon, SunIcon} from '@heroicons/react/24/outline';
+import {MoonIcon, SunIcon} from '../Icons';
 import {IconButton} from '@material-tailwind/react';
 
 export default function ThemeSwitch(): JSX.Element {