aaron/aaronjy-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: new colour scheme; refactor css

Browse source
This commit is contained in:
Aaron Yarborough 2025-01-27 18:16:07 +00:00
parent 0a3b6f1d04
commit c54ea131ba
8 changed files with 88 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.nvmrc Normal file
View file

@ -0,0 +1 @@
v23.4.0

2
.vscode/settings.json vendored
View file

@ -33,6 +33,6 @@
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[javascriptreact]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
"editor.defaultFormatter": "vscode.typescript-language-features"
}
}

5
content/pages/cv.yml
View file

@ -85,10 +85,7 @@ experience:
desc: >-
* As well as fulfilling the engineering responsibilities required by my
previous role, my responsibilities now additionally entail designing,
documenting and leading on architectural changes.As well as fulfilling the
engineering responsibilities required by my previous role, my
responsibilities now additionally entail designing, documenting and
leading on architectural changes.
documenting and leading on architectural changes.
**Skills:** ASP.NET · Angular · TypeScript · Amazon ECS · ASP.NET MVC · Kubernetes · Amazon Web Services (AWS) · Git · C# · Full-Stack Development · Web Development · JavaScript · Front-End Development · MySQL · Microsoft SQL Server · Cloud Development · NoSQL · HTML · .NET Core · Microservices · Technical Requirements · ASP.NET Core · Agile Methodologies · Google Cloud Platform (GCP) · User Interface Programming

4
src/components/Header/Header.jsx
View file

@ -7,8 +7,8 @@ function Header () {
return (
<header className={styles.header} data-testid='header'>
<nav>
<Link href='/'>Home</Link>
<Link href='/writing'>Writing</Link>
<Link href='/'>Home</Link>·
<Link href='/writing'>Writing</Link>·
<Link href='/cv'>CV</Link>
</nav>
</header>

8
src/layouts/DefaultLayout/DefaultLayout.jsx
View file

@ -3,10 +3,16 @@ import React from 'react'
import style from './DefaultLayout.module.css'
import Header from '@/components/Header/Header'
import Footer from '@/components/Footer/Footer'
import Head from 'next/head'
function DefaultLayout ({ children }) {
function DefaultLayout({ children }) {
return (
<main className={`${style.layout}`}>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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>
<Footer />

61
src/styles/font.css Normal file
View file

@ -0,0 +1,61 @@
/*
* 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);
--body-background: #FBFBFB;
--heading-font: var(--body-font);
--heading-weight: 700;
--heading-line-height: 1.25;
--heading-letter-spacing: normal;
--heading-color: #ff6b35;
}
/* 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);
background: var(--body-background);
}
/* 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);
}

25
src/styles/globals.css
View file

@ -1,9 +1,5 @@
:root {
--color-default: #1f3470;
--color-primary: #5172cf;
--color-tertiary: grey;
--color-bg: #fbfbfb;
}
@import url('./vars.css');
@import url('./font.css');
html, body {
margin: 0;
@ -12,7 +8,6 @@ html, body {
body {
position: relative;
background-color: var(--color-bg);
color: var(--color-default);
}
body::after {
@ -29,15 +24,6 @@ body::after {
z-index: -1;
}
h1, h2, h3 {
font-weight: 600;
color: var(--color-default)
}
a {
color: var(--color-primary)
}
ul {
margin-left: 0;
list-style: inside;
@ -101,10 +87,14 @@ code:not(pre > code) {
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 {
@ -115,4 +105,5 @@ code:not(pre > code) {
.row {
flex-direction: column;
}
}
}

7
src/styles/vars.css Normal file
View file

@ -0,0 +1,7 @@
:root {
--color-default: #00171F;
--color-primary: #004e89;
--color-tertiary: grey;
--color-bg: #efefd0;
--color-bg-secondary: #fefcdf;
}