About me is ready
Cobular
5 years ago
parent
895ccd8cb1
commit
5f76685897
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 264 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 44 KiB |
@ -0,0 +1,86 @@
|
||||
#about-me-parent {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about-me-card {
|
||||
background: #61dafb;
|
||||
border-radius: 5px;
|
||||
margin: 0 5px 0;
|
||||
padding: 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#about-me {
|
||||
background: #61dafb;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
width: fit-content;
|
||||
|
||||
#info-parent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
#specific-info {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
#fun-info {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 660px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Fira Code", monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Fira Code", monospace;
|
||||
line-height: normal;
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 18px;
|
||||
list-style-type: symbols("+");
|
||||
list-style-position: inside;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
background: none!important;
|
||||
border: none;
|
||||
padding: 0!important;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
import "./AboutMe.scss";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Tooltip } from "antd";
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
const TelegramOutlinedSvg = () => {
|
||||
return (
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{
|
||||
fillRule: "evenodd",
|
||||
clipRule: "evenodd",
|
||||
strokeLinejoin: "round",
|
||||
strokeMiterlimit: 1.41421,
|
||||
}}
|
||||
>
|
||||
<path
|
||||
id="telegram-1"
|
||||
d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const LastFmLi = () => {
|
||||
const [nowPlayingSong, setNowPlayingSong] = useState<string>("nothing");
|
||||
const [nowPlayingArtist, setNowPlayingArtist] = useState<string>("no-one");
|
||||
|
||||
const updateNowPlaying = async () => {
|
||||
try {
|
||||
const songData = await axios.get(
|
||||
"https://jsonplaceholder.typicode.com/posts"
|
||||
);
|
||||
|
||||
console.log(songData.data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateNowPlaying();
|
||||
|
||||
const interval = setInterval(updateNowPlaying, 10000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, []);
|
||||
return <li>listening to ____ by ____</li>;
|
||||
};
|
||||
|
||||
const Age = () => {
|
||||
const [age, setAge] = useState(
|
||||
Math.round((new Date().getTime() - 1021004428000) / 1000)
|
||||
);
|
||||
|
||||
const UpdateAge = () => {
|
||||
setAge(Math.round((new Date().getTime() - 1021004428000) / 1000));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
UpdateAge();
|
||||
|
||||
const interval = setInterval(UpdateAge, 1000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<span style={{ fontFamily: "Fira Code" }}>{age}</span> seconds old{" "}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export const AboutMe = () => {
|
||||
const EmailHandler = () => {
|
||||
const email = "Y29udGFjdEBqYWtlY292ZXIubWU=";
|
||||
window.prompt("Thanks for being a human! Here's my email:", atob(email));
|
||||
};
|
||||
|
||||
return (
|
||||
<div id={"about-me-parent"}>
|
||||
<div id={"about-me"} className={"about-me-card"}>
|
||||
<h1> Hi! I'm Jake!</h1>
|
||||
|
||||
<div id={"info-parent"}>
|
||||
<div id={"specific-info"}>
|
||||
<h2> A bit about me:</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<b>Name</b>: Jake Cover
|
||||
</li>
|
||||
<li>Occupation: Student</li>
|
||||
<li>Location: Southern California</li>
|
||||
<li>
|
||||
Projects:{" "}
|
||||
<button
|
||||
onClick={() =>
|
||||
document.getElementById("project-header")?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
})
|
||||
}
|
||||
>
|
||||
Down there
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
Resume: <Link to={"/resume"}>Over here</Link>
|
||||
</li>
|
||||
<li>
|
||||
Find Me:
|
||||
<ul>
|
||||
<li>
|
||||
Email: <button onClick={EmailHandler}>Click This</button>
|
||||
</li>
|
||||
<li>
|
||||
Twitter:{" "}
|
||||
<Tooltip title={":("}>
|
||||
<a
|
||||
href={"https://github.com/JakeCover"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@cobular_
|
||||
</a>
|
||||
</Tooltip>
|
||||
</li>
|
||||
<li>
|
||||
GitHub:{" "}
|
||||
<a
|
||||
href={"https://github.com/JakeCover"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
JakeCover
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Telegram:{" "}
|
||||
<a
|
||||
href={"https://t.me/cobular"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@cobular
|
||||
</a>
|
||||
</li>
|
||||
<li>Elsewhere: Probably @cobular</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id={"fun-info"}>
|
||||
<h2>I'm:</h2>
|
||||
<ul>
|
||||
<Age />
|
||||
<LastFmLi />
|
||||
<li>
|
||||
doing (general stuff - in class, projects, sleeping, games)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,13 +1,2 @@
|
||||
#about-me {
|
||||
background: #61dafb;
|
||||
border-radius: 5px;
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
width: fit-content;
|
||||
|
||||
p {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
import "./Home.scss"
|
||||
import {ProjectGrid} from "./ProjectGrid";
|
||||
import "./Home.scss";
|
||||
import { ProjectGrid } from "./ProjectGrid";
|
||||
import {AboutMe} from "./AboutMe";
|
||||
|
||||
export const Home = () => {
|
||||
return (
|
||||
<div id={"home"}>
|
||||
<div id={"about-me"}>
|
||||
<p>
|
||||
Hi! I'm Jake, a CS student from the west coast! Take a look at some of my projects below! <br/>
|
||||
This site is still under construction, so pardon the duplicate information and the horrendous colors. The final version should be up soon!
|
||||
</p>
|
||||
<AboutMe />
|
||||
<ProjectGrid />
|
||||
</div>
|
||||
<ProjectGrid/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@ -1,2 +1,2 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400,600&family=Montserrat:wght@400;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Montserrat:wght@400;600;700&display=swap');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue