Fixed Art and Skills Integration
This commit is contained in:
parent
b64aa05b38
commit
0442f0c6ca
|
|
@ -33,5 +33,3 @@ yarn-error.log*
|
|||
# vercel
|
||||
.vercel
|
||||
/public/webviewer
|
||||
|
||||
.vercel
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,20 +1,15 @@
|
|||
import styled from "styled-components";
|
||||
|
||||
export default styled.div`
|
||||
width: 33.33%;
|
||||
padding: 10px;
|
||||
.card {
|
||||
background-color: var(--color1);
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
transition: 0.1s;
|
||||
:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
.card-logo {
|
||||
float: right;
|
||||
}
|
||||
/* width: 30%; */
|
||||
padding: 2%;
|
||||
/* flex: 1 0 21%; */
|
||||
/* margin: 5px;*/
|
||||
/* height: 100px; */
|
||||
width: 230px;
|
||||
height: 320px;
|
||||
box-sizing: border-box;
|
||||
background-color: #8609d4;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@ export default styled.nav`
|
|||
flex: start; */
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
background-color: #6ffc03;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
background-color: #fc0703;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// .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);
|
||||
requestAPIS();
|
||||
}, [loading, APISDK]);
|
||||
return (
|
||||
<>
|
||||
|
|
@ -40,9 +24,9 @@ function Skills() {
|
|||
<SkillsStyle>
|
||||
<div className="skills">
|
||||
<Skill
|
||||
title={skills.login}
|
||||
description={skills.bio}
|
||||
image={skills.avatar_url}
|
||||
title={skills?.gh_user?.data?.login}
|
||||
description={skills?.gh_user?.data?.bio}
|
||||
image={skills?.gh_user?.data?.avatar_url}
|
||||
/>
|
||||
<Skill />
|
||||
<Skill />
|
||||
|
|
|
|||
32
config.js
32
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",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
|
||||
async req() {
|
||||
await requester(
|
||||
[
|
||||
{
|
||||
endpoint: "https://api.github.com/users/bravo68web",
|
||||
name: "gh_user",
|
||||
},
|
||||
],
|
||||
this.data
|
||||
);
|
||||
// return tempEndpoint("https://api.github.com/users/bravo68web", this.data);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default function Home() {
|
|||
</Head>
|
||||
<Nav />
|
||||
<Art />
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default function Home() {
|
|||
</Head>
|
||||
<Nav />
|
||||
<Contact />
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue