fix: build fixes

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["next/core-web-vitals"]
 }

components/main.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import MainStyle from "./main.style";
 import IconButton from "@mui/material/IconButton";
 // import Button from "@mui/material/Button";
@@ -24,18 +24,20 @@ import {
 import DiscordActivity from "./discord-activity";
 
 function Main() {
-  const animePic = document.getElementById('anime-pic');
-  const profPic = document.getElementById('prof-pic');
+  useEffect(() => {
+    const animePic = document.getElementById('anime-pic');
+    const profPic = document.getElementById('prof-pic');
 
-  animePic.addEventListener('mouseover', function() {
-    animePic.style.display = 'none';
-    profPic.style.display = 'block';
-  });
-
-  profPic.addEventListener('mouseout', function() {
-    animePic.style.display = 'block';
-    profPic.style.display = 'none';
-  });
+    animePic.addEventListener('mouseover', function() {
+      animePic.style.display = 'none';
+      profPic.style.display = 'block';
+    });
+  
+    profPic.addEventListener('mouseout', function() {
+      animePic.style.display = 'block';
+      profPic.style.display = 'none';
+    });
+  },[])
 
   return (
     <MainStyle>

components/skillComponents/github_events.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import SkillCard from "../skillCard";
 
-export default function ({ title, image, evt1, evt2, evt3, url }) {
+function GitCommits({ title, image, evt1, evt2, evt3, url }) {
   let ghLogo = "/images/github_events/GitIcon.png";
 
   [evt1, evt2, evt3].map((evt) => {
@@ -85,3 +85,5 @@ export default function ({ title, image, evt1, evt2, evt3, url }) {
     </SkillCard>
   );
 }
+
+export default GitCommits

components/skillComponents/github_trophy.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import SkillCard from "../skillCard";
 
-export default function ({ title, image, bannerImage, url }) {
+function GithubTrophySkillCard ({ title, image, bannerImage, url }) {
   return (
     <SkillCard title={title} image={image} url={url}>
       <br />
@@ -11,3 +11,5 @@ export default function ({ title, image, bannerImage, url }) {
     </SkillCard>
   );
 }
+
+export default GithubTrophySkillCard;

components/tootCard.js

@@ -29,7 +29,7 @@ function SkillCard({ content, created_at, url, image }) {
                     <img src={image} height="30" />
                   </div>
                 )}
-                <div className="content">"{texts.join("\n")}"</div>
+                <div className="content">&quot;{texts.join("\n")}&quot;</div>
                 <div className="type">
                   # {format(created_at, "DD MMM YYYY")}
                 </div>

components/toots.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { ArtStyle } from "./toots.style";
+import { ArtStyle, ArtTitleStyle } from "./toots.style";
 import SkillCard from "./tootCard";
 import { APISDK } from "handlers/sdk";
 import SkillsStyle from "./skills.style";
 import Box from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
 
-export default function () {
+function Toots () {
   const [skills, setSkills] = useState({});
   const [loading, setLoading] = useState(true);
 
@@ -15,7 +15,7 @@ export default function () {
     APISDK.data.logo = {
       masto: `https://cdn.fosstodon.org/accounts/avatars/000/028/400/original/324cba4cb379bd4e.png`,
     };
-    setSkills(APISDK.data);
+    setSkills(APISDK.data.masto_status);
     setLoading(false);
   }
 
@@ -34,13 +34,19 @@ export default function () {
       </SkillsStyle>
     );
   } else {
+
+    console.log(skills.data);
     return (
       <>
+          <ArtTitleStyle>
+          <div className="title-bar">
+            Fosstodon Status
+          </div>
+          </ArtTitleStyle>
         <div className="mainboard__container">
-          Fosstodon Status
           {skills && (
             <ArtStyle>
-              {skills?.masto_status?.data?.map((project, index) => {
+              {skills?.data?.map((project, index) => {
                 project.image = image;
                 return (
                   <>
@@ -55,3 +61,5 @@ export default function () {
     );
   }
 }
+
+export default Toots;

components/toots.style.jsx

@@ -14,3 +14,12 @@ export const ArtStyle = styled.div`
   background-repeat: no-repeat;
   background-attachment: fixed;
 `;
+
+export const ArtTitleStyle = styled.div`
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #fff;
+  text-align: center;
+  margin-bottom: 18px;
+  padding-top: 90px;
+`

handlers/sdk.js

@@ -61,10 +61,10 @@ export const APISDK = {
           endpoint: "/me/vscode/",
           name: "vscode",
         },
-        // {
-        //   endpoint: "/me/mastodon/statuses",
-        //   name: "masto_status",
-        // },
+        {
+          endpoint: "/me/mastodon/statuses",
+          name: "masto_status",
+        },
       ],
       this.data
     );

pages/_document.js

@@ -53,7 +53,6 @@ export default class MyDocument extends Document {
             rel="stylesheet"
           />
         </Head>
-        <Nav />
         <body>
           <Main />
           <NextScript />