parent
da5ec4b599
commit
1de19d7587
@ -1,194 +0,0 @@ |
|||||||
import type { NextPageWithLayout } from "./_app"; |
|
||||||
import type { ReactElement } from "react"; |
|
||||||
import Layout from "../components/layout"; |
|
||||||
import styled from "styled-components"; |
|
||||||
import IconLink from "components/iconlink"; |
|
||||||
import ScrollMe from "components/scrollme"; |
|
||||||
import { faEnvelope } from "@fortawesome/free-solid-svg-icons"; |
|
||||||
import { faGit, faGithub } from "@fortawesome/free-brands-svg-icons"; |
|
||||||
|
|
||||||
export const Section = styled.section` |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
flex-direction: column; |
|
||||||
padding: 0 1rem; |
|
||||||
/*margin: 2rem 0;*/ |
|
||||||
margin: 0 0; |
|
||||||
min-height: 100vh; |
|
||||||
|
|
||||||
h2, |
|
||||||
h3 { |
|
||||||
font-size: 2rem; |
|
||||||
margin: 8px 0; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
margin: 0; |
|
||||||
color: var(--fg); |
|
||||||
} |
|
||||||
|
|
||||||
.topmargin { |
|
||||||
margin-top: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
ul li { |
|
||||||
margin: 0.5rem 2.5rem; |
|
||||||
} |
|
||||||
|
|
||||||
#img-container { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
#img-container img { |
|
||||||
width: 22rem; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
|
|
||||||
footer { |
|
||||||
margin-top: 1rem; |
|
||||||
opacity: 0.5; |
|
||||||
} |
|
||||||
`; |
|
||||||
|
|
||||||
export const Code = styled.code` |
|
||||||
font-family: monospace; |
|
||||||
font-size: 0.9rem; |
|
||||||
background-color: var(--bg-emph); |
|
||||||
color: var(--fg-code); |
|
||||||
border-radius: 0.4rem; |
|
||||||
padding: 0.1rem 0.4rem; |
|
||||||
`; |
|
||||||
|
|
||||||
export const CList = styled.ul` |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
li { |
|
||||||
margin: 1rem !important; |
|
||||||
} |
|
||||||
`; |
|
||||||
|
|
||||||
export const Nem = styled.span` |
|
||||||
color: var(--fg-faded); |
|
||||||
`; |
|
||||||
|
|
||||||
export const LinkList = styled.div` |
|
||||||
display: flex; |
|
||||||
gap: 1.5rem; |
|
||||||
font-size: 1.2rem; |
|
||||||
border: unset; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
a { |
|
||||||
color: var(--fg-button); |
|
||||||
transition: var(--trans-time) opacity; |
|
||||||
} |
|
||||||
|
|
||||||
a:hover { |
|
||||||
opacity: 0.4; |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 960px) { |
|
||||||
word-break: break-word; |
|
||||||
} |
|
||||||
`; |
|
||||||
|
|
||||||
function getAge() { |
|
||||||
let birth = 1050019200; |
|
||||||
let now = Math.floor(Date.now() / 1000); |
|
||||||
return now - birth; |
|
||||||
} |
|
||||||
|
|
||||||
function secondsToYears(secs: number) { |
|
||||||
return Math.floor(secs / 31557600.0); |
|
||||||
} |
|
||||||
|
|
||||||
const Page: NextPageWithLayout = () => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Section> |
|
||||||
<h2 id="about">/almqv</h2> |
|
||||||
<p> |
|
||||||
I am a {secondsToYears(getAge())} year old{" "} |
|
||||||
<em>Computer Science & Engineering student</em> with a passion for{" "} |
|
||||||
<em>physics</em>, <em>programming</em>, <em>mathematics</em> and |
|
||||||
anything <em>*NIX</em> <Nem>(Linux, UNIX etc)</Nem> related. |
|
||||||
</p> |
|
||||||
{/*TODO: Add GitHub code frequency/contrib here*/} |
|
||||||
<p className="topmargin"> |
|
||||||
Most of my projects are open-source, and if you are interested, you |
|
||||||
can find all of my projects on my <a href="https://git.wych.dev/elal" target="_blank" rel="noreferrer">git-server</a> or <a href="https://github.com/almqv" target="_blank" rel="GITHUBuuuuuuuu |
|
||||||
</Auuuu> |
|
||||||
. |
|
||||||
</p> |
|
||||||
|
|
||||||
<LinkList className="topmargin"> |
|
||||||
<IconLink |
|
||||||
href="#contact" |
|
||||||
icon={faEnvelope} |
|
||||||
target="_self" |
|
||||||
rel="noreferrer" |
|
||||||
/> |
|
||||||
{/*<IconLink href="/projects" icon={ faFolderOpen } target="_self" rel="noreferrer"/>*/} |
|
||||||
<IconLink |
|
||||||
href="https://github.com/almqv" |
|
||||||
icon={faGithub} |
|
||||||
target="_blank" |
|
||||||
rel="noreferrer" |
|
||||||
/> |
|
||||||
<IconLink |
|
||||||
href="https://git.wych.dev/elal" |
|
||||||
icon={faGit} |
|
||||||
target="_blank" |
|
||||||
rel="noreferrer" |
|
||||||
/> |
|
||||||
</LinkList> |
|
||||||
|
|
||||||
<ScrollMe href="#contact" /> |
|
||||||
</Section> |
|
||||||
|
|
||||||
<Section> |
|
||||||
<h2 id="contact">Contact</h2> |
|
||||||
<p> |
|
||||||
You can contact me through email. And if you prefer it, you can |
|
||||||
contact me using PGP. Do note that my{" "} |
|
||||||
<em>email address below is encrypted</em> as a precaution against bots |
|
||||||
et cetera. <em>Do not worry, it is easy to crack</em>. Alternatively |
|
||||||
you could query for my email with my PGP fingerprint (key-id) on some |
|
||||||
PGP key server (i.e. the{" "} |
|
||||||
<a href="https://pgp.mit.edu/" target="_blank" rel="noreferrer"> |
|
||||||
MIT |
|
||||||
</a>{" "} |
|
||||||
or{" "} |
|
||||||
<a |
|
||||||
href="https://keyserver.ubuntu.com/" |
|
||||||
target="_blank" |
|
||||||
rel="noreferrer" |
|
||||||
> |
|
||||||
Ubuntu |
|
||||||
</a>{" "} |
|
||||||
key-server). |
|
||||||
</p> |
|
||||||
<CList> |
|
||||||
<li> |
|
||||||
PGP fingerprint:{" "} |
|
||||||
<Code>68B2 9768 49F0 3C72 38AE B081 E31A 99CE 3E75 A158</Code> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
Email: <Code>cnlueXpkaXZmZ0B0em52eS5wYnoK</Code> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
GitHub:{" "} |
|
||||||
<a href="https://github.com/almqv" target="_blank" rel="noreferrer"> |
|
||||||
github.com/almqv |
|
||||||
</a> |
|
||||||
</li> |
|
||||||
</CList> |
|
||||||
</Section> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
Page.getLayout = (page: ReactElement) => { |
|
||||||
return <Layout>{page}</Layout>; |
|
||||||
}; |
|
||||||
export default Page; |
|
||||||
Loading…
Reference in new issue