Added cringe things

components/nav.jsx

@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import NavStyle from "./nav.style";
 import Link from "next/link";
 import { useLanyard } from "react-use-lanyard";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import MenuIcon from "@mui/icons-material/Menu";
 
 const LINKS = [
   {
@@ -23,6 +27,16 @@ function Nav() {
     userId: "457039372009865226",
     socket: true,
   });
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <NavStyle>
       <Link href="/">
@@ -50,6 +64,33 @@ function Nav() {
           </div>
         ))}
       </div>
+      {/* Mobile Menu */}
+      <div className={"menu"}>
+        <IconButton
+          id="nav-menu-button"
+          aria-controls={open ? "nav-menu" : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? "true" : undefined}
+          onClick={handleClick}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Menu
+          id="nav-menu"
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          MenuListProps={{
+            "aria-labelledby": "nav-menu-button",
+          }}
+        >
+          {LINKS.map(({ title, href }, index) => (
+            <MenuItem onClick={handleClose}>
+              <Link href={href}>{title}</Link>
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
     </NavStyle>
   );
 }

components/nav.style.js

@@ -25,6 +25,17 @@ export default styled.nav`
       /* padding: 20px; */
       margin-left: 10px;
     }
+    @media (max-width: 900px) {
+      display: none;
+    }
+  }
+  .menu {
+    button {
+      color: white !important;
+    }
+    @media (min-width: 901px) {
+      display: none;
+    }
   }
   .indicator {
     .circle {

components/skills.jsx

@@ -1,29 +1,55 @@
 import React, { useEffect, useState } from "react";
 import Skill from "./skillCard";
 import SkillsStyle from "./skills.style";
-import axios from "axios";
+import axios from "handlers/axios";
+import { APISDK } from "handlers/sdk";
 
 function Skills() {
   const [skills, setSkills] = useState({});
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
-    axios.get("").then((res) => {
-      setSkills(res.data);
-    });
-  }, []);
+    // axios
+    //   .get("/portfolio/api")
+    //   .then((res) => {
+    //     setSkills(res.data);
+    //     console.log(res.data);
+    //     setLoading(false);
+    //   })
+    //   .catch((err) => {
+    //     console.log(err);
+    //   });
+
+    const interval = setInterval(() => {
+      let [valid, skill] = APISDK.req();
+      if (valid) {
+        setSkills(skill);
+        setLoading(false);
+        console.log(skill);
+      } else {
+        console.error(skill);
+        setLoading(true);
+      }
+    }, 5000);
+  }, [loading, APISDK]);
   return (
-    <SkillsStyle>
-      <div className="skills">
-        <Skill
-          title={skills.login}
-          description={skills.bio}
-          image={skills.avatar_url}
-        />
-        <Skill />
-        <Skill />
-        <Skill />
-        <Skill />
-      </div>
-    </SkillsStyle>
+    <>
+      {!loading && (
+        <SkillsStyle>
+          <div className="skills">
+            <Skill
+              title={skills.login}
+              description={skills.bio}
+              image={skills.avatar_url}
+            />
+            <Skill />
+            <Skill />
+            <Skill />
+            <Skill />
+          </div>
+        </SkillsStyle>
+      )}
+    </>
   );
 }
 

handlers/axios.js

@@ -1 +1,5 @@
 import axios from "axios";
+
+export default axios.create({
+  baseURL: "https://api.b68dev.xyz",
+});

handlers/requester.js

@@ -0,0 +1,18 @@
+import axios from "./axios";
+
+export const tempEndpoint = (endpoint) => {
+  let response = [false, { error: "Error" }];
+  var reqPromise = axios
+    .get(endpoint)
+    .then((res) => {
+      console.log(res.data);
+      response = [true, res.data];
+    })
+    .catch((err) => {
+      console.log(err);
+      response = [false, err];
+    });
+  Promise.all(reqPromise).then(() => {
+    return response;
+  });
+};

handlers/sdk.js

@@ -0,0 +1,18 @@
+import { tempEndpoint } from "./requester";
+// gh_user,
+// discord_activity,
+// osu_recent,
+// osu_user,
+// osu_bestScores,
+// spotify_top_songs,
+// wakatime_user,
+// wakatime_stats,
+// hn_user,
+// twitter_user,
+// twitter_tweets,
+
+export const APISDK = {
+  req() {
+    return tempEndpoint("/me/github/userdata");
+  },
+};