I am a software engineer, ui/ux designer, product planner, mentor, student, minimalist, eternal optimist, crypto enthusiast and sarcasm connoisseur.
I love to both build and break things. I am motivated by challenging projects with self-guided research and dynamic problem solving. My true passion is crafting creative front end designs with unique takes on color, typography and motion.
During my career
I have built products ranging from marketing and ecommerce websites to complex enterprise apps with focus on delivering fast, elegant code along with delightful user interfaces.
Now
I currently work as a software engineer at StreamlineFS, where I do product planning, design and development.
{posts.map((post) => (
-
))}
Website build with
{stack.map(item => (
))}
Performing reactivity and statefulness, special guest
SolidJS
{projects.map((project) => (
-
))}
Let's Connect
Reach out to me via email or on social media.
{SOCIALS.map(social => (
{social.NAME}
))}
================================================
FILE: src/pages/legal/[...slug].astro
================================================
---
import { type CollectionEntry, getCollection } from "astro:content"
import PageLayout from "@layouts/PageLayout.astro"
import TopLayout from "@layouts/TopLayout.astro"
import BottomLayout from "@layouts/BottomLayout.astro"
import { formatDate } from "@lib/utils"
import { SITE } from "@consts"
// Create the static pages for legal docs
export async function getStaticPaths() {
const docs = await getCollection("legal")
return docs.map((doc) => ({
params: { slug: doc.slug },
props: doc,
}))
}
// Get the requested legal doc
type Props = CollectionEntry<"legal">;
const doc = Astro.props
const { title, date } = doc.data
const { Content } = await doc.render();
---
{title}
Last updated: {formatDate(date)}
================================================
FILE: src/pages/projects/[...slug].astro
================================================
---
import { type CollectionEntry, getCollection } from "astro:content"
import PageLayout from "@layouts/PageLayout.astro"
import TopLayout from "@layouts/TopLayout.astro"
import BottomLayout from "@layouts/BottomLayout.astro"
import ArticleTopLayout from "@layouts/ArticleTopLayout.astro"
import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro"
// Create the static projects pages
export async function getStaticPaths() {
const projects = await getCollection("projects")
return projects.map((project) => ({
params: { slug: project.slug },
props: project,
}))
}
// Get the requested project
type Props = CollectionEntry<"projects">
const project = Astro.props
const { title, summary } = project.data
---
================================================
FILE: src/pages/projects/index.astro
================================================
---
import { getCollection } from "astro:content";
import PageLayout from "@layouts/PageLayout.astro";
import TopLayout from "@layouts/TopLayout.astro";
import BottomLayout from "@layouts/BottomLayout.astro";
import SearchCollection from "@components/SearchCollection";
import { PROJECTS } from "@consts";
import type { CollectionEntry } from "astro:content";
const projects = (await getCollection("projects"))
.filter((project) => !project.data.draft)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const tags = [
...new Set(projects.flatMap((project) => project.data.tags)),
].sort((a, b) => a.localeCompare(b));
const estimated_initial_size =
28 + projects.length * 158 + (projects.length - 1) * 12;
---
{PROJECTS.TITLE}
{PROJECTS.DESCRIPTION}
================================================
FILE: src/pages/robots.txt.ts
================================================
import type { APIRoute } from "astro"
const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${new URL("sitemap-index.xml", import.meta.env.SITE).href}
`.trim()
export const GET: APIRoute = () => {
return new Response(robotsTxt, {
headers: {
"Content-Type": "text/plain; charset=utf-8",
},
})
}
================================================
FILE: src/pages/rss.xml.ts
================================================
import rss from "@astrojs/rss"
import { getCollection } from "astro:content"
import { SITE } from "@consts"
type Context = {
site: string
}
export async function GET(context: Context) {
const posts = await getCollection("blog")
const projects = await getCollection("projects")
const items = [...posts, ...projects]
items.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime())
return rss({
title: SITE.TITLE,
description: SITE.DESCRIPTION,
site: context.site,
items: items.map((item) => ({
title: item.data.title,
description: item.data.summary,
pubDate: item.data.date,
link: item.slug.startsWith("blog")
? `/blog/${item.slug}/`
: `/projects/${item.slug}/`,
})),
})
}
================================================
FILE: src/pages/search/index.astro
================================================
---
import { type CollectionEntry, getCollection } from "astro:content";
import PageLayout from "@layouts/PageLayout.astro";
import TopLayout from "@layouts/TopLayout.astro";
import BottomLayout from "@layouts/BottomLayout.astro";
import Search from "@components/Search";
import { SEARCH } from "@consts";
const posts = (await getCollection("blog")).filter((post) => !post.data.draft);
const projects = (await getCollection("projects")).filter(
(post) => !post.data.draft,
);
const data = [...posts, ...projects] as CollectionEntry<"blog">[];
---
{SEARCH.TITLE}
================================================
FILE: src/pages/work/index.astro
================================================
---
import { getCollection } from "astro:content"
import PageLayout from "@layouts/PageLayout.astro"
import TopLayout from "@layouts/TopLayout.astro"
import BottomLayout from "@layouts/BottomLayout.astro"
import { WORK } from "@consts"
const collection = await getCollection("work")
collection.sort((a, b) => new Date(b.data.dateStart).getTime() - new Date(a.data.dateStart).getTime())
const work = await Promise.all(
collection.map(async (item) => {
const { Content } = await item.render()
return { ...item, Content }
})
)
function formatWorkDate(input: Date | string) {
if (typeof input === "string") return input
const month = input.toLocaleDateString("en-US", {
month: "short",
})
const year = new Date(input).getFullYear()
return `${month} ${year}`
}
---
{WORK.TITLE}
================================================
FILE: src/styles/global.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--copy-btn-margin: 10px;
}
@layer base {
@font-face {
font-family: "Atkinson";
src: url("/fonts/atkinson-regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Atkinson";
src: url("/fonts/atkinson-bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
}
html {
overflow-y: scroll;
color-scheme: light;
background-color: white;
font-family: "Atkinson", sans-serif;
}
html.dark {
color-scheme: dark;
background-color: black;
}
html,
body {
@apply h-full w-full antialiased;
@apply bg-white dark:bg-black;
@apply text-black/75 dark:text-white/75;
}
body {
@apply relative flex flex-col;
}
main {
@apply flex flex-col flex-1 bg-white dark:bg-black;
}
header {
@apply border-b;
@apply transition-all duration-300 ease-in-out;
}
header:not(.scrolled) {
@apply bg-transparent border-transparent;
}
header.scrolled {
@apply bg-white/75 dark:bg-black/50;
@apply border-black/10 dark:border-white/25;
@apply backdrop-blur-sm saturate-200;
}
article {
@apply prose dark:prose-invert max-w-full pb-12;
}
.page-heading {
@apply font-semibold text-black dark:text-white;
}
.blend {
@apply transition-all duration-300 ease-in-out;
}
/** Light theme particles on home page */
@keyframes animateParticle {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
/** styles for public /animation.js */
.animate {
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease, transform 1s ease;
}
.animate.show {
opacity: 1;
transform: translateY(0);
}
article img {
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin: 0 auto;
}
/**
* TWINKLE STARS
*/
#twinkle-star.template {
@apply absolute -left-full;
/* hide offscreen */
}
#twinkle-star.twinkle {
@apply animate-twinkle;
/* defined in tailwind.config */
}
/**
* Meteors
*/
#meteors .shower {
@apply absolute inset-0 top-0;
;
@apply left-1/2 -translate-x-1/2;
@apply w-screen aspect-square;
}
#meteors .meteor {
@apply animate-meteor;
/* defined in tailwind.config */
@apply absolute top-1/2 left-1/2 w-px h-[75vh];
@apply bg-gradient-to-b from-white to-transparent;
}
#meteors .shower.ur {
@apply rotate-45;
}
#meteors .shower.dr {
@apply rotate-135;
}
#meteors .shower.dl {
@apply rotate-225;
}
#meteors .shower.ul {
@apply rotate-315;
}
.copy-cnt {
@apply absolute w-full;
top: var(--copy-btn-margin);
}
.copy-btn {
@apply w-[30px] fixed;
left: calc(100% - var(--copy-btn-margin));
transform: translateX(-100%);
}
.copy-svg {
@apply w-full aspect-square text-white opacity-70 hover:opacity-90;
}
/* Card transition */
/* .fade-move-enter-active,
.fade-move-exit-active {
transition: all 300ms ease;
}
.fade-move-enter-from,
.fade-move-exit-to {
opacity: 0;
transform: translateY(10px);
} */
================================================
FILE: src/types.ts
================================================
export type Page = {
TITLE: string
DESCRIPTION: string
}
export interface Site extends Page {
AUTHOR: string
}
export type Links = {
TEXT: string
HREF: string
}[]
export type Socials = {
NAME: string
ICON: string
TEXT: string
HREF: string
}[]
================================================
FILE: tailwind.config.mjs
================================================
import defaultTheme from "tailwindcss/defaultTheme"
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ["class"],
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
fontFamily: {
"sans": ["Atkinson", ...defaultTheme.fontFamily.sans],
},
typography: {
DEFAULT: {
css: {
maxWidth: "full",
},
},
},
rotate: {
"45": "45deg",
"135": "135deg",
"225": "225deg",
"315": "315deg",
},
animation: {
twinkle: "twinkle 2s ease-in-out forwards",
meteor: "meteor 3s ease-in-out forwards",
},
keyframes: {
twinkle: {
"0%": {
opacity: 0,
transform: "rotate(0deg)"
},
"50%": {
opacity: 1,
transform: "rotate(180deg)"
},
"100%": {
opacity: 0,
transform: "rotate(360deg)"
},
},
meteor: {
"0%": {
opacity: 0,
transform: "translateY(200%)"
},
"50%": {
opacity: 1
},
"100%": {
opacity: 0,
transform: "translateY(0)"
},
},
},
},
},
plugins: [require("@tailwindcss/typography")],
}
================================================
FILE: tsconfig.json
================================================
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"strictNullChecks": true,
"baseUrl": ".",
"paths": {
"@*": [
"src/*"
]
},
"jsx": "preserve",
"jsxImportSource": "solid-js"
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.astro"
],
"exclude": [
"dist",
"node_modules"
]
}