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

Initial commit

Browse source
This commit is contained in:
Aaron Yarborough 2024-03-04 15:50:07 +00:00
parent 1415777d5b
commit 0483ec0b93
11 changed files with 218 additions and 435 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"next": "14.1.1", "next": "14.1.1",
"next-seo": "^6.5.0",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"
}, },
@ -2810,6 +2811,16 @@
} }
} }
}, },
"node_modules/next-seo": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/next-seo/-/next-seo-6.5.0.tgz",
"integrity": "sha512-MfzUeWTN/x/rsKp/1n0213eojO97lIl0unxqbeCY+6pAucViHDA8GSLRRcXpgjsSmBxfCFdfpu7LXbt4ANQoNQ==",
"peerDependencies": {
"next": "^8.1.1-canary.54 || >=9.0.0",
"react": ">=16.0.0",
"react-dom": ">=16.0.0"
}
},
"node_modules/object-assign": { "node_modules/object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

5
package.json
View file

@ -9,9 +9,10 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"next": "14.1.1",
"next-seo": "^6.5.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18"
"next": "14.1.1"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^8", "eslint": "^8",

27
src/components/ExternalLink.jsx Normal file
View file

@ -0,0 +1,27 @@
import React from "react";
function ExternalLink({
href,
rel = "nofollow noopener",
children,
target = "_blank",
}) {
return (
<>
<a href={href} rel={rel} target={target}>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{ display: "inline", width: "1rem", marginRight: "0.25rem"}}
>
<g>
<path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z" />
</g>
</svg>
{children}
</a>
</>
);
}
export default ExternalLink;

45
src/components/Footer.jsx Normal file
View file

@ -0,0 +1,45 @@
import React from "react";
function Footer() {
return (
<footer>
<nav>
<ul>
<li>
<a href="#">back to top</a>
</li>
<li>
<a href="mailto:me@aaronjy.me">send me an email</a>
</li>
</ul>
</nav>
<nav>
<ul>
<li>
<small>
2024 Aaron Yarborough, made with{" "}
<a
target="_blank"
rel="nofollow noopener"
href="https://nextjs.org/"
>
Next.js
</a>{" "}
and{" "}
<a
target="_blank"
rel="nofollow noopener"
href="https://yegor256.github.io/tacit/"
>
Tacit
</a>
</small>
</li>
</ul>
</nav>
</footer>
);
}
export default Footer;

21
src/components/Header.jsx Normal file
View file

@ -0,0 +1,21 @@
import Link from "next/link";
import React from "react";
function Header() {
return (
<header>
<nav>
<ul>
<li>
<Link href={"/"}>home</Link>
</li>
<li>
<Link href={"/writing"}>writing</Link>
</li>
</ul>
</nav>
</header>
);
}
export default Header;

12
src/pages/_app.js
View file

@ -1,5 +1,15 @@
import "@/styles/tacit-css-1.7.1.min.css";
import "@/styles/globals.css"; import "@/styles/globals.css";
import { Merriweather } from "next/font/google";
import { DefaultSeo } from "next-seo";
const merriweather = Merriweather({ subsets: ["latin"], weight: [ "400", "700" ]});
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
return <Component {...pageProps} />; return <main className={merriweather.className}>
<DefaultSeo defaultTitle="Aaron Yarborough" titleTemplate="%s | Aaron Yarborough"/>
<Component {...pageProps} />
</main>
} }

173
src/pages/index.js
View file

@ -1,114 +1,93 @@
import Head from "next/head"; import Head from "next/head";
import Image from "next/image"; import Footer from "@/components/Footer";
import { Inter } from "next/font/google"; import Header from "@/components/Header";
import styles from "@/styles/Home.module.css"; import ExternalLink from "@/components/ExternalLink";
const inter = Inter({ subsets: ["latin"] });
export default function Home() { export default function Home() {
return ( return (
<> <>
<Head> <Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className={`${styles.main} ${inter.className}`}>
<div className={styles.description}>
<p>
Get started by editing&nbsp;
<code className={styles.code}>src/pages/index.js</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority
/>
</a>
</div>
</div>
<div className={styles.center}> <Header />
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
<div className={styles.grid}> <section>
<a <h1>Hello!</h1>
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" </section>
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Docs <span>-&gt;</span>
</h2>
<p>
Find in-depth information about Next.js features and&nbsp;API.
</p>
</a>
<a <section>
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" <p>
className={styles.card} I&apos;m Aaron. I&apos;m a Brit living in Newcastle-upon-tyne,
target="_blank" UK. I work professionally as a Software Engineer and Tutor, and study
rel="noopener noreferrer" languages in my spare time.
> </p>
<h2> <p>
Learn <span>-&gt;</span> This is my little corner of the web! I&apos;ve always had a terrible
</h2> habit of &apos;lurking&apos; online; I barely interact with the
<p> content I consume, and you&apos;ll rarely if ever catch me posting or
Learn about Next.js in an interactive course with&nbsp;quizzes! commenting on something. That said, this little site endeavours to
</p> pull me by my ankles out of the weeds in the great digital park we
</a> find ourselves, and encourage me to share a bit more about myself
online.
</p>
</section>
<a <section>
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" <h2>Where to find me</h2>
className={styles.card} <p>
target="_blank" I&apos;m not a massive fan of social media, and prefer to keep my
rel="noopener noreferrer" digital footprint as small as possible. That said, you can find me in
> the following places!
<h2> </p>
Templates <span>-&gt;</span>
</h2>
<p>
Discover and deploy boilerplate example Next.js&nbsp;projects.
</p>
</a>
<a <p>
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" <strong>Letterboxd</strong> is a social platform for film lovers to
className={styles.card} rate, review, and discover movies, akin to &quot;Goodreads for
target="_blank" film.&quot;
rel="noopener noreferrer" </p>
> <p>
<h2> <ExternalLink href="https://letterboxd.com/aaronyarbz/">
Deploy <span>-&gt;</span> See what I&apos;ve watched recently.
</h2> </ExternalLink>
<p> </p>
Instantly deploy your Next.js site to a shareable URL
with&nbsp;Vercel. <p>
</p> <strong>GitHub</strong> is a web-based platform for version control
</a> and collaboration on software development projects. Find out what
</div> I&apos;ve been working on here!
</main> </p>
<p>
<ExternalLink href="https://github.com/AaronJY">
Check out what I&apos;ve been working on.
</ExternalLink>
</p>
<p>
<strong>LinkedIn</strong> is possibly the <i>worst</i> social network.
Specifically for professional stuff, I&apos;m only on here because I
have to be 😩
</p>
<p>
<ExternalLink href="https://www.linkedin.com/in/aaronjyarborough/">
Be creepy and stalk me on LinkedIn.
</ExternalLink>
</p>
<p>
<strong>Yarbz Tutoring</strong> is my tutoring site. You can read a
bit more about my tutoring and general software develpment experience,
and book a class if it suits you.
</p>
<p>
<ExternalLink href="https://tutoring.yarbz.digital">
Read more about my tutoring side-gig.
</ExternalLink>
</p>
</section>
<Footer />
</> </>
); );
} }

17
src/pages/writing/index.js Normal file
View file

@ -0,0 +1,17 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
export default function Writing() {
return (
<>
<Header />
<section>
<h1>Writing</h1>
</section>
<section>
<i>Nothing to see here yet!</i>
</section>
<Footer/>
</>
);
}

231
src/styles/Home.module.css
View file

@ -1,229 +1,4 @@
.main { .heading {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
}
.description {
display: inherit;
justify-content: inherit;
align-items: inherit;
font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
font-family: var(--font-mono);
}
.description a {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.description p {
position: relative;
margin: 0;
padding: 1rem;
background-color: rgba(var(--callout-rgb), 0.5);
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
border-radius: var(--border-radius);
}
.code {
font-weight: 700;
font-family: var(--font-mono);
}
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(25%, auto));
max-width: var(--max-width);
width: 100%;
}
.card {
padding: 1rem 1.2rem;
border-radius: var(--border-radius);
background: rgba(var(--card-rgb), 0);
border: 1px solid rgba(var(--card-border-rgb), 0);
transition: background 200ms, border 200ms;
}
.card span {
display: inline-block;
transition: transform 200ms;
}
.card h2 {
font-weight: 600;
margin-bottom: 0.7rem;
}
.card p {
margin: 0;
opacity: 0.6;
font-size: 0.9rem;
line-height: 1.5;
max-width: 30ch;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 4rem 0;
}
.center::before {
background: var(--secondary-glow);
border-radius: 50%;
width: 480px;
height: 360px;
margin-left: -400px;
}
.center::after {
background: var(--primary-glow);
width: 240px;
height: 180px;
z-index: -1;
}
.center::before,
.center::after {
content: "";
left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
}
.logo {
position: relative;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.card:hover {
background: rgba(var(--card-rgb), 0.1);
border: 1px solid rgba(var(--card-border-rgb), 0.15);
}
.card:hover span {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion) {
.card:hover span {
transform: none;
}
}
/* Mobile */
@media (max-width: 700px) {
.content {
padding: 4rem;
}
.grid {
grid-template-columns: 1fr;
margin-bottom: 120px;
max-width: 320px;
text-align: center; text-align: center;
} margin: 50px 0px;
}
.card {
padding: 1rem 2.5rem;
}
.card h2 {
margin-bottom: 0.5rem;
}
.center {
padding: 8rem 0 6rem;
}
.center::before {
transform: none;
height: 300px;
}
.description {
font-size: 0.8rem;
}
.description a {
padding: 1rem;
}
.description p,
.description div {
display: flex;
justify-content: center;
position: fixed;
width: 100%;
}
.description p {
align-items: center;
inset: 0 0 auto;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
background: linear-gradient(
to bottom,
rgba(var(--background-start-rgb), 1),
rgba(var(--callout-rgb), 0.5)
);
background-clip: padding-box;
backdrop-filter: blur(24px);
}
.description div {
align-items: flex-end;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
background: linear-gradient(
to bottom,
transparent 0%,
rgb(var(--background-end-rgb)) 40%
);
z-index: 1;
}
}
/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
.grid {
grid-template-columns: repeat(2, 50%);
}
}
@media (prefers-color-scheme: dark) {
.vercelLogo {
filter: invert(1);
}
.logo {
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
}
}
@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}

110
src/styles/globals.css
View file

@ -1,107 +1,3 @@
:root { h1 {
--max-width: 1100px; margin-bottom: 70px;
--border-radius: 12px; }
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(
to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3)
);
--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(
#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80
);
--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}

1
src/styles/tacit-css-1.7.1.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long