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

Content refactor & spacer for the footer

Browse Source
burgermenu
E. Almqvist 2 years ago
parent 6d775a2360
commit cce871eaf5
6 changed files with 106 additions and 26 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. 28
      components/footer.tsx
  2. 2
      components/layout.tsx
  3. 4
      components/nav.tsx
  4. 76
      pages/index.tsx
  5. 8
      pages/projects.tsx
  6. 14
      styles/globals.css

28
components/footer.tsx
Unescape View File

@ -1,5 +1,5 @@
import Link from "next/link"
import styled from 'styled-components'
import Link from "next/link"
const Footer = styled.footer`
display: flex;
@ -20,14 +20,26 @@ const UList = styled.ul`
gap: 2rem;
`
const Spacer = styled.div`
flex: 1;
`
export default () => {
return (
<Footer>
<p>Copyright &copy; {new Date().getFullYear()} Elias Almqvist</p>
<UList>
<li><a href="" target="_blank">GitHub</a></li>
<li><a href="" target="_blank">Wych Git</a></li>
</UList>
</Footer>
<>
<Spacer />
<Footer>
<p>Copyright &copy; {new Date().getFullYear()} Elias Almqvist</p>
<UList>
<li><a href="#">{"<Back to top>"}</a></li>
<li><Link href="/">{"<Go back home>"}</Link></li>
</UList>
<p>Source Code</p>
<UList>
<li><a href="https://github.com/E-Almqvist/wychdev-nextjs" target="_blank">GitHub</a></li>
<li><a href="https://git.wych.dev/wychdev-nextjs.git" target="_blank">WychGit</a></li>
</UList>
</Footer>
</>
)
}

2
components/layout.tsx
Unescape View File

@ -5,7 +5,7 @@ import {ReactNode} from 'react'
export default ({children}: {children: ReactNode}) => {
return <>
<Header />
<main>{children}</main>
<main>{children}</main>
<Footer />
</>
}

4
components/nav.tsx
Unescape View File

@ -20,9 +20,11 @@ const Nav = styled.nav`
export default () => {
return (
<Nav>
<ActiveLink href="/">Home</ActiveLink>
<ActiveLink href="/">About</ActiveLink>
<ActiveLink href="/#contact">Contact</ActiveLink>
<ActiveLink href="/projects">Projects</ActiveLink>
<a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>
<a href="https://git.wych.dev">WychGit</a>
</Nav>
)
}

76
pages/index.tsx
Unescape View File

@ -4,14 +4,14 @@ import Layout from '../components/layout'
import styled from 'styled-components'
import Link from "next/link"
const Section = styled.section`
export const Section = styled.section`
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 1rem;
margin: 2rem 0;
h2 {
h2, h3 {
margin: 8px 0;
}
@ -19,16 +19,26 @@ const Section = styled.section`
margin: 0;
color: var(--fg);
}
ul li {
margin: .5rem 2.5rem;
}
`
export const Gold = styled.em`
color: var(--fg-gold);
font-weight: normal;
text-shadow: var(--emph-shadow) var(--fg-gold);
`
const Code = styled.code`
export const Code = styled.code`
background-color: var(--bg-dark);
color: var(--fg-code);
border-radius: .4rem;
padding: .1rem .4rem;
`
const CList = styled.code`
export const CList = styled.code`
list-style: none;
li {
@ -36,17 +46,64 @@ const CList = styled.code`
}
`
export const Nem = styled.span`
color: var(--fg-faded);
opacity: .8;
`
const Page: NextPageWithLayout = () => {
return (
<>
<Section>
<h2 id="about">About</h2>
<p>I am a full-stack developer <Nem>(58% backend / 42% frontend ish)</Nem> with a passion for <Gold>programming</Gold>, <Gold>physics</Gold>, <Gold>mathematics</Gold> and anything <Gold>*NIX</Gold> (Linux, UNIX etc) related.</p>
</Section>
<Section>
<h2>Projects</h2>
<p>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">git-server</a> or <a href="https://github.com/E-Almqvist" target="_blank">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>
</Section>
<Section>
<h2 id="about">About</h2>
<p>I am a student with a passion for programming, physics, mathematics and *NIX (Linux, UNIX etc). </p>
<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>Languages</h3>
<ul>
<li>C/C++</li>
<li>Rust</li>
<li>Python</li>
<li>TypeScript/JavaScript</li>
<li>Lua Script</li>
<li>Ruby</li>
<li>Assembly (NASM)</li>
<li>Bash</li>
<li>C#</li>
</ul>
<h3>Technologies</h3>
<ul>
<li>Next.js (+ React)</li>
<li>HTML + CSS/SASS/SCSS</li>
<li>Docker</li>
<li>
GNU/Linux
<ul>
<li>Arch</li>
<li>Ubuntu (Server)</li>
<li>Debian</li>
<li>Alpine</li>
</ul>
</li>
<li>Git</li>
<li>Jira</li>
<li>SSH</li>
<li>NGINX</li>
</ul>
</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 for bots et cetera. Do not worry, it is easy to crack. Alternatively you could search for my PGP fingerprint on some key server (i.e. <a href="https://pgp.mit.edu/" target="_blank">MIT</a>, <a href="https://keyserver.ubuntu.com/" target="_blank">Ubuntu</a>) as my email is "connected" to it.</p>
<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">MIT</a> or <a href="https://keyserver.ubuntu.com/" target="_blank">Ubuntu</a> key-server).</p>
<CList>
<li>
PGP Fingerprint: <Code>68B2976849F03C7238AEB081E31A99CE3E75A158</Code>
@ -59,11 +116,6 @@ const Page: NextPageWithLayout = () => {
</li>
</CList>
</Section>
<Section>
<h2>Projects</h2>
<p>Most of my projects are open-source, and if you are interested, you can find all of my projects on my <a href="https://github.com/E-Almqvist">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>
</Section>
</>
)
}

8
pages/projects.tsx
Unescape View File

@ -1,11 +1,17 @@
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 (
<>
<h1>yo, projects here</h1>
<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">git-server</a>?</p>
<p>Or you could also <Link href="/">go back</Link> to the home page.</p>
</Section>
</>
)
}

14
styles/globals.css
Unescape View File

@ -16,9 +16,11 @@
--fg-button: var(--fg-faded);
--fg-link: #abf;
--fg-code: #ffbe85;
--fg-gold: #fff190;
--emph-shadow: 0 0 4px;
--bg: #272a34;
--bg-dark: #161f27;
--bg-dark: #21242b;
--trans-time: .2s;
}
@ -34,11 +36,12 @@ html {
background: var(--bg);
}
body {
#__next { /*body*/
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: var(--content-max-width);
min-height: 100vh;
}
a {
@ -54,8 +57,13 @@ a:hover {
h1, h2, h3, h4, h5, em {
color: var(--fg-emph);
}
p {
margin: .5rem 0;
}
em {
font-weight: normal;
font-style: normal;
text-shadow: var(--emph-shadow) currentColor;
}

Write Preview
Loading…
Cancel
Save