|
|
|
|
@ -1,9 +1,11 @@ |
|
|
|
|
import type {NextPageWithLayout} from "./_app" |
|
|
|
|
import type { ReactElement } from "react" |
|
|
|
|
import Layout from "../components/layout" |
|
|
|
|
import Nav from "../components/nav" |
|
|
|
|
import styled from "styled-components" |
|
|
|
|
import Link from "next/link" |
|
|
|
|
import IconLink from "components/iconlink" |
|
|
|
|
import {faBook, faEnvelope, faFolderOpen, faUniversity} from "@fortawesome/free-solid-svg-icons" |
|
|
|
|
import {faGit, faGithub} from "@fortawesome/free-brands-svg-icons" |
|
|
|
|
|
|
|
|
|
export const Section = styled.section` |
|
|
|
|
display: flex; |
|
|
|
|
@ -12,7 +14,7 @@ export const Section = styled.section` |
|
|
|
|
padding: 0 1rem; |
|
|
|
|
/*margin: 2rem 0;*/ |
|
|
|
|
margin: 0 0; |
|
|
|
|
height: 100vh; |
|
|
|
|
min-height: 100vh; |
|
|
|
|
|
|
|
|
|
h2, h3 { |
|
|
|
|
margin: 8px 0; |
|
|
|
|
@ -30,6 +32,15 @@ export const Section = styled.section` |
|
|
|
|
ul li { |
|
|
|
|
margin: .5rem 2.5rem;
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#img-container { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
#img-container img { |
|
|
|
|
width: 22rem; |
|
|
|
|
height: auto; |
|
|
|
|
} |
|
|
|
|
` |
|
|
|
|
|
|
|
|
|
export const Code = styled.code` |
|
|
|
|
@ -52,52 +63,59 @@ export const Nem = styled.span` |
|
|
|
|
opacity: .8; |
|
|
|
|
` |
|
|
|
|
|
|
|
|
|
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: .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">$ whoami</h2>
|
|
|
|
|
<p>> I am a <em>Computer Science & Engineering student</em> with a passion for <em>programming</em>, <em>physics</em>, <em>mathematics</em> and anything <em>*NIX</em> <Nem>(Linux, UNIX etc)</Nem> related.</p> |
|
|
|
|
<p>> I am a {secondsToYears(getAge())} year old <em>Computer Science & Engineering student</em> with a passion for <em>programming</em>, <em>physics</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" target="_blank" rel="noreferrer">git-server</a> or <a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>. You can also check out <Link href="/projects">/projects</Link> to view all of my projects (including hardware projects and so on).</p>
|
|
|
|
|
<Nav /> |
|
|
|
|
</Section>
|
|
|
|
|
|
|
|
|
|
<Section> |
|
|
|
|
<h2 id="skills">Skills</h2> |
|
|
|
|
<p>Here are programming languages/technologies that I know/use (<em>not limited to or ranked in any particular order</em>):</p> |
|
|
|
|
<h3>Programming Languages</h3> |
|
|
|
|
<ul> |
|
|
|
|
<li>Rust</li> |
|
|
|
|
<li>C/C++</li> |
|
|
|
|
<li>Python</li> |
|
|
|
|
<li>Ruby</li> |
|
|
|
|
<li>Lua Script</li> |
|
|
|
|
<li>Assembly <Nem>(NASM, x86)</Nem></li> |
|
|
|
|
<li>Bash <Nem>(Literally any POSIX shell)</Nem></li> |
|
|
|
|
<li>TypeScript/JavaScript</li> |
|
|
|
|
<li>C#</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<h3>Technologies</h3> |
|
|
|
|
<ul> |
|
|
|
|
<li>HTML + CSS/SASS/SCSS</li> |
|
|
|
|
<li>Docker</li> |
|
|
|
|
<li> |
|
|
|
|
Linux <Nem>(GNU/Linux)</Nem> |
|
|
|
|
<ul> |
|
|
|
|
<li>Arch</li> |
|
|
|
|
<li>Debian</li> |
|
|
|
|
<li>...</li> |
|
|
|
|
</ul> |
|
|
|
|
</li> |
|
|
|
|
<li>Next.js (+ React)</li> |
|
|
|
|
<li>Git</li> |
|
|
|
|
<li>Jira</li> |
|
|
|
|
<li>SSH</li> |
|
|
|
|
<li>NGINX</li> |
|
|
|
|
</ul> |
|
|
|
|
</Section> |
|
|
|
|
{/* |
|
|
|
|
<div className="topmargin" id="img-container"> |
|
|
|
|
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=E-Almqvist&theme=dark&exclude_repo=hsf,the_auctionhouse,dotfiles,scripts,dmenu,dwmblocks,ewm,machinelearning,adventofcode,python-machinelearning,st,scroll,prog1&layout=compact&count_private=true&hide_border=true&bg_color=1d2021" /> |
|
|
|
|
</div> |
|
|
|
|
*/} |
|
|
|
|
|
|
|
|
|
<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/E-Almqvist" icon={ faGithub } target="_blank" rel="noreferrer"/> |
|
|
|
|
<IconLink href="https://git.wych.dev" icon={ faGit } target="_blank" rel="noreferrer"/> |
|
|
|
|
</LinkList> |
|
|
|
|
</Section>
|
|
|
|
|
|
|
|
|
|
<Section> |
|
|
|
|
<h2 id="contact">Contact</h2> |
|
|
|
|
|
