alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

polishing pass

Browse Source
This commit is contained in:
Alex Lebens
2024-08-23 20:46:46 -05:00
parent ad88da00e6
commit b8efef1a00
15 changed files with 19 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -23,4 +23,5 @@ pnpm-debug.log*
# jetbrains setting folder
.idea/
# vscode workspace
site-profile.code-workspace

2
Dockerfile
View File

@@ -1,6 +1,6 @@
FROM node:20.16.0-alpine3.20 AS base
LABEL version="0.1.7"
LABEL version="0.2.0"
LABEL description="Astro based website to use as a profile"
ENV PNPM_HOME="/pnpm"

1
astro.config.mjs
View File

@@ -2,7 +2,6 @@ import { defineConfig } from 'astro/config';
import node from "@astrojs/node";
// https://astro.build/config
export default defineConfig({
output: "hybrid",
adapter: node({

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "site-profile",
"type": "module",
"version": "0.1.7",
"version": "0.2.0",
"scripts": {
"dev": "astro dev",
"start": "astro dev",

1
src/components/CallToAction.astro
View File

@@ -32,7 +32,6 @@ const { href } = Astro.props;
}
}
/* Overlay for hover effects. */
a::after {
content: '';
position: absolute;

1
src/components/Footer.astro
View File

@@ -16,6 +16,7 @@ const currentYear = new Date().getFullYear();
<a href="https://www.linkedin.com/in/alexanderlebens"> LinkedIn</a>
</p>
</footer>
<style>
footer {
display: flex;

3
src/components/Grid.astro
View File

@@ -24,7 +24,6 @@ const { variant } = Astro.props;
gap: 1.5rem;
}
/* If last row contains only one item, make it span both columns. */
.grid.small > :global(:last-child:nth-child(odd)) {
grid-column: 1 / 3;
}
@@ -40,12 +39,10 @@ const { variant } = Astro.props;
padding-bottom: var(--row-offset);
}
/* Shift first item in each row vertically to create staggered effect. */
.grid.offset > :global(:nth-child(odd)) {
transform: translateY(var(--row-offset));
}
/* If last row contains only one item, display it in the second column. */
.grid.offset > :global(:last-child:nth-child(odd)) {
grid-column: 2 / 3;
transform: none;

4
src/components/MainHead.astro
View File

@@ -7,7 +7,7 @@ interface Props {
}
const {
title = 'Alex Lebens: Personal Site',
title = 'Alex Lebens',
description = 'The personal site of Alex Lebens',
} = Astro.props;
---
@@ -26,7 +26,6 @@ const {
rel="stylesheet"
/>
<script is:inline>
// This code is inlined in the head to make dark mode instant & blocking.
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
@@ -37,7 +36,6 @@ const {
document.documentElement.classList[isDark ? 'add' : 'remove']('theme-dark');
if (typeof localStorage !== 'undefined') {
// Watch the document element and persist user preference when it changes.
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('theme-dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');

10
src/components/Nav.astro
View File

@@ -3,17 +3,15 @@ import Icon from './Icon.astro';
import ThemeToggle from './ThemeToggle.astro';
import type { iconPaths } from './IconPaths';
/** Main menu items */
const textLinks: { label: string; href: string }[] = [
{ label: 'Home', href: '/' },
{ label: 'Work', href: '/work/' },
{ label: 'About', href: '/about/' },
];
/** Icon links to social media — edit these with links to your profiles! */
const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[] = [
{ label: 'GitHub', href: 'https://github.com/alexlebens', icon: 'github-logo' },
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/alexanderlebens', icon: 'codepen-logo' },
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/alexanderlebens', icon: 'linkedin-logo' },
];
---
@@ -117,26 +115,20 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
constructor() {
super();
// Inject menu toggle button when JS runs.
this.appendChild(this.querySelector('template')!.content.cloneNode(true));
const btn = this.querySelector('button')!;
// Hide menu (shown by default to support no-JS browsers).
const menu = document.getElementById('menu-content')!;
menu.hidden = true;
// Add "menu-content" class in JS to avoid covering content in non-JS browsers.
menu.classList.add('menu-content');
/** Set whether the menu is currently expanded or collapsed. */
const setExpanded = (expand: boolean) => {
btn.setAttribute('aria-expanded', expand ? 'true' : 'false');
menu.hidden = !expand;
};
// Toggle menu visibility when the menu button is clicked.
btn.addEventListener('click', () => setExpanded(menu.hidden));
// Hide menu button for large screens.
const handleViewports = (e: MediaQueryList | MediaQueryListEvent) => {
setExpanded(e.matches);
btn.hidden = e.matches;

3
src/components/ThemeToggle.astro
View File

@@ -74,16 +74,13 @@ import Icon from './Icon.astro';
const button = this.querySelector('button')!;
/** Set the theme to dark/light mode. */
const setTheme = (dark: boolean) => {
document.documentElement.classList[dark ? 'add' : 'remove']('theme-dark');
button.setAttribute('aria-pressed', String(dark));
};
// Toggle the theme when a user clicks the button.
button.addEventListener('click', () => setTheme(!this.isDark()));
// Initialize button state to reflect current theme.
setTheme(this.isDark());
}

0
src/content/work/nested/duvet-genius.md → src/content/work/duvet-genius.md
View File

31
src/layouts/BaseLayout.astro
View File

@@ -1,8 +1,4 @@
---
// Learn about using Astro layouts:
// https://docs.astro.build/en/core-concepts/layouts/
// Component Imports
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
import Footer from '../components/Footer.astro';
@@ -27,7 +23,6 @@ const { title, description } = Astro.props;
</div>
<script>
// Add “loaded” class once the document has completely loaded.
addEventListener('load', () => document.documentElement.classList.add('loaded'));
</script>
@@ -54,13 +49,12 @@ const { title, description } = Astro.props;
--bg-blend-mode: lighten;
}
/* These backgrounds are displayed below the fold, so we lazy load them
once the `.loaded` class has been set. */
:root.loaded {
--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-light-800w.jpg');
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-800w.jpg');
--bg-image-footer: url('/assets/backgrounds/bg-footer-light-800w.jpg');
}
:root.loaded.theme-dark {
--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-800w.jpg');
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-800w.jpg');
@@ -72,6 +66,7 @@ const { title, description } = Astro.props;
--bg-scale: 1;
--bg-image-main: url('/assets/backgrounds/bg-main-light-1440w.jpg');
}
:root.theme-dark {
--bg-image-main: url('/assets/backgrounds/bg-main-dark-1440w.jpg');
}
@@ -81,6 +76,7 @@ const { title, description } = Astro.props;
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-1440w.jpg');
--bg-image-footer: url('/assets/backgrounds/bg-footer-light-1440w.jpg');
}
:root.loaded.theme-dark {
--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-1440w.jpg');
--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-1440w.jpg');
@@ -92,21 +88,20 @@ const { title, description } = Astro.props;
min-height: 100%;
isolation: isolate;
background:
/*noise*/
url('/assets/backgrounds/noise.png') top center/220px repeat,
/*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
/*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
/*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
/*base*/ var(--gray-999);
background-blend-mode: /*noise*/
var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
var(--gray-999);
background-blend-mode:
overlay,
/*footer*/ var(--bg-blend-mode),
/*header1*/ var(--bg-svg-blend-mode),
/*header2*/ normal,
/*base*/ normal;
var(--bg-blend-mode),
var(--bg-svg-blend-mode),
normal,
normal;
}
@media (forced-colors: active) {
/* Deactivate custom backgrounds for high contrast users. */
.backgrounds {
background: none;
background-blend-mode: none;

11
src/pages/index.astro
View File

@@ -1,10 +1,8 @@
---
import { getCollection } from 'astro:content';
// Layout import — provides basic page elements: <head>, <nav>, <footer> etc.
import BaseLayout from '../layouts/BaseLayout.astro';
// Component Imports
import CallToAction from '../components/CallToAction.astro';
import Grid from '../components/Grid.astro';
import Hero from '../components/Hero.astro';
@@ -12,17 +10,12 @@ import Icon from '../components/Icon.astro';
import Pill from '../components/Pill.astro';
import PortfolioPreview from '../components/PortfolioPreview.astro';
// Page section components
import ContactCTA from '../components/ContactCTA.astro';
import Skills from '../components/Skills.astro';
// Content Fetching: List four most recent work projects
const projects = (await getCollection('work'))
.sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf())
.slice(0, 4);
// Full Astro Component Syntax:
// https://docs.astro.build/basics/astro-components/
---
<BaseLayout>
@@ -147,8 +140,6 @@ const projects = (await getCollection('work'))
}
}
/* ====================================================== */
.section {
display: grid;
gap: 2rem;
@@ -228,8 +219,6 @@ const projects = (await getCollection('work'))
}
}
/* ====================================================== */
.mention-card {
display: flex;
height: 7rem;

3
src/pages/work/[...slug].astro
View File

@@ -12,9 +12,6 @@ interface Props {
entry: CollectionEntry<'work'>;
}
// This is a dynamic route that generates a page for every Markdown file in src/content/
// Read more about dynamic routes and this `getStaticPaths` function in the Astro docs:
// https://docs.astro.build/en/core-concepts/routing/#dynamic-routes
export async function getStaticPaths() {
const work = await getCollection('work');
return work.map((entry) => ({

9
src/styles/global.css
View File

@@ -1,6 +1,4 @@
/* Global variables */
:root {
/* Colors */
--gray-0: #090b11;
--gray-50: #141925;
--gray-100: #283044;
@@ -25,7 +23,6 @@
--link-color: var(--accent-regular);
/* Gradients */
--gradient-stop-1: var(--accent-light);
--gradient-stop-2: var(--accent-regular);
--gradient-stop-3: var(--accent-dark);
@@ -44,7 +41,6 @@
);
--gradient-stroke: linear-gradient(180deg, var(--gray-900), var(--gray-700));
/* Shadows */
--shadow-sm: 0px 6px 3px rgba(9, 11, 17, 0.01), 0px 4px 2px rgba(9, 11, 17, 0.01),
0px 2px 2px rgba(9, 11, 17, 0.02), 0px 0px 1px rgba(9, 11, 17, 0.03);
--shadow-md: 0px 28px 11px rgba(9, 11, 17, 0.01), 0px 16px 10px rgba(9, 11, 17, 0.03),
@@ -52,7 +48,6 @@
--shadow-lg: 0px 62px 25px rgba(9, 11, 17, 0.01), 0px 35px 21px rgba(9, 11, 17, 0.05),
0px 16px 16px rgba(9, 11, 17, 0.1), 0px 4px 9px rgba(9, 11, 17, 0.12);
/* Text Sizes */
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
@@ -63,13 +58,11 @@
--text-4xl: 3.5rem;
--text-5xl: 4.5rem;
/* Fonts */
--font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-body: 'Public Sans', var(--font-system);
--font-brand: Rubik, var(--font-system);
/* Transitions */
--theme-transition: 0.2s ease-in-out;
}
@@ -176,8 +169,6 @@ h5 {
font-size: var(--text-xl);
}
/* Utilities */
.sr-only {
position: absolute;
width: 1px;