Fixed Art and Skills Integration

.gitignore

@@ -33,5 +33,3 @@ yarn-error.log*
 # vercel
 .vercel
 /public/webviewer
-
-.vercel

components/art.js

@@ -1,9 +1,15 @@
 import React from "react";
-import { name } from "config";
 import { ArtStyle } from "./art.style";
-
+import { projects } from "config";
+import SkillCard from "./artCard";
 function Art() {
-  return <ArtStyle>Art will be here</ArtStyle>;
+  return (
+    <ArtStyle>
+      {projects.map((project, index) => {
+        return <SkillCard key={index} {...project} />;
+      })}
+    </ArtStyle>
+  );
 }
 
 export default Art;

components/art.style.jsx

@@ -1,3 +1,11 @@
 import styled from "styled-components";
 
-export const ArtStyle = styled.div``;
+export const ArtStyle = styled.div`
+  padding: 10% 5%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  overflow-y: auto;
+`;

components/artCard.js

@@ -1,18 +1,19 @@
 import React from "react";
 import ArtCardStyle from "./artCard.style";
 
-function SkillCard({ title, description, image }) {
+function SkillCard({ name, description, image }) {
   return (
     <ArtCardStyle>
       <div className="card">
         {image && (
           <div className="card-logo">
-            <img src={image} height="30" />
+            <img src={image} height="140px" />
           </div>
         )}
-        <div className="date">{title}</div>
+        <div className="date">
+          <b>{name}</b>
+        </div>
         <div className="content">{description}</div>
-        <footer className="footer"></footer>
       </div>
     </ArtCardStyle>
   );

components/artCard.style.jsx

@@ -1,20 +1,15 @@
 import styled from "styled-components";
 
 export default styled.div`
-  width: 33.33%;
+  /* width: 30%; */
-  padding: 10px;
+  padding: 2%;
-  .card {
+  /* flex: 1 0 21%; */
-    background-color: var(--color1);
+  /* margin: 5px;*/
-    padding: 15px;
+  /* height: 100px; */
-    width: 100%;
+  width: 230px;
-    height: auto;
+  height: 320px;
-    border-radius: 5px;
+  box-sizing: border-box;
-    transition: 0.1s;
+  background-color: #8609d4;
-    :hover {
+  border-radius: 5px;
-      transform: scale(1.1);
+  margin: 5px;
-    }
-  }
-  .card-logo {
-    float: right;
-  }
 `;

components/contact.style.jsx

@@ -1,42 +1,17 @@
 import styled from "styled-components";
-import SendIcon from "@mui/icons-material/Send";
+// import SendIcon from "@mui/icons-material/Send";
 
 export const ContactStyle = styled.div`
   padding: 10%;
   align-items: center;
   display: flex;
-  height: 100vh;
-  flex-direction: column;
   justify-content: center;
   background-image: url("images/background2.jpg");
   background-size: cover;
   background-position: center;
+  background-attachment: fixed;
   background-repeat: no-repeat;
-  .row {
-    display: flex;
-  }
 
-  .column {
-    flex: 50%;
-  }
-
-  /* .form-group-main {
-    background: rgb(2, 0, 28);
-    border-radius: 10px;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    background: linear-gradient(
-      142deg,
-      rgba(2, 0, 28, 1) 0%,
-      rgba(9, 9, 121, 1) 35%,
-      rgba(0, 212, 255, 1) 100%
-    );
-    height: 40vh;
-    width: 75%;
-  } */
-  @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
   body {
     background: #2d3b36 url(http://www.luismruiz.com/img/blured.jpg) no-repeat
       center center fixed;
@@ -47,51 +22,6 @@ export const ContactStyle = styled.div`
     padding-top: 100px;
   }
 
-  form {
-    margin-left: auto;
-    margin-right: auto;
-    width: 343px;
-    height: 510px;
-    padding: 30px;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-background-clip: padding;
-    -webkit-background-clip: padding-box;
-    background-clip: padding-box;
-    background: rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-    -webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-    overflow: hidden;
-  }
-
-  .prewritten-info {
-    margin-left: auto;
-    margin-right: auto;
-    width: 343px;
-    height: 510px;
-    padding: 30px;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-background-clip: padding;
-    -webkit-background-clip: padding-box;
-    background-clip: padding-box;
-    background: rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-    -webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
-    overflow: hidden;
-  }
-
-  .prewritten-info-content {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   textarea {
     /* background: rgba(255, 255, 255, 0.4)
       url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px
@@ -245,4 +175,91 @@ export const ContactStyle = styled.div`
       rgba(252, 176, 69, 1) 100%
     );
   }
+  form {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: auto;
+    width: 343px;
+    height: 510px;
+    padding: 30px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    background: rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+  }
+
+  .prewritten-info {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: auto;
+    width: 343px;
+    height: 510px;
+    padding: 30px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    background: rgba(255, 143, 15, 0.61);
+    -moz-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+  }
+
+  .prewritten-info-content {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  @media (min-width: 800px) {
+    /* overflow-y: scroll !important; */
+
+    .row {
+      display: flex;
+      /* flex-grow: true; */
+      flex-direction: row;
+    }
+    .column {
+      /* flex: 50%; */
+    }
+    .prewritten-info {
+      margin-top: 140%;
+    }
+    form {
+      margin-bottom: 17%;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    overflow-y: hidden !important;
+
+    .prewritten-info {
+      margin-top: auto !important;
+    }
+    form {
+      margin-bottom: auto !important;
+    }
+    .row {
+      display: flex;
+      /* flex-grow: true; */
+    }
+    .column {
+      /* flex: 50%; */
+      flex-direction: column;
+    }
+  }
+  @media (max-width: 768px) {
+    padding-top: 25%;
+    padding-bottom: 20%;
+  }
 `;

components/discord-activity.jsx

@@ -236,7 +236,7 @@ export default function DiscordActivity() {
             <b>is Online</b>
           </div>
           <div className="discord-message-files">
-            <b>{status?.activities[0].state}</b>
+            <b>{status?.activities[0]?.state}</b>
           </div>
           <br />
           <div className="time-elapsed">{}</div>

components/nav.style.js

@@ -49,10 +49,10 @@ export default styled.nav`
       flex: start; */
     }
     .green {
-      background-color: green;
+      background-color: #6ffc03;
     }
     .red {
-      background-color: red;
+      background-color: #fc0703;
     }
   }
 `;

components/skills.jsx

@@ -7,32 +7,16 @@ import { APISDK } from "handlers/sdk";
 function Skills() {
   const [skills, setSkills] = useState({});
   const [loading, setLoading] = useState(true);
+  console.log(skills);
+
+  async function requestAPIS() {
+    await APISDK.req();
+    setSkills(APISDK.data);
+    setLoading(false);
+  }
 
   useEffect(() => {
-    // axios
+    requestAPIS();
-    //   .get("/portfolio/api")
-    //   .then((res) => {
-    //     setSkills(res.data);
-    //     console.log(res.data);
-    //     setLoading(false);
-    //   })
-    //   .catch((err) => {
-    //     console.log(err);
-    //   });
-
-    const interval = setTimeout(async () => {
-      console.log("requesting");
-      console.log(await APISDK.req());
-      console.log(APISDK.data);
-      if (valid) {
-        setSkills(skill);
-        setLoading(false);
-        console.log(skill);
-      } else {
-        console.error(skill);
-        setLoading(true);
-      }
-    }, 5000);
   }, [loading, APISDK]);
   return (
     <>
@@ -40,9 +24,9 @@ function Skills() {
         <SkillsStyle>
           <div className="skills">
             <Skill
-              title={skills.login}
+              title={skills?.gh_user?.data?.login}
-              description={skills.bio}
+              description={skills?.gh_user?.data?.bio}
-              image={skills.avatar_url}
+              image={skills?.gh_user?.data?.avatar_url}
             />
             <Skill />
             <Skill />

config.js

@@ -11,3 +11,35 @@ export const resume_url = "";
 export const facebook_url = "https://www.facebook.com/Bravo68Web/";
 export const discord_id = "457039372009865226";
 export const discord_profile = "";
+export const projects = [
+  {
+    name: "Bravo68Web",
+    description: "A Student, Full Stack and DevOps Platform Developer",
+    image: "https://api.b68dev.xyz/logo",
+  },
+  {
+    name: "Bravo68Web",
+    description: "A Student, Full Stack and DevOps Platform Developer",
+    image: "https://api.b68dev.xyz/logo",
+  },
+  {
+    name: "Bravo68Web",
+    description: "A Student, Full Stack and DevOps Platform Developer",
+    image: "https://api.b68dev.xyz/logo",
+  },
+  {
+    name: "Bravo68Web",
+    description: "A Student, Full Stack and DevOps Platform Developer",
+    image: "https://api.b68dev.xyz/logo",
+  },
+  {
+    name: "Bravo68Web",
+    description: "A Student, Full Stack and DevOps Platform Developer",
+    image: "https://api.b68dev.xyz/logo",
+  },
+  {
+    name: "Bravo68Web",
+    description: "A Student, Full Stack and DevOps Platform Developer",
+    image: "https://api.b68dev.xyz/logo",
+  },
+];

handlers/requester.js

@@ -10,9 +10,30 @@ export const tempEndpoint = async (endpoint, data) => {
       response = [true, res.data];
     })
     .catch((err) => {
-      console.log(err);
+      console.error(err);
       response = [false, err];
     });
   await Promise.all([reqPromise]);
   return response;
 };
+
+export const requester = async (configs, data) => {
+  let requests = [];
+  for (let i = 0; i < configs.length; i++) {
+    const { endpoint, name } = configs[i];
+    console.log(endpoint, name);
+    data[name] = {};
+    let request = axios
+      .get(endpoint)
+      .then((res) => {
+        data[name].data = res.data;
+      })
+      .catch((err) => {
+        console.error(err);
+        data[name].error = err;
+      });
+
+    requests.push(request);
+  }
+  return await Promise.all(requests);
+};

handlers/sdk.js

@@ -1,4 +1,4 @@
-import { tempEndpoint } from "./requester";
+import { tempEndpoint, requester } from "./requester";
 // gh_user,
 // discord_activity,
 // osu_recent,
@@ -13,7 +13,16 @@ import { tempEndpoint } from "./requester";
 
 export const APISDK = {
   data: {},
-  req() {
+  async req() {
-    return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
+    await requester(
+      [
+        {
+          endpoint: "https://api.github.com/users/bravo68web",
+          name: "gh_user",
+        },
+      ],
+      this.data
+    );
+    // return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
   },
 };

pages/art.js

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

pages/contact.js

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

styles/globals.css

@@ -1,5 +1,6 @@
 @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/css?family=Source+Sans+Pro");
 :root {
   --color1: #11052c;
   --color2: #3d087b;
@@ -13,7 +14,7 @@
 }
 html,
 body {
-  overflow-x: hidden;
+  overflow: hidden;
   background: var(--color2);
   padding: 0;
   margin: 0;