Added cringe things
This commit is contained in:
parent
8f54d09934
commit
cc7f7a5a88
|
@ -1,7 +1,11 @@
|
||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import NavStyle from "./nav.style";
|
import NavStyle from "./nav.style";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useLanyard } from "react-use-lanyard";
|
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 = [
|
const LINKS = [
|
||||||
{
|
{
|
||||||
|
@ -23,6 +27,16 @@ function Nav() {
|
||||||
userId: "457039372009865226",
|
userId: "457039372009865226",
|
||||||
socket: true,
|
socket: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
|
const open = Boolean(anchorEl);
|
||||||
|
const handleClick = (event) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavStyle>
|
<NavStyle>
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
|
@ -50,6 +64,33 @@ function Nav() {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</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>
|
</NavStyle>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,6 +25,17 @@ export default styled.nav`
|
||||||
/* padding: 20px; */
|
/* padding: 20px; */
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
button {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
@media (min-width: 901px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.indicator {
|
.indicator {
|
||||||
.circle {
|
.circle {
|
||||||
|
|
|
@ -1,29 +1,55 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import Skill from "./skillCard";
|
import Skill from "./skillCard";
|
||||||
import SkillsStyle from "./skills.style";
|
import SkillsStyle from "./skills.style";
|
||||||
import axios from "axios";
|
import axios from "handlers/axios";
|
||||||
|
import { APISDK } from "handlers/sdk";
|
||||||
|
|
||||||
function Skills() {
|
function Skills() {
|
||||||
const [skills, setSkills] = useState({});
|
const [skills, setSkills] = useState({});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
axios.get("").then((res) => {
|
// axios
|
||||||
setSkills(res.data);
|
// .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 (
|
return (
|
||||||
<SkillsStyle>
|
<>
|
||||||
<div className="skills">
|
{!loading && (
|
||||||
<Skill
|
<SkillsStyle>
|
||||||
title={skills.login}
|
<div className="skills">
|
||||||
description={skills.bio}
|
<Skill
|
||||||
image={skills.avatar_url}
|
title={skills.login}
|
||||||
/>
|
description={skills.bio}
|
||||||
<Skill />
|
image={skills.avatar_url}
|
||||||
<Skill />
|
/>
|
||||||
<Skill />
|
<Skill />
|
||||||
<Skill />
|
<Skill />
|
||||||
</div>
|
<Skill />
|
||||||
</SkillsStyle>
|
<Skill />
|
||||||
|
</div>
|
||||||
|
</SkillsStyle>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1 +1,5 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default axios.create({
|
||||||
|
baseURL: "https://api.b68dev.xyz",
|
||||||
|
});
|
||||||
|
|
|
@ -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;
|
||||||
|
});
|
||||||
|
};
|
|
@ -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");
|
||||||
|
},
|
||||||
|
};
|
Loading…
Reference in New Issue