Added new UI for Home and Bug Fixes and Discord Intg

.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+/public/core
+/public/ui

components/discord-activity.jsx

@@ -105,59 +105,102 @@ export default function DiscordActivity() {
         </DicordActivityStyle>
       );
     } else {
-      return (
-        <DicordActivityStyle>
-          {!loading && (
-            <>
-              <div className="discord-icons">
-                <div className="discord-large-icon">
-                  {status.activities[1] && (
-                    <img
-                      src={
-                        baseURL +
-                        status.activities[1].application_id +
-                        "/" +
-                        status.activities[1].assets.large_image +
-                        ".png"
-                      }
-                    />
-                  )}
+      console.log("Hmmm Recv");
+      if (status.activities[1].name === "Spotify") {
+        return (
+          <DicordActivityStyle>
+            {!loading && (
+              <>
+                <div className="discord-icons">
+                  <div className="discord-large-icon">
+                    {<img src={status.spotify.album_art_url} />}
+                  </div>
+                  <div className="discord-small-icon">
+                    {
+                      <img
+                        src={
+                          "https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png"
+                        }
+                      />
+                    }
+                  </div>
                 </div>
-                <div className="discord-small-icon">
-                  {status.activities[1] && (
-                    <img
-                      src={
-                        baseURL +
-                        status.activities[1].application_id +
-                        "/" +
-                        status.activities[1].assets.small_image +
-                        ".png"
-                      }
-                    />
-                  )}
+                <div className="discord-messageBox">
+                  <div className="discord-message-application">
+                    <b>{status.activities[1] && status.activities[1].name}</b>
+                  </div>
+                  <div className="discord-message-activity">
+                    {status.activities[1] && status.activities[1].details}
+                  </div>
+                  <div className="discord-message-files">
+                    {status.activities[1] && status.activities[1].state
+                      ? status.activities[1].state
+                      : null}
+                  </div>
+                  <br />
+                  <div className="time-elapsed">
+                    {status?.activities[1]?.timestamps?.start && time}
+                  </div>
                 </div>
-              </div>
-              <div className="discord-messageBox">
-                <div className="discord-message-application">
-                  <b>{status.activities[1] && status.activities[1].name}</b>
+              </>
+            )}
+          </DicordActivityStyle>
+        );
+      } else {
+        return (
+          <DicordActivityStyle>
+            {!loading && (
+              <>
+                <div className="discord-icons">
+                  <div className="discord-large-icon">
+                    {status.activities[1] && (
+                      <img
+                        src={
+                          baseURL +
+                          status.activities[1].application_id +
+                          "/" +
+                          status.activities[1].assets.large_image +
+                          ".png"
+                        }
+                      />
+                    )}
+                  </div>
+                  <div className="discord-small-icon">
+                    {status.activities[1] && (
+                      <img
+                        src={
+                          baseURL +
+                          status.activities[1].application_id +
+                          "/" +
+                          status.activities[1].assets.small_image +
+                          ".png"
+                        }
+                      />
+                    )}
+                  </div>
                 </div>
-                <div className="discord-message-activity">
-                  {status.activities[1] && status.activities[1].details}
+                <div className="discord-messageBox">
+                  <div className="discord-message-application">
+                    <b>{status.activities[1] && status.activities[1].name}</b>
+                  </div>
+                  <div className="discord-message-activity">
+                    {status.activities[1] && status.activities[1].details}
+                  </div>
+                  <div className="discord-message-files">
+                    {status.activities[1] && status.activities[1].state
+                      ? status.activities[1].state
+                      : null}
+                  </div>
+                  <br />
+                  <div className="time-elapsed">
+                    {status?.activities[1]?.timestamps?.start && time}
+                  </div>
                 </div>
-                <div className="discord-message-files">
-                  {status.activities[1] && status.activities[1].state
-                    ? status.activities[1].state
-                    : null}
-                </div>
-                <br />
-                <div className="time-elapsed">
-                  {status?.activities[1]?.timestamps?.start && time}
-                </div>
-              </div>
-            </>
-          )}
-        </DicordActivityStyle>
-      );
+              </>
+            )}
+          </DicordActivityStyle>
+        );
+      }
     }
   } else if (
     !loading &&

components/discord-activity.style.jsx

@@ -7,9 +7,15 @@ export const DicordActivityStyle = styled.div`
   justify-content: start;
   width: 400px;
   min-height: 75px;
-  background-color: #7289da;
+  background: rgb(131, 58, 180);
+  background: linear-gradient(
+    90deg,
+    rgba(131, 58, 180, 1) 0%,
+    rgba(253, 29, 29, 1) 50%,
+    rgba(252, 176, 69, 1) 100%
+  );
   border-radius: 6px;
-  padding: 1em 0.8em;
+  padding: 0.3em 0.8em;
 
   .discord-icons {
     display: flex;
@@ -52,4 +58,10 @@ export const DicordActivityStyle = styled.div`
     margin-left: 1em;
     font-size: 0.9em;
   }
+  .discord-message-application {
+    font-size: 1.3em;
+  }
+  .discord-message-activity {
+    font-size: 1.1em;
+  }
 `;

components/main.jsx

@@ -31,6 +31,7 @@ function Main() {
         <div>
           <DiscordActivity />
         </div>
+        <br />
         <div className="social-buttons">
           <a href={github_url}>
             <IconButton>
@@ -58,7 +59,7 @@ function Main() {
             </IconButton>
           </a>
         </div>
-        <div className="buttons">
+        {/* <div className="buttons">
           <a href={resume_url}>
             <Button variant="contained " size="large">
               Resume
@@ -69,7 +70,7 @@ function Main() {
               Email Me
             </Button>
           </a>
-        </div>
+        </div> */}
       </div>
     </MainStyle>
   );

components/main.style.jsx

@@ -1,11 +1,20 @@
 import styled from "styled-components";
 
 export default styled.main`
+  padding-top: 15px;
   display: flex;
   height: 100vh;
   width: 100%;
   justify-content: center;
   align-items: center;
+  background-image: url("/images/background.jpg");
+  background-size: cover;
+  background-position: center;
+
+  .backimage {
+    filter: blur(8px);
+    -webkit-filter: blur(8px);
+  }
   .content {
     display: flex;
     flex-direction: column;
@@ -29,7 +38,7 @@ export default styled.main`
     }
   }
   .profile {
-    heigth: 250px;
+    height: 250px;
     width: 250px;
     img {
       max-height: 100%;
@@ -41,4 +50,13 @@ export default styled.main`
     font-size: 1.5rem;
     font-weight: 600;
   }
+  .social-buttons {
+    background: rgb(64, 63, 79);
+    background: linear-gradient(
+      90deg,
+      rgba(64, 63, 79, 1) 0%,
+      rgba(92, 84, 90, 1) 43%
+    );
+    border-radius: 12px;
+  }
 `;

components/nav.jsx

@@ -1,23 +1,51 @@
 import React from "react";
 import NavStyle from "./nav.style";
 import Link from "next/link";
+import { useLanyard } from "react-use-lanyard";
 const LINKS = [
   {
     title: "Skills",
     href: "/skills",
   },
+  {
+    title: "Resume",
+    href: "/resume",
+  },
+  {
+    title: "Mail Me",
+    href: "mailto:me@bravo68web.me",
+  },
 ];
 
 function Nav() {
+  const { loading, status /*, websocket */ } = useLanyard({
+    userId: "457039372009865226",
+    socket: true,
+  });
   return (
     <NavStyle>
-      <Link href="/" className="title">
-        <h1>echo &quot;Bravo&quot;</h1>
+      <Link href="/">
+        <div className="title">
+          <h1>echo &quot;Bravo&quot;</h1>
+          <div className="indicator">
+            <div
+              className={`circle ${
+                !loading &&
+                (status?.discord_status === "online" ||
+                  status?.discord_status === "idle" ||
+                  status?.discord_status === "dnd")
+                  ? "green"
+                  : "red"
+              }`}
+            ></div>
+          </div>
+        </div>
       </Link>
+
       <div className="links">
         {LINKS.map(({ title, href }, index) => (
           <div key={index} className="link">
-            <Link href={href}>{title}</Link>
+            <Link href={href}>{title}</Link> |
           </div>
         ))}
       </div>

components/nav.style.js

@@ -8,6 +8,35 @@ export default styled.nav`
   left: 0;
   width: 100vw;
   display: flex;
+  font-size: 1.5em;
   align-items: center;
   justify-content: space-between;
+  .title {
+    display: flex;
+  }
+  .links {
+    display: flex;
+    .link {
+      /* padding: 20px; */
+      margin-left: 10px;
+    }
+  }
+  .indicator {
+    .circle {
+      height: 10px;
+      width: 10px;
+      border-radius: 100%;
+
+      margin-top: 8px;
+      margin-left: 5px;
+      /* margin-right: auto;
+      flex: start; */
+    }
+    .green {
+      background-color: green;
+    }
+    .red {
+      background-color: red;
+    }
+  }
 `;

components/resume.jsx

@@ -1,22 +1,28 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { ResumeStyle } from "./resume.style";
-import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 
 function Resume() {
-  const [resume, setResume] = useState({});
+  const viewer = useRef(null);
+
   useEffect(() => {
-    // axios.get("").then((res) => {
-    //   setResume(res.data);
-    // });
+    import("@pdftron/webviewer").then(() => {
+      WebViewer(
+        {
+          path: ".",
+          mobileRedirect: true,
+          initialDoc:
+            "https://raw.githubusercontent.com/BRAVO68WEB/certificates/master/Jyotirmoy's%20Resume.pdf",
+        },
+        viewer.current
+      ).then((instance) => {
+        const { docViewer } = instance;
+        // you can now call WebViewer APIs here...
+      });
+    });
   }, []);
-  //   console.log(Document);
   return (
     <ResumeStyle>
-      <div className="resume">
-        <Document file="https://raw.githubusercontent.com/BRAVO68WEB/certificates/master/Jyotirmoy's%20Resume.pdf">
-          <Page pageNumber={0} />
-        </Document>
-      </div>
+      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
     </ResumeStyle>
   );
 }

components/resume.style.jsx

@@ -1,3 +1,5 @@
 import styled from "styled-components";
 
-export const ResumeStyle = styled.div``;
+export const ResumeStyle = styled.div`
+  padding: 10%;
+`;

package.json

@@ -5,7 +5,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "node tools/copy-webviewer-files.js"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",

pages/art.js

@@ -0,0 +1,41 @@
+import Head from "next/head";
+import Nav from "components/nav";
+import { useEffect, useRef } from "react";
+import Resume from "components/Art";
+import Footer from "components/footer";
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>
+          Jyotirmoy Bandyopadhayaya | Full Stack and DevOps Platform Developer
+        </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 />
+      <Art />
+      <Footer />
+    </div>
+  );
+}

pages/contact.js

@@ -0,0 +1,41 @@
+import Head from "next/head";
+import Nav from "components/nav";
+import { useEffect, useRef } from "react";
+import Resume from "components/contact";
+import Footer from "components/footer";
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>
+          Jyotirmoy Bandyopadhayaya | Full Stack and DevOps Platform Developer
+        </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 />
+      <Contact />
+      <Footer />
+    </div>
+  );
+}

pages/index.js

@@ -35,7 +35,7 @@ export default function Home() {
       <Nav />
       <Main />
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/resume.js

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import Nav from "components/nav";
+import { useEffect, useRef } from "react";
 import Resume from "components/resume";
 import Footer from "components/footer";
 

styles/globals.css

@@ -1,27 +1,28 @@
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500;600;700;800;900&display=swap");
 
-:root{
-  --color1:#11052C;
-  --color2:#3D087B;
-  --color3:#F43B86;
-  --color4:#FFE459;
-  --font:'Source Code Pro', monospace;
+:root {
+  --color1: #11052c;
+  --color2: #3d087b;
+  --color3: #f43b86;
+  --color4: #ffe459;
+  --font: "Source Code Pro", monospace;
 }
-*{
-  margin:0;
-  padding:0;  
+* {
+  margin: 0;
+  padding: 0;
 }
 html,
 body {
+  overflow-x: hidden;
   background: var(--color2);
   padding: 0;
   margin: 0;
-  font-family: var(--font), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  height:100vh;
-  width:100vw;
+  font-family: var(--font), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  height: 100vh;
+  width: 100vw;
   /* color:var(--color3)   */
-  color:#fff;
+  color: #fff;
 }
 a {
   color: inherit;

tools/copy-webviewer-files.js

@@ -0,0 +1,15 @@
+const fs = require("fs-extra");
+
+const copyFiles = async () => {
+  try {
+    await fs.copy(
+      "./node_modules/@pdftron/webviewer/public",
+      "./public/webviewer/lib"
+    );
+    console.log("WebViewer files copied over successfully");
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+copyFiles();