feat: 2025 theme
This commit is contained in:
Aaron Yarborough
parent
6036c0b235
commit
934011b72f
24 changed files with 227 additions and 484 deletions
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
|
|
@ -35,5 +35,8 @@
|
|||
"[javascriptreact]": {
|
||||
"editor.defaultFormatter": "vscode.typescript-language-features"
|
||||
},
|
||||
"liveServer.settings.multiRootWorkspaceName": "www-aaronjy-2024"
|
||||
"liveServer.settings.multiRootWorkspaceName": "www-aaronjy-2024",
|
||||
"[css]": {
|
||||
"editor.defaultFormatter": "vscode.css-language-features"
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,6 @@ pubdate: 2025-02-23T21:12:37.864Z
|
|||
desc: While writing a TCP game server in dotnet for a hobby project, I learned a few ways to improve the efficiency and scalability of the server while running into some performance issues. Here's what I learned!
|
||||
---
|
||||
|
||||
# Performance considerations when writing a TCP game server in dotnet
|
||||
|
||||
While writing a TCP game server in dotnet for a hobby project (check it out [here](https://github.com/AaronJY/GServer)), I learned a few ways to improve the efficiency and scalability of the server while running into some performance issues.
|
||||
|
||||
Here's what I learned!
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"checkJs": true,
|
||||
"jsx": "preserve"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,37 +2,32 @@ import { formatDate } from '@/lib/helpers'
|
|||
import { NextSeo } from 'next-seo'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import * as feather from 'feather-icons'
|
||||
|
||||
function Article ({ attributes, html }) {
|
||||
function Article({ attributes, html }) {
|
||||
return (
|
||||
<section>
|
||||
<NextSeo
|
||||
title={attributes.title} description={attributes.desc} openGraph={
|
||||
{
|
||||
title: attributes.title,
|
||||
description: attributes.desc,
|
||||
type: 'article',
|
||||
article: {
|
||||
publishedTime: attributes.pubdate ?? null
|
||||
<>
|
||||
<h1>{attributes.title}</h1>
|
||||
<article>
|
||||
<NextSeo
|
||||
title={attributes.title} description={attributes.desc} openGraph={
|
||||
{
|
||||
title: attributes.title,
|
||||
description: attributes.desc,
|
||||
type: 'article',
|
||||
article: {
|
||||
publishedTime: attributes.pubdate ?? null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<Link href='./'>
|
||||
<p className='row'>
|
||||
<span className='icon icon-left' dangerouslySetInnerHTML={{ __html: feather.icons['arrow-left'].toSvg() }} />
|
||||
<span>Go back</span>
|
||||
</p>
|
||||
</Link>
|
||||
<h1>{attributes.title}</h1>
|
||||
<p>{attributes.desc}</p>
|
||||
{attributes.pubdate && <p>{formatDate(attributes.pubdate)}</p>}
|
||||
<hr />
|
||||
<div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
|
||||
</div>
|
||||
</section>
|
||||
/>
|
||||
<div>
|
||||
<Link href='./'>Back...</Link>
|
||||
{attributes.pubdate && <p>{formatDate(attributes.pubdate)}</p>}
|
||||
<div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
|
||||
</div>
|
||||
</article>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,47 +2,29 @@ import React from 'react'
|
|||
|
||||
import style from './Footer.module.css'
|
||||
|
||||
function Footer () {
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className={style.footer} data-testid='footer'>
|
||||
<hr />
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<span>
|
||||
<a href='#'>Back to top</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='/static/pgp.txt'>pgp key</a>
|
||||
</li>
|
||||
<li>
|
||||
</span>{', '}
|
||||
<span>
|
||||
<a href='/static/pgp.txt'>PGP key</a>
|
||||
</span>{', '}
|
||||
<span>
|
||||
<a href='mailto:me@aaronjy.me'>Send me an email</a>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<small>2025 Aaron Yarborough</small>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<small>
|
||||
2024 Aaron Yarborough, made with{' '}
|
||||
<a
|
||||
target='_blank'
|
||||
rel='nofollow noopener noreferrer'
|
||||
href='https://nextjs.org/'
|
||||
>
|
||||
Next.js
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
<a
|
||||
target='_blank'
|
||||
rel='nofollow noopener noreferrer'
|
||||
href='https://yegor256.github.io/tacit/'
|
||||
>
|
||||
Tacit
|
||||
</a>
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
.footer nav:first-child a {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.footer nav li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import style from './Grid.module.css'
|
||||
|
||||
function Grid ({ children }) {
|
||||
return (
|
||||
<div className={style.grid}>{children}</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Grid
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
|
@ -7,9 +7,10 @@ function Header () {
|
|||
return (
|
||||
<header className={styles.header} data-testid='header'>
|
||||
<nav>
|
||||
<Link href='/'>Home</Link>
|
||||
<Link href='/writing'>Writing</Link>
|
||||
<Link href='/cv'>CV</Link>
|
||||
<Link href='/'>Home</Link>{', '}
|
||||
<Link href='/writing'>Writing</Link>{', '}
|
||||
<Link href='/cv'>CV</Link>{', '}
|
||||
<Link href='/about'>About</Link>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
.header nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.header a {
|
||||
text-transform: lowercase;
|
||||
.header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||
|
||||
import style from './Resume.module.css'
|
||||
|
||||
function Resume ({
|
||||
function Resume({
|
||||
competencies,
|
||||
education,
|
||||
certifications,
|
||||
|
|
@ -11,35 +11,20 @@ function Resume ({
|
|||
}) {
|
||||
return (
|
||||
<div className={style.cv}>
|
||||
<div className='sidebar'>
|
||||
<h2>Core competencies</h2>
|
||||
<ul>
|
||||
{competencies.sort().map((c, i) => (
|
||||
<li key={i}>{c}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2>Certifications</h2>
|
||||
<ul>
|
||||
{certifications.sort().map((c, i) => (
|
||||
<li key={i}>{c}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2>Languages</h2>
|
||||
<ul>
|
||||
{languages.sort().map((c, i) => (
|
||||
<li key={i}>
|
||||
{c.name} - {c.proficiency}
|
||||
<ol>
|
||||
<li><a href='#experience'>Professional experience</a>
|
||||
<ol>{experience.map(e =>
|
||||
<li key={e.position}>
|
||||
<a href={'#' + e.position}>{e.position}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2>Education history</h2>
|
||||
<p>{education}</p>
|
||||
</div>
|
||||
)}</ol></li>
|
||||
<li><a href='#competencies'>Competencies</a></li>
|
||||
<li><a href='#competencies'>Certifications</a></li>
|
||||
<li><a href='#languages'>Languages</a></li>
|
||||
<li><a href='#education'>Education</a></li>
|
||||
</ol>
|
||||
<div>
|
||||
<h2>Professional experience</h2>
|
||||
<h2 id="experience">Professional experience</h2>
|
||||
|
||||
{experience.map((exp, i) => (
|
||||
<WorkExperience
|
||||
|
|
@ -53,17 +38,45 @@ function Resume ({
|
|||
</WorkExperience>
|
||||
))}
|
||||
</div>
|
||||
<div className='sidebar'>
|
||||
<h2 id="competencies">Competencies</h2>
|
||||
<ul>
|
||||
{competencies.sort().map((c, i) => (
|
||||
<li key={i}>{c}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2 id="certifications">Certifications</h2>
|
||||
<ul>
|
||||
{certifications.sort().map((c, i) => (
|
||||
<li key={i}>{c}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2 className='languages'>Languages</h2>
|
||||
<ul>
|
||||
{languages.sort().map((c, i) => (
|
||||
<li key={i}>
|
||||
{c.name} - {c.proficiency}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2 className='education'>Education</h2>
|
||||
<p>{education}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Resume
|
||||
export default Resume;
|
||||
|
||||
function WorkExperience ({ position, employer, start, end, children }) {
|
||||
function WorkExperience({ position, employer, start, end, children }) {
|
||||
return (
|
||||
<div className={style['work-experience']}>
|
||||
<div>
|
||||
<h3>
|
||||
<h3 id={position}>
|
||||
{position}
|
||||
<br />
|
||||
<small>{employer}</small>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
.cv {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.cv > div:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cv > div:last-child {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.cv .work-experience >div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cv {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
19
src/components/StaticContentList/StaticContentList.jsx
Normal file
19
src/components/StaticContentList/StaticContentList.jsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { formatDate } from "@/lib/helpers";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function StaticContentList({ entries, urlPrefix }) {
|
||||
return (
|
||||
<table>
|
||||
<tbody>
|
||||
{entries.map((e) => (
|
||||
<tr key={e.slug}>
|
||||
<td>{!!e.attributes.pubdate && <span>{formatDate(e.attributes.pubdate)}</span>}</td>
|
||||
<td>
|
||||
<Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
|
@ -10,11 +10,11 @@ function DefaultLayout ({ children }) {
|
|||
<main className={`${style.layout}`}>
|
||||
<Head>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com' />
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin='anonymous'/>
|
||||
<link href='https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap' rel='stylesheet' />
|
||||
</Head>
|
||||
<Header />
|
||||
<article>{children}</article>
|
||||
<>{children}</>
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
.layout main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -52,11 +52,11 @@ export function getStaticEntryProps (contentPath, { params }) {
|
|||
return { props: { ...entry, attributes } }
|
||||
}
|
||||
|
||||
export function getStaticEntryListProps (contentPath, urlPrefix) {
|
||||
const fun = fs.readdirSync(contentPath, { withFileTypes: true })
|
||||
const entries = fun.map((dirent) =>
|
||||
export function getStaticEntries(contentPath) {
|
||||
const directoryItems = fs.readdirSync(contentPath, { withFileTypes: true });
|
||||
return directoryItems.map((dirent) =>
|
||||
getMarkdownEntry(`${dirent.path}/${dirent.name}`)
|
||||
).sort((a, b) => new Date(b.attributes.pubdate) - new Date(a.attributes.pubdate))
|
||||
|
||||
return { props: { entries, urlPrefix } }
|
||||
}
|
||||
).sort((a, b) =>
|
||||
new Date(b.attributes.pubdate).getTime() - new Date(a.attributes.pubdate).getTime()
|
||||
);
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ export default function Document () {
|
|||
return (
|
||||
<Html lang='en'>
|
||||
<Head>
|
||||
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.7.1.min.css' />
|
||||
<link rel="stylesheet" href="https://neat.joeldare.com/neat.css"/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
|
|
|
|||
73
src/pages/about/index.js
Normal file
73
src/pages/about/index.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import ExternalLink from "@/components/ExternalLink/ExternalLink";
|
||||
import DefaultLayout from "@/layouts/DefaultLayout/DefaultLayout";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<h1>About me</h1>
|
||||
<h2>Where to find me</h2>
|
||||
<section>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>
|
||||
<ExternalLink href='https://letterboxd.com/aaronyarbz/'>
|
||||
Letterboxd
|
||||
</ExternalLink>
|
||||
</strong>{' '}
|
||||
is a social platform for film lovers to rate, review, and discover
|
||||
movies, akin to "Goodreads for film."
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
<ExternalLink href='https://github.com/AaronJY'>
|
||||
GitHub
|
||||
</ExternalLink>
|
||||
</strong>{' '}
|
||||
is a web-based platform for version control and collaboration on
|
||||
software development projects. Find out what I've been working
|
||||
on here!
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
<ExternalLink href='https://www.linkedin.com/in/aaronjyarborough/'>
|
||||
LinkedIn
|
||||
</ExternalLink>
|
||||
</strong>
|
||||
, unfortunately. A social network for professionals.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<h2>Tech I Like</h2>
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Web Development:</strong> I primarily use Node.js with TypeScript
|
||||
(or JavaScript for smaller projects) alongside Next.js to build websites
|
||||
and applications.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Scripting:</strong> My preferred scripting languages are Python
|
||||
and JavaScript, as I'm well-versed in them and they offer extensive
|
||||
libraries that typically cover my needs.
|
||||
</li>
|
||||
<li>
|
||||
<strong>API and Backend Development:</strong> For more robust API or backend
|
||||
architecture, I often choose .NET Core with C# and ASP.NET. The strongly-typed
|
||||
nature of C# and the structured framework of ASP.NET help maintain clean and
|
||||
organised code.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Cloud Hosting:</strong> When possible, I opt for hosting on a
|
||||
DigitalOcean droplet. If more extensive cloud services are required, I usually
|
||||
opt for Google Cloud Platform (GCP), which I find more user-friendly than Azure
|
||||
or AWS. I also self-host services on shared server hosting running Ubuntu Server, typically with Hetzner.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
|
||||
)
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@ import { NextSeo } from 'next-seo'
|
|||
import Resume from '@/components/Resume/Resume'
|
||||
|
||||
export const Title = 'CV'
|
||||
export const Description = 'Read about my professional experience as a software engineer, core competencies, and certifications.'
|
||||
|
||||
function ResumePage ({
|
||||
competencies,
|
||||
|
|
@ -19,17 +18,13 @@ function ResumePage ({
|
|||
return (
|
||||
<DefaultLayout>
|
||||
<NextSeo
|
||||
title={Title} description={Description} openGraph={
|
||||
title={Title} openGraph={
|
||||
{
|
||||
Title,
|
||||
Description
|
||||
title: Title,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<section>
|
||||
<h1>{Title} 💼</h1>
|
||||
<p>{Description}</p>
|
||||
</section>
|
||||
<h1>{Title}</h1>
|
||||
<section>
|
||||
<Resume
|
||||
competencies={competencies}
|
||||
|
|
@ -52,12 +47,14 @@ export function getStaticProps () {
|
|||
|
||||
const MDConverter = new showdown.Converter()
|
||||
|
||||
// @ts-ignore
|
||||
data.experience = data.experience.map((exp) => ({
|
||||
...exp,
|
||||
desc: MDConverter.makeHtml(exp.desc)
|
||||
}))
|
||||
|
||||
return {
|
||||
// @ts-ignore
|
||||
props: { ...data }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,26 @@
|
|||
import Head from 'next/head'
|
||||
import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
|
||||
import ExternalLink from '@/components/ExternalLink/ExternalLink'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { Title as WritingTitle, Description as WritingDescription } from './writing'
|
||||
import { Title as CvTitle, Description as CvDescription } from './cv'
|
||||
import StaticContentList from '@/components/StaticContentList/StaticContentList'
|
||||
import { getStaticEntries } from '@/lib/content'
|
||||
|
||||
export default function Home () {
|
||||
export const getStaticProps = () => ({
|
||||
props: {
|
||||
postEntries: getStaticEntries("content/writing")
|
||||
}
|
||||
})
|
||||
|
||||
export default function Home({ postEntries }) {
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<Head>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
||||
<link rel='icon' href='/favicon.ico' />
|
||||
</Head>
|
||||
<h1>Hello!</h1>
|
||||
|
||||
<section>
|
||||
<h1>Hello! 👋🏻</h1>
|
||||
<p>
|
||||
I'm Aaron, a Brit living in Newcastle-upon-tyne, UK. I
|
||||
work professionally as a Software Engineer, and study
|
||||
|
|
@ -24,92 +29,13 @@ export default function Home () {
|
|||
<p>
|
||||
I current work as a Lead Consultant at Hippo Digital, working on public sector project for the Department of Education. You can find out more about my work history <Link href='/cv'>on my CV</Link>.
|
||||
</p>
|
||||
|
||||
<div className='row'>
|
||||
<div className='box'>
|
||||
<Link href='/writing' className='box-title'>{WritingTitle}</Link>
|
||||
<p className='box-text'>{WritingDescription}</p>
|
||||
<Link href='/writing' className='box-link'>Read more...</Link>
|
||||
</div>
|
||||
|
||||
<div className='box'>
|
||||
<Link href='/cv' className='box-title'>{CvTitle}</Link>
|
||||
<p className='box-text'>{CvDescription}</p>
|
||||
<Link href='/cv' className='box-link'>Read more...</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Tech I Like</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Web Development:</strong> I primarily use Node.js with TypeScript
|
||||
(or JavaScript for smaller projects) alongside Next.js to build websites
|
||||
and applications.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Scripting:</strong> My preferred scripting languages are Python
|
||||
and JavaScript, as I'm well-versed in them and they offer extensive
|
||||
libraries that typically cover my needs.
|
||||
</li>
|
||||
<li>
|
||||
<strong>API and Backend Development:</strong> For more robust API or backend
|
||||
architecture, I often choose .NET Core with C# and ASP.NET. The strongly-typed
|
||||
nature of C# and the structured framework of ASP.NET help maintain clean and
|
||||
organised code.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Cloud Hosting:</strong> When possible, I opt for hosting on a
|
||||
DigitalOcean droplet. If more extensive cloud services are required, I usually
|
||||
opt for Google Cloud Platform (GCP), which I find more user-friendly than Azure
|
||||
or AWS. I also self-host services on shared server hosting running Ubuntu Server, typically with Hetzner.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Recent posts</h2>
|
||||
<StaticContentList entries={postEntries} urlPrefix={"writing/"} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Where to find me</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>
|
||||
<ExternalLink href='https://letterboxd.com/aaronyarbz/'>
|
||||
Letterboxd
|
||||
</ExternalLink>
|
||||
</strong>{' '}
|
||||
is a social platform for film lovers to rate, review, and discover
|
||||
movies, akin to "Goodreads for film."
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
<ExternalLink href='https://github.com/AaronJY'>
|
||||
GitHub
|
||||
</ExternalLink>
|
||||
</strong>{' '}
|
||||
is a web-based platform for version control and collaboration on
|
||||
software development projects. Find out what I've been working
|
||||
on here!
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
<ExternalLink href='https://www.linkedin.com/in/aaronjyarborough/'>
|
||||
LinkedIn
|
||||
</ExternalLink>
|
||||
</strong>
|
||||
, unfortunately. A social network for professionals.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>About this site</h2>
|
||||
<p>www.aaronjy.me is a static site (i.e. a bunch of HTML, JS, CSS and image files) written in JavaScript using Next.js. Tacit is being used as a micro CSS framework, and various smaller bits of custom CSS have been applied on top.</p>
|
||||
<p>The site is hosted inside a Google Cloud Storage bucket with a load balancer sat in front of it. The load balancer is required as Cloud Storage doesn't support a) custom domains, b) HTTPS out of the box or c) a global CDN solution.</p>
|
||||
<p>One of the biggest benefits of a website made of simple static files and assets is that I can deploy it easily, almost anywhere, and for very little money.</p>
|
||||
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,33 @@
|
|||
import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { getStaticEntryListProps } from '@/lib/content'
|
||||
import { getStaticEntries } from '@/lib/content'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import { formatDate } from '@/lib/helpers'
|
||||
import StaticContentList from '@/components/StaticContentList/StaticContentList'
|
||||
|
||||
export const getStaticProps = () => getStaticEntryListProps('./content/writing', '/writing/')
|
||||
export const getStaticProps = () => ({
|
||||
props: {
|
||||
postEntries: getStaticEntries("./content/writing")
|
||||
}
|
||||
})
|
||||
|
||||
export const Title = 'Writing'
|
||||
export const Description = 'A collection of writing and musings on various topics that interest me, as well as technical writing.'
|
||||
|
||||
export default function Writing ({ entries, urlPrefix }) {
|
||||
export default function Writing ({ postEntries }) {
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<NextSeo
|
||||
title={Title}
|
||||
description={Description}
|
||||
openGraph={
|
||||
{
|
||||
Title,
|
||||
Description
|
||||
title: Title,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<section>
|
||||
<h1>{Title} ✍🏻</h1>
|
||||
<p>{Description}</p>
|
||||
</section>
|
||||
<h1>{Title}</h1>
|
||||
|
||||
<section>
|
||||
{entries.map((e) => (
|
||||
<div key={e.attributes.title}>
|
||||
<h2>
|
||||
<Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
|
||||
</h2>
|
||||
{!!e.attributes.pubdate && <p>{formatDate(e.attributes.pubdate)}</p>}
|
||||
|
||||
<p>{e.attributes.desc}</p>
|
||||
<Link href={`${urlPrefix}${e.slug}`}>Read more</Link>
|
||||
</div>
|
||||
))}
|
||||
<StaticContentList entries={postEntries} urlPrefix={'writing/'} />
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
/*
|
||||
* Typography Scale CSS
|
||||
* Generated with Type Scale Generator
|
||||
*/
|
||||
|
||||
@import url('./vars.css');
|
||||
|
||||
:root {
|
||||
--base-size: 17px;
|
||||
--scale-ratio: 1.067;
|
||||
--body-font: "Inter";
|
||||
--body-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-letter-spacing: normal;
|
||||
--body-color: var(--color-default);
|
||||
|
||||
--heading-font: var(--body-font);
|
||||
--heading-weight: 700;
|
||||
--heading-line-height: 1.25;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--base-size);
|
||||
line-height: var(--body-line-height);
|
||||
letter-spacing: var(--body-letter-spacing);
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
/* Type scale */
|
||||
.smallest { font-size: 0.878rem; }
|
||||
.caption { font-size: 0.937rem; }
|
||||
.body { font-size: 1rem; }
|
||||
h6 { font-size: 1.067rem; }
|
||||
h5 { font-size: 1.138rem; }
|
||||
h4 { font-size: 1.215rem; }
|
||||
h3 { font-size: 1.296rem; }
|
||||
h2 { font-size: 1.383rem; }
|
||||
h1 { font-size: 1.476rem; }
|
||||
|
||||
/* Headings */
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: var(--heading-weight);
|
||||
line-height: var(--heading-line-height);
|
||||
letter-spacing: var(--heading-letter-spacing);
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
@import url('./vars.css');
|
||||
@import url('./font.css');
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2vh;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
opacity: 0.2;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='360' preserveAspectRatio='none' viewBox='0 0 1440 360'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1038%26quot%3b)' fill='none'%3e%3cpath d='M -47.398109710771735%2c191 C 48.6%2c178 240.6%2c108.8 432.60189028922827%2c126 C 624.6%2c143.2 720.6%2c282.4 912.6018902892283%2c277 C 1104.6%2c271.6 1200.6%2c93.6 1392.6018902892283%2c99 C 1584.6%2c104.4 1863.12%2c292.6 1872.6018902892283%2c304 C 1882.08%2c315.4 1526.52%2c185.6 1440%2c156' stroke='rgba(122%2c 122%2c 122%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -191.9102853036337%2c280 C -95.91%2c256.8 96.09%2c173.2 288.0897146963663%2c164 C 480.09%2c154.8 576.09%2c246.8 768.0897146963663%2c234 C 960.09%2c221.2 1056.09%2c108.2 1248.0897146963662%2c100 C 1440.09%2c91.8 1689.71%2c189.6 1728.0897146963662%2c193 C 1766.47%2c196.4 1497.62%2c132.2 1440%2c117' stroke='rgba(122%2c 122%2c 122%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -851.6383122526047%2c117 C -755.64%2c157.8 -563.64%2c331.2 -371.63831225260463%2c321 C -179.64%2c310.8 -83.64%2c67.8 108.36168774739537%2c66 C 300.36%2c64.2 396.36%2c296.4 588.3616877473953%2c312 C 780.36%2c327.6 898.03%2c143.4 1068.3616877473953%2c144 C 1238.69%2c144.6 1365.67%2c280.8 1440%2c315' stroke='rgba(122%2c 122%2c 122%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1038'%3e%3crect width='1440' height='360' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 0;
|
||||
list-style: inside;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
ul li:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
article {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
article img {
|
||||
border: 1px solid var(--color-default);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--color-default);
|
||||
border-radius: 5px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
code:not(pre > code) {
|
||||
background-color: var(--color-default);
|
||||
color: var(--color-bg)
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
flex-grow: 1;
|
||||
/* border: 1px solid var(--color-default); */
|
||||
/* padding: 1.2rem; */
|
||||
display: flex;
|
||||
align-items: left;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: 0.8rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-weight: 600;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
.box-text {
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
|
||||
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
:root {
|
||||
--color-default: #00212c;
|
||||
--color-primary: #3777FF;
|
||||
--color-tertiary: grey;
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-secondary: #f2f4ff;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue