Skip to content

Redesign homepage with cleaner, text-focused layout #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rambleraptor wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Redesign homepage with cleaner, text-focused layout #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/components/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,25 @@ import LinkedIn from "./icons/LinkedIn.astro";
import GitHub from "./icons/GitHub.astro";
import RSS from "./icons/RSS.astro";

const iconClass = "h-8 w-8 hover:text-slate-50 hover:fill-current";
const iconClass = "h-6 w-6 text-slate-400 transition-colors hover:text-blue-500";
---

<div
class="footer flex h-20 w-full flex-row items-center justify-center gap-8 bg-blue-300"
<footer
class="mt-16 flex w-full flex-row items-center justify-center gap-6 border-t border-slate-200 py-8"
>
<a href="https://www.twitter.com/rambleraptor">
<a href="https://www.twitter.com/rambleraptor" aria-label="Twitter">
<Twitter className={iconClass} />
</a>
<a href="https://www.github.com/rambleraptor">
<a href="https://www.github.com/rambleraptor" aria-label="GitHub">
<GitHub className={iconClass} />
</a>
<a href="https://www.letterboxd.com/rambleraptor">
<a href="https://www.letterboxd.com/rambleraptor" aria-label="Letterboxd">
<Letterboxd className={iconClass} />
</a>
<a href="https://www.linkedin.com/in/rambleraptor">
<a href="https://www.linkedin.com/in/rambleraptor" aria-label="LinkedIn">
<LinkedIn className={iconClass} />
</a>
<a href="/feed.xml">
<a href="/feed.xml" aria-label="RSS Feed">
<RSS className={iconClass} />
</a>
</div>
</footer>
30 changes: 23 additions & 7 deletions src/components/Navbar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,39 @@
---

<nav
class="container relative mx-auto flex flex-wrap justify-between justify-between gap-4 p-3 pt-6 md:p-6"
class="container relative mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-4 px-6 py-8 md:px-8"
>
<a class="text-2xl font-extrabold capitalize" href="/">Alex Stephen</a>
<a class="text-xl font-bold text-slate-900 hover:text-blue-500" href="/"
>Alex Stephen</a
>

<ul class="relative flex w-auto flex-row items-center gap-6 p-0">
<ul class="relative flex w-auto flex-row items-center gap-8 p-0">
<li>
<a class="mr-2" href="/writing">Writing</a>
<a
class="text-slate-600 transition-colors hover:text-slate-900"
href="/writing">Writing</a
>
</li>
<li>
<a class="mr-2" href="/talks">Talks</a>
<a
class="text-slate-600 transition-colors hover:text-slate-900"
href="/talks">Talks</a
>
</li>
</ul>
</nav>

<style>
nav a:link {
nav a {
text-decoration: none;
font-weight: 300;
font-weight: 500;
}

nav ul {
list-style: none;
}

nav li {
margin: 0;
}
</style>
45 changes: 38 additions & 7 deletions src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,48 @@ if (frontmatter != null) {
<!doctype html>
<html lang="en">
<Head title={realTitle} description={realDescription} />
<body>
<div class="border-8 border-solid border-blue-500"></div>
<body class="bg-white">
<div class="border-t-4 border-solid border-blue-500"></div>
<Navbar />
<div class="container prose prose-lg mx-auto pb-10 pl-3 pr-3">
<div><slot /></div>
<div class="container mx-auto max-w-3xl px-6 py-12 md:px-8 md:py-16">
<div class="prose prose-lg prose-slate max-w-none">
<slot />
</div>
</div>
<Footer />
<style>
/* Tailwind is really hard to use, so I have to do this. */
.hero-image {
margin-top: 0 !important;
.prose h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: #0f172a;
}

.prose h2 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 1rem;
color: #1e293b;
}

.prose p {
font-size: 1.125rem;
line-height: 1.75;
margin-bottom: 1.5rem;
color: #475569;
}

.prose a {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
}

.prose a:hover {
color: #2563eb;
text-decoration: underline;
}

.list {
Expand Down
25 changes: 14 additions & 11 deletions src/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@ title: Alex Stephen
description: About Alex Stephen
---

import { Image } from "astro:assets";
import meImage from "../images/me.jpg";
# Alex Stephen

<Image src={meImage} class="img-fluid hero-image" alt="Image of me" />
I'm a software engineer building data systems and tools.

# Hi! I'm Alex!
Currently working on [BigQuery](https://cloud.google.com/bigquery) at Google in Seattle.

I'm a software engineer and all-around millennial from the Mitten, currently in Seattle.
## Work

Right now, I'm working at [Google](https://www.google.com) working on BigQuery!
I'm currently at **Google** working on BigQuery, helping build one of the world's largest data warehouses.

Before that, I was building declarative tools and code generators over at
[Google](https://www.google.com), data pipelines at
[Palantir](https://www.palantir.com) and Insurance software at [Rippling](https://www.rippling.com).
Previously, I built declarative tools and code generators at Google, designed data pipelines at Palantir, and worked on insurance software at Rippling.

Before Palantir, I was at the [University of Michigan](https://www.umich.edu) (Go Blue!).
## Background

You can find me spewing nonsense over on the bird app [@rambleraptor](https://www.twitter.com/rambleraptor) and over on [GitHub](https://www.github.com/rambleraptor). Or you can always [email me](mailto:[email protected]).
I studied at the University of Michigan (Go Blue!) before moving to the Bay Area and eventually Seattle.

I write about pop culture, technology, and business through the lens of data and storytelling.

## Connect

Find me on [Twitter](https://www.twitter.com/rambleraptor), [GitHub](https://www.github.com/rambleraptor), or [email me](mailto:[email protected]).