Fixed anded some cringe stuff

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
+}

components/about.jsx

@@ -0,0 +1,29 @@
+import { name, LanguagesKnown, description1, description2 } from "config";
+import { AboutStyle } from "./about.style";
+
+function about() {
+  // console.log(LanguagesKnown);
+  return (
+    <AboutStyle>
+      <div className="default">
+        <div className="content">
+          <p>{description1}</p>
+        </div>
+        <div className="lang-map">
+          {LanguagesKnown.map((lang) => {
+            return (
+              <div className="lang-map-element" key={lang}>
+                {lang}
+              </div>
+            );
+          })}
+        </div>
+        <div className="content-2">
+          <p>{description2}</p>
+        </div>
+      </div>
+    </AboutStyle>
+  );
+}
+
+export default about;

components/about.style.jsx

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+export const AboutStyle = styled.div`
+  background-color: var(--color1);
+  .default {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    padding-top: 8em;
+    padding-bottom: 8em;
+    /* overflow-y: auto; */
+  }
+  .content {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    margin-left: 1.3em;
+    margin-right: 1.3em;
+    font-weight: bold;
+    font-size: 1.3em;
+    color: var(--color3);
+  }
+  .content-2 {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    margin-left: 1.3em;
+    margin-right: 1.3em;
+    font-weight: bold;
+    font-size: 1.3em;
+    color: var(--color4);
+  }
+  .lang-map {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-left: 1.7em;
+    margin-right: 1.7em;
+    align-items: center;
+  }
+  .lang-map-element {
+    padding: 5px;
+    border-radius: 20px;
+    margin: 2px;
+    /* background-color: #${Math.random().toString(16).substring(2, 6)}; */
+    background-color: #eeb90ac2;
+    font-weight: bold;
+    font-size: 1.1em;
+    color: #f5f5f5;
+    flex: 0 1 20%;
+  }
+`;

components/artCard.js

@@ -2,7 +2,7 @@ import React from "react";
 import ArtCardStyle from "./artCard.style";
 import ArtModel from "./artModal";
 
-function SkillCard({ name, description, image, onClick }) {
+function SkillCard({ name, description, image, type, onClick }) {
   const [open, setOpen] = React.useState(false);
   const handleClose = () => {
     setOpen(false);
@@ -24,6 +24,7 @@ function SkillCard({ name, description, image, onClick }) {
                 <b>{name}</b>
               </div>
               <div className="content">{description}</div>
+              <div className="type">#{type}</div>
             </div>
           </ArtCardStyle>
           <ArtModel open={open} onClose={handleClose}>

components/artCard.style.jsx

@@ -8,7 +8,9 @@ export default styled.div`
   background-color: #8609d4;
   border-radius: 5px;
   margin: 5px;
-
+  .type {
+    color: var(--color1);
+  }
   .card-logo {
     display: flex;
     /* width: 100%; */

components/nav.jsx

@@ -23,7 +23,7 @@ const LINKS = [
   },
   {
     title: "Art / Projects",
-    href: "/art",
+    href: "/projects",
   },
   {
     title: "Blog",

components/providers/cursor.js

@@ -0,0 +1,98 @@
+import { darkScrollbar } from "@mui/material";
+import { useRef, useEffect } from "react";
+
+const Cursor = () => {
+  const delay = 18;
+  const dot = useRef(null);
+  const dotOutline = useRef(null);
+  const cursorVisaible = useRef(true);
+  const cursorEnlarge = useRef(false);
+
+  const endX = useRef(window.innerWidth / 2);
+  const endY = useRef(window.innerHeight / 2);
+  const _x = useRef(0);
+  const _y = useRef(0);
+
+  const requestRef = useRef(null);
+  useEffect(() => {
+    document.addEventListener("mousedown", mouseOverEvent);
+    document.addEventListener("mouseup", mouseOutEvent);
+    document.addEventListener("mousemove", mouseMoveEvent);
+    document.addEventListener("mouseenter", mouseEnterEvent);
+    document.addEventListener("mouseleave", mouseLeaveEvent);
+    console.log("Cursor Mounted");
+    animateDotOutline();
+
+    return () => {
+      document.removeEventListener("mousedown", mouseOverEvent);
+      document.removeEventListener("mouseup", mouseOutEvent);
+      document.removeEventListener("mousemove", mouseMoveEvent);
+      document.removeEventListener("mouseenter", mouseEnterEvent);
+      document.removeEventListener("mouseleave", mouseLeaveEvent);
+      cancelAnimationFrame(requestRef.current);
+      console.log("Cursor Unmounted");
+    };
+  });
+  const toggleCursorVisaible = () => {
+    if (cursorVisaible.current) {
+      dot.current.style.opacity = 1;
+      dotOutline.current.style.opacity = 1;
+    } else {
+      dot.current.style.opacity = 0;
+      dotOutline.current.style.opacity = 0;
+    }
+  };
+  const toggleCursorSize = () => {
+    if (cursorEnlarge.current) {
+      dot.current.style.transform = "transform(-50%, -50%) scale(0.75)";
+      dotOutline.current.style.transform = "transform(-50%, -50%) scale(1.50)";
+    } else {
+      dot.current.style.transform = "transform(-50%, -50%) scale(1)";
+      dotOutline.current.style.transform = "transform(-50%, -50%) scale(1)";
+    }
+  };
+
+  const mouseOverEvent = () => {
+    cursorVisaible.current = true;
+    toggleCursorSize();
+  };
+
+  const mouseOutEvent = () => {
+    cursorVisaible.current = false;
+    toggleCursorSize();
+  };
+
+  const mouseEnterEvent = (e) => {
+    cursorVisaible.current = true;
+    toggleCursorVisaible();
+  };
+
+  const mouseLeaveEvent = () => {
+    cursorVisaible.current = false;
+    toggleCursorVisaible();
+  };
+  const mouseMoveEvent = (e) => {
+    cursorVisaible.current = true;
+    toggleCursorVisaible();
+    endX.current = e.pageX;
+    endY.current = e.pageY;
+
+    dot.current.style.top = endY.current + "px";
+    dot.current.style.left = endX.current + "px";
+  };
+  const animateDotOutline = () => {
+    _x.current += (endX.current - _x.current) / delay;
+    _y.current += (endY.current - _y.current) / delay;
+
+    dotOutline.current.style.top = _y.current + "px";
+    dotOutline.current.style.left = _x.current + "px";
+  };
+  return (
+    <>
+      <div ref={dotOutline} className="cursor-dot-outline"></div>
+      <div ref={dot} className="cursor-dot"></div>
+    </>
+  );
+};
+
+export default Cursor;

components/skills.jsx

@@ -6,6 +6,7 @@ import { APISDK } from "handlers/sdk";
 import Box from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
 // import "mainboard.css";
+import Cursor, { mouseOverEvent, mouseOutEvent } from "./providers/cursor";
 
 // Skill Card templates
 import GitHubSkillCard from "./skillComponents/github_user";
@@ -65,6 +66,7 @@ function Skills() {
 
     return (
       <div>
+        <Cursor />
         {!loading && (
           <SkillsStyle>
             <div className="mainboard__container">
@@ -77,6 +79,8 @@ function Skills() {
                 following={skills?.gh_user?.data?.following}
                 public_gists={skills?.gh_user?.data?.public_gists}
                 created_at={skills?.gh_user?.data?.created_at}
+                mouseOverEvent={mouseOverEvent}
+                mouseOutEvent={mouseOutEvent}
               />
               <OsuUserSkillCard
                 title={"Osu! Player Stats"}

config.js

@@ -11,9 +11,32 @@ export const resume_url = "";
 export const facebook_url = "https://www.facebook.com/Bravo68Web/";
 export const discord_id = "457039372009865226";
 export const discord_profile = "";
+export const description1 =
+  "I am Jyotirmoy Bandyopadhayaya, AKA Bravo68web, 19, a student developer from India with passion in API and microservices development. I have expertice in DevOps and Full Stack development. I am a self taught developer and I am always looking for new challenges to learn and grow.";
+export const description2 =
+  "I love Cats 😻 and I love to code and I love to play FPS shooting games.";
+export const LanguagesKnown = [
+  "NodeJS",
+  "Python",
+  "TypeScript",
+  "C++",
+  "C",
+  "SQL",
+  "Rust",
+  "Go",
+  "Bash",
+  "Java",
+  "Docker",
+  "AWS",
+  "GCP",
+  "Cloud Computing",
+  "Git",
+  "Linux",
+];
 export const projects = [
   {
     name: "URL Minify",
+    type: "project",
     description:
       "Open Source | URL Minify is a simple URL shortener service that allows you to shorten any URL and redirect to the original URL.",
     image:
@@ -21,27 +44,32 @@ export const projects = [
   },
   {
     name: "API",
+    type: "project",
     description:
       "Bravo68web API solely devloped by me to provide a data on and needed by me on daily basis.",
     image: "https://api.b68dev.xyz/logo",
   },
   {
     name: "Karyl #1",
+    type: "art",
     description: "Drawn Princess Connect : Re-Dive charecter #1",
     image: "/images/art/karyl-2-final-3b.png",
   },
   {
     name: "Karyl #2",
+    type: "art",
     description: "Drawn Princess Connect : Re-Dive charecter #2",
     image: "/images/art/karyl-2-final.png",
   },
   {
     name: "Ayaka",
+    type: "art",
     description: "Drawing of Ayaka from the Genshin Impact game",
     image: "/images/art/H12M27S20.smoothed_careful.png",
   },
   {
     name: "Kirby",
+    type: "art",
     description: "A Student, Full Stack and DevOps Platform Developer",
     image: "/images/art/Final_best.png",
   },

package.json

@@ -27,16 +27,21 @@
     "@mui/material": "^5.3.0",
     "@pdftron/webviewer": "^8.3.3",
     "axios": "^0.26.1",
+    "core-js": "^3.21.1",
+    "cursor-react": "^1.0.3",
     "date-format-parse": "^0.2.7",
     "fs-extra": "^10.0.1",
     "next": "^12.1.4",
+    "next-connect": "^0.12.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use-lanyard": "^0.1.1",
+    "sitemap": "^7.1.1",
     "styled-components": "^5.3.3",
     "use-last-fm": "https://github.com/BRAVO68WEB/use-last-fm"
   },
   "devDependencies": {
+    "babel-plugin-styled-components": "^2.0.7",
     "eslint": "^7.32.0",
     "eslint-config-next": "12.0.4"
   }

pages/about.js

@@ -0,0 +1,42 @@
+import Head from "next/head";
+import Nav from "components/nav";
+import About from "components/about";
+import Footer from "components/footer";
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>
+          About | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
+          DevOps Engineer
+        </title>
+        <meta
+          name="description"
+          content="Jyotirmoy Bandyopadhayaya's Website | A Student, Full Stack and DevOps Platform Developer | Jyotirmoy Bandyopadhayaya's Tech Stack"
+        />
+        <meta
+          name="keywords"
+          content="bravo, bravo68web, Jyotirmoy, Bandyopadhayaya, dev, web, Full Stack Developer, DevOps, gcp, linux, server, api, rest, lpu"
+        />
+        <meta name="language" content="EN" />
+        <meta name="author" content="Jyotirmoy Bandyopadhayaya | Bravo68web" />
+        <meta
+          name="publisher"
+          content="Jyotirmoy Bandyopadhayaya | Bravo68web"
+        />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <Nav />
+      <About />
+
+      {/* <Footer /> */}
+    </div>
+  );
+}

pages/api/sitemap.js

@@ -0,0 +1,26 @@
+import nc from "next-connect";
+const handler = nc();
+export default handler.get(async (req, res) => {
+  // Get the all Blog posts
+
+  const { createWriteStream } = require("fs");
+  const { SitemapStream } = require("sitemap");
+  const sitemap = new SitemapStream({
+    hostname: "https://itsmebravo.dev",
+  });
+  const writeStream = createWriteStream("./public/sitemap.xml");
+
+  sitemap.pipe(writeStream);
+
+  // Writing static pages to sitemap
+  sitemap.write({ url: "/", changefreq: "daily", priority: 1 });
+  sitemap.write({ url: "/art/", changefreq: "daily", priority: 0.8 });
+  sitemap.write({ url: "/stats/", changefreq: "daily", priority: 0.8 });
+  sitemap.write({ url: "/contact/", changefreq: "daily", priority: 0.8 });
+  sitemap.write({ url: "/resume/", changefreq: "daily", priority: 0.8 });
+
+  sitemap.end();
+
+  // Send a message after process done
+  res.status(200).json({ message: "Done" });
+});

pages/contact.js

@@ -1,6 +1,5 @@
 import Head from "next/head";
 import Nav from "components/nav";
-import { useEffect, useRef } from "react";
 import Contact from "components/contact";
 import Footer from "components/footer";
 
@@ -9,7 +8,8 @@ export default function Home() {
     <div>
       <Head>
         <title>
-          Jyotirmoy Bandyopadhayaya | Full Stack and DevOps Platform Developer
+          Contact | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
+          DevOps Engineer
         </title>
         <meta
           name="description"

pages/index.js

@@ -8,7 +8,8 @@ export default function Home() {
     <div>
       <Head>
         <title>
-          Jyotirmoy Bandyopadhayaya | Full Stack and DevOps Platform Developer
+          Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and DevOps
+          Engineer
         </title>
         <meta
           name="description"

pages/projects.js

@@ -7,7 +7,8 @@ export default function Home() {
     <div>
       <Head>
         <title>
-          Jyotirmoy Bandyopadhayaya | Full Stack and DevOps Platform Developer
+          Projects | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
+          DevOps Engineer
         </title>
         <meta
           name="description"

pages/resume.js

@@ -9,7 +9,8 @@ export default function Home() {
     <div>
       <Head>
         <title>
-          Jyotirmoy Bandyopadhayaya | Full Stack and DevOps Platform Developer
+          Resume | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
+          DevOps Engineer
         </title>
         <meta
           name="description"

pages/stats.js

@@ -8,7 +8,8 @@ export default function Home() {
     <div>
       <Head>
         <title>
-          Jyotirmoy Bandyopadhayaya | Full Stack and DevOps Platform Developer
+          Skills | Jyotirmoy Bandyopadhayaya | Full Stack Web Developer and
+          DevOps Engineer
         </title>
         <meta
           name="description"
@@ -24,7 +25,7 @@ export default function Home() {
           name="publisher"
           content="Jyotirmoy Bandyopadhayaya | Bravo68web"
         />
-        <link rel="icon" href="/favicon.png" />
+        <link rel="icon" href="/favicon.ico" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link

public/sitemap.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://itsmebravo.dev/</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://itsmebravo.dev/art/</loc><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://itsmebravo.dev/stats/</loc><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://itsmebravo.dev/contact/</loc><changefreq>daily</changefreq><priority>0.8</priority></url><url><loc>https://itsmebravo.dev/resume/</loc><changefreq>daily</changefreq><priority>0.8</priority></url></urlset>

styles/globals.css

@@ -13,6 +13,10 @@
   --color9: #f5a80f;
   --color10: #0ffaac;
   --font: "Source Code Pro", monospace;
+  --color-cursor: 220, 90, 90;
+  --cursor-outline-shade: 0.3;
+  --cursor-size: 10px;
+  --cursor-outline-size: 12px;
 }
 * {
   margin: 0;
@@ -39,3 +43,15 @@ a {
 * {
   box-sizing: border-box;
 }
+
+#cursor-dot {
+  width: var(--cursor-size);
+  height: var(--cursor-size);
+  background-color: rgba(var(--color-cursor), 1);
+}
+
+#cursor-dot-outline {
+  width: var(--cursor-outline-size);
+  height: var(--cursor-outline-size);
+  background-color: rgba(var(--color-cursor), var(--cursor-outline-shade));
+}