elal
/
wychdev-nextjs
mirror of https://github.com/E-Almqvist/wychdev-nextjs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Formatting & fixed svg thing

Browse Source
main
E. Almqvist 2 years ago
parent db6d77dced
commit a8cb979e95
No known key found for this signature in database
GPG Key ID: E31A99CE3E75A158
17 changed files with 1894 additions and 1287 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 48
      components/activelink.tsx
  2. 265
      components/burgermenu.tsx
  3. 38
      components/footer.tsx
  4. 77
      components/header.tsx
  5. 36
      components/iconlink.tsx
  6. 32
      components/layout.tsx
  7. 52
      components/nav.tsx
  8. 28
      components/navlinks.tsx
  9. 42
      components/scrollme.tsx
  10. 26
      package.json
  11. 194
      pages/#index.tsx#
  12. 26
      pages/_app.tsx
  13. 76
      pages/_document.tsx
  14. 310
      pages/index.tsx
  15. 42
      pages/projects.tsx
  16. 21
      styles/globals.css
  17. 1868
      yarn.lock

48
components/activelink.tsx
Unescape View File

@ -1,23 +1,31 @@
import { useRouter } from "next/router"
import { ReactNode } from "react"
import Link from "next/link"
import styled, {css} from "styled-components"
import { useRouter } from "next/router";
import { ReactNode } from "react";
import Link from "next/link";
import styled, { css } from "styled-components";
const ALink = styled.a<{active?: boolean}>`
border-bottom: 1px solid transparent;
${({active}) => active && css`
color: var(--fg) !important;
/*border-bottom-color: currentColor;*/
`}
`
const ALink = styled.a<{ active?: boolean }>`
border-bottom: 1px solid transparent;
${({ active }) =>
active &&
css`
color: var(--fg) !important;
/*border-bottom-color: currentColor;*/
`}
`;
const ActiveLink = ({children, href}: {children: ReactNode, href: string}) => {
const router = useRouter()
return (
<Link href={href} passHref>
<ALink active={router.asPath === href}>{children}</ALink>
</Link>
)
}
const ActiveLink = ({
children,
href,
}: {
children: ReactNode;
href: string;
}) => {
const router = useRouter();
return (
<Link href={href} passHref>
<ALink active={router.asPath === href}>{children}</ALink>
</Link>
);
};
export default ActiveLink
export default ActiveLink;

265
components/burgermenu.tsx
Unescape View File

@ -1,134 +1,139 @@
import styled, {css} from "styled-components"
import React, {useState} from "react"
import NavLinks from "./navlinks"
import styled, { css } from "styled-components";
import React, { useState } from "react";
import NavLinks from "./navlinks";
const MenuLine = styled.div`
width: 1.8rem;
height: 3px;
border-radius: 2px;
background-color: var(--fg);
&:not(:last-child) {
margin-bottom: .4rem;
}
`
const BurgerContainer = styled.div<{open: boolean}>`
display: none;
width: 1.8rem;
height: 1.8rem;
flex-direction: column;
justify-content: center;
margin-left: auto;
div {
transition: .2s;
}
&:hover {
cursor: pointer;
}
@media screen and (max-width: 960px) {
display: flex;
nav {
display: none !important;
position: absolute;
top: 0;
}
}
${({open}) => open && css`
position: fixed;
right: 2rem;
z-index: 99;
div {
position: absolute;
}
div:nth-child(1) {
transform: rotate(45deg) translate(.2rem, .2rem);
}
div:nth-child(2) {
transform: rotate(-45deg) translate(-.18rem, .2rem);
}
div:last-child {
display: none;
}
`}
`
const BNavCont = styled.nav<{show: boolean}>`
display: flex;
opacity: 0;
backdrop-filter: blur(25px);
position: fixed;
flex-direction: column;
background: #21242baf;
left: 0;
top: 0;
pointer-events: none;
width: 100vw;
height: 100vh;
z-index: 2;
transition: opacity .2s;
align-items: center;
justify-content: center;
gap: 1.5rem;
font-size: 1.2rem;
border: unset;
a {
font-size: 2rem;
color: var(--fg-button);
transition: var(--trans-time) opacity;
text-align: center;
}
a:hover {
opacity: .4;
}
${({show}) => show && css`
display: flex;
opacity: 1;
pointer-events: unset;
`}
@media screen and (min-width: 960px) {
display: none;
position: absolute;
top: 0;
}
`
const BNav: React.FC<{show: boolean, onClick: () => void}> = ({show, onClick}) => {
return (
<BNavCont show={show} onClick={onClick}>
<NavLinks />
</BNavCont>
)
}
width: 1.8rem;
height: 3px;
border-radius: 2px;
background-color: var(--fg);
&:not(:last-child) {
margin-bottom: 0.4rem;
}
`;
const BurgerContainer = styled.div<{ open: boolean }>`
display: none;
width: 1.8rem;
height: 1.8rem;
flex-direction: column;
justify-content: center;
margin-left: auto;
div {
transition: 0.2s;
}
&:hover {
cursor: pointer;
}
@media screen and (max-width: 960px) {
display: flex;
nav {
display: none !important;
position: absolute;
top: 0;
}
}
${({ open }) =>
open &&
css`
position: fixed;
right: 2rem;
z-index: 99;
div {
position: absolute;
}
div:nth-child(1) {
transform: rotate(45deg) translate(0.2rem, 0.2rem);
}
div:nth-child(2) {
transform: rotate(-45deg) translate(-0.18rem, 0.2rem);
}
div:last-child {
display: none;
}
`}
`;
const BNavCont = styled.nav<{ show: boolean }>`
display: flex;
opacity: 0;
backdrop-filter: blur(25px);
position: fixed;
flex-direction: column;
background: #21242baf;
left: 0;
top: 0;
pointer-events: none;
width: 100vw;
height: 100vh;
z-index: 2;
transition: opacity 0.2s;
align-items: center;
justify-content: center;
gap: 1.5rem;
font-size: 1.2rem;
border: unset;
a {
font-size: 2rem;
color: var(--fg-button);
transition: var(--trans-time) opacity;
text-align: center;
}
a:hover {
opacity: 0.4;
}
${({ show }) =>
show &&
css`
display: flex;
opacity: 1;
pointer-events: unset;
`}
@media screen and (min-width: 960px) {
display: none;
position: absolute;
top: 0;
}
`;
const BNav: React.FC<{ show: boolean; onClick: () => void }> = ({
show,
onClick,
}) => {
return (
<BNavCont show={show} onClick={onClick}>
<NavLinks />
</BNavCont>
);
};
const Menu = () => {
const [open, setOpen] = useState(false);
return (
<>
<BNav show={open} onClick={() => setOpen(false)}/>
<BurgerContainer open={open} onClick={() => setOpen(!open)}>
<MenuLine />
<MenuLine />
<MenuLine />
</BurgerContainer>
</>
)
}
export default Menu
const [open, setOpen] = useState(false);
return (
<>
<BNav show={open} onClick={() => setOpen(false)} />
<BurgerContainer open={open} onClick={() => setOpen(!open)}>
<MenuLine />
<MenuLine />
<MenuLine />
</BurgerContainer>
</>
);
};
export default Menu;

38
components/footer.tsx
Unescape View File

@ -1,15 +1,15 @@
import styled from 'styled-components'
import styled from "styled-components";
// import Link from "next/link"
const FooterCont = styled.footer`
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 1.2rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 1.2rem;
color: var(--fg-faded);
`
color: var(--fg-faded);
`;
// const UList = styled.ul`
// display: flex;
@ -19,17 +19,17 @@ const FooterCont = styled.footer`
// `
export const Spacer = styled.div`
flex: 1;
`
flex: 1;
`;
const Footer = () => {
return (
<>
<FooterCont>
<p>&copy; Copyright {new Date().getFullYear()}</p>
</FooterCont>
</>
)
}
return (
<>
<FooterCont>
<p>&copy; Copyright {new Date().getFullYear()}</p>
</FooterCont>
</>
);
};
export default Footer
export default Footer;

77
components/header.tsx
Unescape View File

@ -1,42 +1,43 @@
import styled from "styled-components"
import Nav from "./nav"
import Link from "next/link"
import Menu from "./burgermenu"
import styled from "styled-components";
import Nav from "./nav";
import Link from "next/link";
import Menu from "./burgermenu";
const HeaderCont = styled.header`
display: flex;
align-items: center;
border-bottom: var(--border-size) var(--border-type) var(--border-color);
padding: .8rem 2rem;
gap: 2rem;
h1 {
font-weight: normal;
a {
color: inherit;
}
}
nav {
margin-left: auto;
float: right;
}
@media screen and (max-width: 960px) {
padding: 1rem 2rem;
}
`
display: flex;
align-items: center;
border-bottom: var(--border-size) var(--border-type) var(--border-color);
padding: 0.8rem 2rem;
gap: 2rem;
h1 {
font-weight: normal;
a {
color: inherit;
}
}
nav {
margin-left: auto;
float: right;
}
@media screen and (max-width: 960px) {
padding: 1rem 2rem;
}
`;
const Header = () => {
return (
<HeaderCont>
<h1><Link href="/">wych.dev</Link></h1>
<Nav />
<Menu />
</HeaderCont>
)
}
export default Header
return (
<HeaderCont>
<h1>
<Link href="/">wych.dev</Link>
</h1>
<Nav />
<Menu />
</HeaderCont>
);
};
export default Header;

36
components/iconlink.tsx
Unescape View File

@ -1,16 +1,28 @@
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import styled from "styled-components"
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styled from "styled-components";
const ILink = styled.a`
font-size: 1.5rem;
margin: 0 .4rem;
`
font-size: 1.5rem;
margin: 0 0.4rem;
`;
const IconLink = ({href, icon, target, rel}: {href: string, icon: IconDefinition, target: string, rel: string}) => {
return (
<ILink href={href} target={target} rel={rel}><FontAwesomeIcon icon={icon}/></ILink>
)
}
const IconLink = ({
href,
icon,
target,
rel,
}: {
href: string;
icon: IconDefinition;
target: string;
rel: string;
}) => {
return (
<ILink href={href} target={target} rel={rel}>
<FontAwesomeIcon icon={icon} />
</ILink>
);
};
export default IconLink
export default IconLink;

32
components/layout.tsx
Unescape View File

@ -1,17 +1,19 @@
import Header from "./header"
import Footer from "./footer"
import {ReactNode} from "react"
import Head from "next/head"
import Header from "./header";
import Footer from "./footer";
import { ReactNode } from "react";
import Head from "next/head";
const Layout = ({children}: {children: ReactNode}) => {
return (<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>wych.dev</title>
</Head>
<main>{children}</main>
<Footer />
</>)
}
const Layout = ({ children }: { children: ReactNode }) => {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>wych.dev</title>
</Head>
<main>{children}</main>
<Footer />
</>
);
};
export default Layout
export default Layout;

52
components/nav.tsx
Unescape View File

@ -1,34 +1,34 @@
import styled from "styled-components"
import NavLinks from "./navlinks"
import styled from "styled-components";
import NavLinks from "./navlinks";
const NavCont = styled.nav`
display: flex;
gap: 1.5rem;
font-size: 1.2rem;
border: unset;
display: flex;
gap: 1.5rem;
font-size: 1.2rem;
border: unset;
a {
color: var(--fg-button);
transition: var(--trans-time) opacity;
}
a {
color: var(--fg-button);
transition: var(--trans-time) opacity;
}
a:hover {
opacity: .4;
}
a:hover {
opacity: 0.4;
}
@media screen and (max-width: 960px) {
display: none;
position: absolute;
top: 0;
}
`
@media screen and (max-width: 960px) {
display: none;
position: absolute;
top: 0;
}
`;
const Nav = () => {
return (
<NavCont>
<NavLinks />
</NavCont>
)
}
return (
<NavCont>
<NavLinks />
</NavCont>
);
};
export default Nav
export default Nav;

28
components/navlinks.tsx
Unescape View File

@ -1,15 +1,19 @@
import ActiveLink from "./activelink"
import ActiveLink from "./activelink";
const NavLinks = () => {
return (
<>
<ActiveLink href="/">About</ActiveLink>
<ActiveLink href="/#contact">Contact</ActiveLink>
<ActiveLink href="/projects">Projects</ActiveLink>
<a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>
<a href="https://git.wych.dev" target="_blank" rel="noreferrer">WychGit</a>
</>
)
}
return (
<>
<ActiveLink href="/">About</ActiveLink>
<ActiveLink href="/#contact">Contact</ActiveLink>
<ActiveLink href="/projects">Projects</ActiveLink>
<a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">
GitHub
</a>
<a href="https://git.wych.dev" target="_blank" rel="noreferrer">
WychGit
</a>
</>
);
};
export default NavLinks
export default NavLinks;

42
components/scrollme.tsx
Unescape View File

@ -1,21 +1,25 @@
import * as React from "react"
import { SVGProps } from "react"
import Link from "next/link";
import * as React from "react";
import { SVGProps } from "react";
const ScrollMe = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
stroke="currentColor"
{...props}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2.8}
d="m2 2 15.77 17.369a2 2 0 0 0 2.96 0L36.5 2"
/>
</svg>
)
const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => (
<Link href={props.href}>
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 38 23"
stroke="currentColor"
fill="none"
{...props}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2.8}
d="m2 2 15.77 17.369a2 2 0 0 0 2.96 0L36.5 2"
/>
</svg>
</Link>
);
export default ScrollMe
export default ScrollMe;

26
package.json
Unescape View File

@ -9,25 +9,25 @@
"lint": "next lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"classnames": "^2.3.1",
"classnames": "^2.3.2",
"fontawesome": "^5.6.3",
"fortawesome": "^0.0.1-security",
"next": "12.2.0",
"next": "13.1.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"styled-components": "^5.3.5"
"styled-components": "^5.3.6"
},
"devDependencies": {
"@types/node": "18.0.0",
"@types/react": "18.0.14",
"@types/react-dom": "18.0.5",
"@types/styled-components": "^5.1.25",
"eslint": "8.19.0",
"eslint-config-next": "12.2.0",
"typescript": "4.7.4"
"@types/node": "18.11.18",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
"@types/styled-components": "^5.1.26",
"eslint": "8.32.0",
"eslint-config-next": "13.1.2",
"typescript": "4.9.4"
}
}

194
pages/#index.tsx#
Unescape View File

@ -0,0 +1,194 @@
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;

26
pages/_app.tsx
Unescape View File

@ -1,23 +1,23 @@
import "../styles/globals.css"
import type { AppProps } from "next/app"
import type { ReactElement, ReactNode } from "react"
import type { NextPage } from "next"
import "../styles/globals.css";
import type { AppProps } from "next/app";
import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
config.autoAddCss = false;
export type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode
}
getLayout?: (page: ReactElement) => ReactNode;
};
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
Component: NextPageWithLayout;
};
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page)
return getLayout(<Component {...pageProps}/>)
const getLayout = Component.getLayout ?? ((page) => page);
return getLayout(<Component {...pageProps} />);
}
export default MyApp
export default MyApp;

76
pages/_document.tsx
Unescape View File

@ -1,43 +1,49 @@
import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
import Document, {
DocumentContext,
Html,
Head,
Main,
NextScript,
} from "next/document";
import React from "react";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

310
pages/index.tsx
Unescape View File

@ -1,152 +1,200 @@
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"
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: .5rem 2.5rem;
}
#img-container {
display: flex;
justify-content: center;
}
#img-container img {
width: 22rem;
height: auto;
}
footer {
margin-top: 1rem;
opacity: .5;
}
`
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: .9rem;
background-color: var(--bg-emph);
color: var(--fg-code);
border-radius: .4rem;
padding: .1rem .4rem;
`
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;
list-style: none;
li {
margin: 1rem !important;
}
`
li {
margin: 1rem !important;
}
`;
export const Nem = styled.span`
color: var(--fg-faded);
`
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: .4;
}
@media screen and (max-width: 960px) {
word-break: break-word;
}
`
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;
let birth = 1050019200;
let now = Math.floor(Date.now() / 1000);
return now - birth;
}
function secondsToYears(secs: number) {
return Math.floor(secs / 31557600.0);
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="noreferrer">GitHub</a>.</p>
{/*
<div className="topmargin" id="img-container">
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=almqv&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/almqv" icon={ faGithub } target="_blank" rel="noreferrer"/>
<IconLink href="https://git.wych.dev/elal" icon={ faGit } target="_blank" rel="noreferrer"/>
</LinkList>
</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>
</>
)
}
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="noreferrer">
GitHub
</a>
.
</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
return <Layout>{page}</Layout>;
};
export default Page;

42
pages/projects.tsx
Unescape View File

@ -1,22 +1,28 @@
import type {NextPageWithLayout} from './_app'
import type { ReactElement } from 'react'
import Layout from '../components/layout'
import { Section } from './index'
import Link from "next/link"
import type { NextPageWithLayout } from "./_app";
import type { ReactElement } from "react";
import Layout from "../components/layout";
import { Section } from "./index";
import Link from "next/link";
const Page: NextPageWithLayout = () => {
return (
<>
<Section>
<h2>Page under development...</h2>
<p>While you wait, why not check out my <a href="https://github.com/E-Almqvist">GitHub</a>? Or perhaps my very own <a href="https://git.wych.dev/elal">git-server</a>?</p>
<p>Or you could also <Link href="/">go back</Link> to the home page.</p>
</Section>
</>
)
}
return (
<>
<Section>
<h2>Page under development...</h2>
<p>
While you wait, why not check out my{" "}
<a href="https://github.com/E-Almqvist">GitHub</a>? Or perhaps my very
own <a href="https://git.wych.dev/elal">git-server</a>?
</p>
<p>
Or you could also <Link href="/">go back</Link> to the home page.
</p>
</Section>
</>
);
};
Page.getLayout = (page: ReactElement) => {
return <Layout>{page}</Layout>
}
export default Page
return <Layout>{page}</Layout>;
};
export default Page;

21
styles/globals.css
Unescape View File

@ -11,20 +11,19 @@
--h-uni-padding: .8rem;
--v-uni-padding: .2rem;
--fg: #E1DCCE;
--fg: #c5c8c6;
color: var(--fg);
/* --fg-emph: #fbebe2; */
--fg-emph: #EFE8D7;
--fg-faded: #928373;
--fg-emph: var(--fg);
--fg-faded: #969896;
--fg-button: var(--fg-faded);
--fg-link: #8398AC;
--fg-code: #ffbe85;
--fg-gold: #fff190;
--fg-link: #5b83a6;
--fg-code: #de935f;
--fg-gold: #f0c674;
--emph-shadow: 0 0 2px;
--bg: #181818;
--bg-emph: #242424;
--trans-time: 200ms;
--bg: #16191c;
--bg-emph: #212426;
--trans-time: 150ms;
}
* {
@ -59,7 +58,7 @@ a {
}
a:hover {
opacity: .4;
opacity: .8;
}
h1, h2, h3, h4, h5, em {

1868
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save