Cayden Website 2.0: Rewrite with t3code & hand
This commit is contained in:
Cayden Schwechten
parent
75a0e8f5fc
commit
243527af9f
34 changed files with 1652 additions and 1001 deletions
|
|
@ -1,31 +0,0 @@
|
|||
import Link from "next/link"
|
||||
import {ArrowLeftIcon} from "@heroicons/react/24/solid"
|
||||
import {getArticleData, getSortedArticles} from "@/lib/articles";
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const articles = getSortedArticles();
|
||||
|
||||
return articles.map((article) => ({
|
||||
slug: article.id,
|
||||
}));
|
||||
}
|
||||
|
||||
const Article = async ({params}: { params: Promise<{ slug: string }> }) => {
|
||||
const {slug} = await params;
|
||||
const articleData = await getArticleData(slug);
|
||||
|
||||
return (
|
||||
<section className={"mx-auto w-10/12 md:w-1/2 mt-20 flex flex-col gap-5"}>
|
||||
<div className={"flex justify-between font-poppins"}>
|
||||
<Link href={"/blog"} className={"flex flex-row gap-1 place-items-center"}>
|
||||
<ArrowLeftIcon width={20}/>
|
||||
<p>blog homepage</p>
|
||||
</Link>
|
||||
<p>{articleData.date.toString()}</p>
|
||||
</div>
|
||||
<article className={"article"} dangerouslySetInnerHTML={{__html: articleData.contentHtml}}/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Article;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import {getCategorizedArticles} from "@/lib/articles";
|
||||
import ArticleItemList from "@/components/ArticleListItem";
|
||||
|
||||
export default async function BlogPage() {
|
||||
const articles = getCategorizedArticles()
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20"}>
|
||||
<header className={"font-cormorantGaramond font-light text-6xl text-center"}>
|
||||
<h1 className={'text-nord-14'}>Blog & thoughts</h1>
|
||||
</header>
|
||||
<section className={"md:grid md:grid-cols-2 flex flex-col gap-10"}>
|
||||
{articles != null && Object.keys(articles).map((article) => (
|
||||
<ArticleItemList category={article} articles={articles[article]} key={article}/>
|
||||
))}
|
||||
</section>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export default async function Contact() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen py-2">
|
||||
<h1 className="text-4xl font-bold">Contact page, wip.</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
118
app/globals.css
118
app/globals.css
|
|
@ -1,84 +1,74 @@
|
|||
@import "tailwindcss";
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme inline {
|
||||
--font-cormorantGaramond: "Cormorant_Garamond", "sans-serif";
|
||||
--font-poppins: "Poppins", "sans-serif";
|
||||
|
||||
/* Nord: Polar Night */
|
||||
--color-nord-0: #2e3440;
|
||||
--color-nord-1: #3b4252;
|
||||
--color-nord-2: #4D535F;
|
||||
--color-nord-3: #434c5e;
|
||||
|
||||
/* Nord: Snow Storm */
|
||||
--color-nord-4: #d8dee9;
|
||||
--color-nord-5: #e5e9f0;
|
||||
--color-nord-6: #eceff4;
|
||||
|
||||
/* Nord: Frost */
|
||||
--color-nord-7: #8fbcbb;
|
||||
--color-nord-8: #88c0d0;
|
||||
--color-nord-9: #81a1c1;
|
||||
--color-nord-10: #5e81ac;
|
||||
|
||||
/* Nord: Aurora */
|
||||
--color-nord-11: #bf616a;
|
||||
--color-nord-12: #d08770;
|
||||
--color-nord-13: #ebcb8b;
|
||||
--color-nord-14: #a3be8c;
|
||||
--color-nord-15: #b48ead;
|
||||
|
||||
/* Optional semantic aliases */
|
||||
--color-polar-night-dark: #2e3440;
|
||||
--color-polar-night: #3b4252;
|
||||
--color-polar-night-light: #434c5e;
|
||||
--color-polar-night-lighter: #4c566a;
|
||||
|
||||
--color-snow-storm-dark: #d8dee9;
|
||||
--color-snow-storm: #e5e9f0;
|
||||
--color-snow-storm-light: #eceff4;
|
||||
|
||||
--color-frost-green: #8fbcbb;
|
||||
--color-frost-cyan: #88c0d0;
|
||||
--color-frost-blue: #81a1c1;
|
||||
--color-frost-deep-blue: #5e81ac;
|
||||
|
||||
--color-aurora-red: #bf616a;
|
||||
--color-aurora-orange: #d08770;
|
||||
--color-aurora-yellow: #ebcb8b;
|
||||
--color-aurora-green: #a3be8c;
|
||||
--color-aurora-purple: #b48ead;
|
||||
--font-display:
|
||||
var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono:
|
||||
var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
.article {
|
||||
@apply flex flex-col gap-3 font-poppins text-lg tracking-wide mb-20
|
||||
@theme {
|
||||
--color-obsidian: #040807;
|
||||
--color-aurora: #34d399;
|
||||
--color-crest: #d1fae5;
|
||||
--color-ink: #f2faf6;
|
||||
}
|
||||
|
||||
.article > h1 {
|
||||
@apply text-4xl font-cormorantGaramond text-center tracking-tight;
|
||||
@utility container-page {
|
||||
@apply mx-auto max-w-5xl px-6;
|
||||
}
|
||||
|
||||
.article > h2 {
|
||||
@apply text-3xl font-cormorantGaramond text-center tracking-tight;
|
||||
@utility panel {
|
||||
@apply border border-white/12 bg-obsidian/55 backdrop-blur-md;
|
||||
}
|
||||
|
||||
.article > ol {
|
||||
@apply list-decimal flex flex-col mx-10 gap-2;
|
||||
@utility btn-primary {
|
||||
@apply border border-aurora bg-aurora px-5 py-2.5 text-obsidian transition-colors hover:border-crest hover:bg-crest;
|
||||
}
|
||||
|
||||
.article > ul {
|
||||
@apply list-disc flex flex-col mx-10 gap-2;
|
||||
@utility btn-ghost {
|
||||
@apply border border-white/20 bg-obsidian/45 px-5 py-2.5 text-ink backdrop-blur-md transition-colors hover:border-aurora hover:text-aurora;
|
||||
}
|
||||
|
||||
.article > pre {
|
||||
@apply bg-neutral-950 text-neutral-50 p-5 overflow-scroll;
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 4rem;
|
||||
}
|
||||
|
||||
.article > blockquote {
|
||||
@apply pl-5 italic border-l-2 border-neutral-600;
|
||||
::selection {
|
||||
background: var(--color-aurora);
|
||||
color: var(--color-obsidian);
|
||||
}
|
||||
|
||||
.article > p > img {
|
||||
@apply w-1/2 mx-auto;
|
||||
:focus-visible {
|
||||
outline: 1px solid var(--color-aurora);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (scripting: enabled) {
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition:
|
||||
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition-delay: var(--reveal-delay, 0ms);
|
||||
}
|
||||
|
||||
.reveal[data-visible='true'] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
.reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,53 @@
|
|||
import React from "react";
|
||||
import type {Metadata} from "next";
|
||||
import {Cormorant_Garamond, Poppins} from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Header from "@/components/layout/layout-header";
|
||||
import type { ReactNode } from 'react';
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import { Inter, JetBrains_Mono, Space_Grotesk } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import Header from '@/components/layout/layout-header';
|
||||
import Footer from '@/components/layout/layout-footer';
|
||||
import PageBackground from '@/components/layout/page-background';
|
||||
|
||||
const cormorantGaramond = Cormorant_Garamond({
|
||||
subsets: ['latin'],
|
||||
variable: "--font-cormorantGaramond",
|
||||
weight: ['400']
|
||||
})
|
||||
const spaceGrotesk = Space_Grotesk({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-space-grotesk',
|
||||
});
|
||||
|
||||
const poppins = Poppins({
|
||||
subsets: ['latin'],
|
||||
variable: "--font-poppins",
|
||||
weight: ['400', '600']
|
||||
})
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-inter',
|
||||
});
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-jetbrains-mono',
|
||||
weight: ['400', '500'],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "sh ~./caydencodes.sh",
|
||||
description: "Come and see what I'm all about.",
|
||||
title: 'Cayden — Web Developer',
|
||||
description:
|
||||
'Web developer building clinical interfaces and fleet software.',
|
||||
};
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
export const viewport: Viewport = {
|
||||
themeColor: '#040807',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${cormorantGaramond.variable} ${poppins.variable} bg-neutral-100 h-full antialiased`}
|
||||
>
|
||||
<body
|
||||
className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">
|
||||
<Header/>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} h-full bg-obsidian antialiased`}
|
||||
>
|
||||
<body className="relative isolate flex min-h-full flex-col font-sans text-ink">
|
||||
<PageBackground />
|
||||
<Header />
|
||||
<div className="flex-1">{children}</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
106
app/page.tsx
106
app/page.tsx
|
|
@ -1,93 +1,15 @@
|
|||
import React from "react";
|
||||
import Hero from '@/components/sections/hero';
|
||||
import Projects from '@/components/sections/projects';
|
||||
import Feats from '@/components/sections/feats';
|
||||
import Contact from '@/components/sections/contact';
|
||||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<main className="mx-auto mb-20 mt-20 flex w-11/12 max-w-4xl flex-col gap-12 md:w-2/3">
|
||||
<section className="flex flex-col items-center gap-8 text-center font-cormorantGaramond">
|
||||
<img
|
||||
src="/cayden-portrait.png"
|
||||
alt="Portrait of Cayden"
|
||||
className="h-40 w-40 rounded-full object-cover shadow-lg"
|
||||
/>
|
||||
|
||||
<header className="flex flex-col items-center gap-4">
|
||||
<h1 className="text-5xl font-light leading-tight md:text-6xl">
|
||||
Howdy, I'm Cayden.
|
||||
</h1>
|
||||
|
||||
<p className="font-poppins text-2xl font-light leading-tight opacity-80">
|
||||
Web Developer & Focus-Driven Leader
|
||||
</p>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-wrap items-center justify-center gap-4 font-poppins text-sm tracking-wider text-gray-600 sm:gap-6 sm:text-base md:gap-8">
|
||||
{["JavaScript", "TypeScript", "Python", "Go", "React", "Next.js"].map((tech, index, arr) => (
|
||||
<React.Fragment key={tech}>
|
||||
<span className="cursor-default text-snow-storm font-medium transition-colors duration-200 hover:text-nord-12">
|
||||
{tech}
|
||||
</span>
|
||||
{index < arr.length - 1 && (
|
||||
<span className="select-none text-snow-storm">•</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-6 font-cormorantGaramond text-lg leading-8">
|
||||
<p>
|
||||
Nice to meet you! I am a Web Developer who specializes in architecting robust, user-centric
|
||||
applications, transforming complex logic into seamless digital experiences.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
My work is driven by a commitment to meeting complex demands in specialized medical markets. With a
|
||||
strong focus on ergonomics, UI/UX optimization, and precision within fast-paced clinical
|
||||
environments, I engineer comprehensive EHR solutions—ranging from portable medical cart workstations
|
||||
to pioneering tracking and fleet management systems.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Beyond technical architecture, my work is deeply informed by an extensive background in organizational logistics. Grounded by foundational training in nationally recognized civic leadership programs, I previously directed one of the largest interest-driven communities in the Southern United States. In this capacity, I spearheaded large-scale event production—routinely managing gatherings of up to 250 attendees and coordinating cross-country travel for live entertainers. I have additionally facilitated strategic talent placements in commercial media, negotiated partnerships with major global streaming networks, and regularly presented as a panelist at large-scale conventions.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This focus-driven leadership approach directly translates to my engineering philosophy. Whether orchestrating high-concurrency state management systems, leading a project through rapid architectural shifts, or aligning a development team to meet ambitious goals, I am dedicated to executing with precision and creating software that is modern, accessible, and highly functional.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-10 rounded-2xl bg-nord-2 p-8 font-cormorantGaramond text-white shadow-md">
|
||||
<h2 className="mb-6 border-b border-white/20 pb-3 text-2xl font-semibold tracking-wide">
|
||||
Focus Areas
|
||||
</h2>
|
||||
|
||||
<ul className="grid gap-4 text-lg md:grid-cols-2">
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
||||
Clinical UI/UX & Ergonomics
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
||||
EHR & Fleet Architecture
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
||||
High-Concurrency Infrastructure
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
||||
Large-Scale Event Logistics
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
||||
Strategic Team Alignment
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
||||
Community State Management
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Hero />
|
||||
<Projects />
|
||||
<Feats />
|
||||
<Contact />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue