mirror of
https://github.com/avinal/avinal.github.io.git
synced 2026-07-04 07:40:09 +05:30
feat: redesign my webiste from scratch
- remove hugo and paper box theme - inspiration https://jay.fish - use astro based system Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
import HeroCard from "@/components/HeroCard.astro";
|
||||
import GameOfLife from "@/components/GameOfLife.astro";
|
||||
import ActivityRow from "@/components/ActivityRow.astro";
|
||||
import RepoList from "@/components/RepoList.astro";
|
||||
import RecentPosts from "@/components/RecentPosts.astro";
|
||||
|
||||
import { fetchGitHubUser, fetchGitHubRepos, fetchContributions } from "@/lib/github";
|
||||
import { fetchWakaTimeData } from "@/lib/wakatime";
|
||||
import { mergeActivity } from "@/lib/activity";
|
||||
|
||||
const [user, repos, contributions, wakatime, allPosts] = await Promise.all([
|
||||
fetchGitHubUser(),
|
||||
fetchGitHubRepos(),
|
||||
fetchContributions(),
|
||||
fetchWakaTimeData(),
|
||||
getCollection("posts", ({ data }) => !data.draft),
|
||||
]);
|
||||
|
||||
const activity = mergeActivity(contributions, wakatime);
|
||||
|
||||
const recentPosts = allPosts
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
.slice(0, 5);
|
||||
---
|
||||
|
||||
<BaseLayout title="Home">
|
||||
<div class="bento">
|
||||
<!-- Row 1: Hero (profile+about+skills+links) | Game of Life widget -->
|
||||
<div class="bento-8">
|
||||
<HeroCard
|
||||
name="Avinal Kumar"
|
||||
role="Software Engineer II at Red Hat"
|
||||
bio="I build things for hybrid cloud, contribute to open source, and self-host everything I can. GNU/Linux and free software are two of my favorite things."
|
||||
avatarUrl={user?.avatar_url}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="bento-4">
|
||||
<GameOfLife />
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Activity graph + stats (side by side in one card) -->
|
||||
<div class="bento-full">
|
||||
<ActivityRow activity={activity} user={user} />
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Repos -->
|
||||
<div class="bento-full">
|
||||
<RepoList repos={repos} />
|
||||
</div>
|
||||
|
||||
<!-- Row 4: Recent Posts -->
|
||||
<div class="bento-full">
|
||||
<RecentPosts posts={recentPosts} />
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
|
||||
const CALCOM_USER = "avinal";
|
||||
const CALCOM_LINK = `https://cal.com/${CALCOM_USER}`;
|
||||
---
|
||||
|
||||
<BaseLayout title="Book a Meeting" description="Schedule a meeting with Avinal Kumar">
|
||||
<div class="meeting-page">
|
||||
<header class="meeting-header">
|
||||
<h1>Book a Meeting</h1>
|
||||
<p class="meeting-desc">
|
||||
Want to chat about open source, collaboration, or just say hi?
|
||||
Pick a time that works for you.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="cal-inline" id="cal-inline"></div>
|
||||
|
||||
<noscript>
|
||||
<div class="cal-noscript">
|
||||
<p>
|
||||
JavaScript is required to load the calendar.
|
||||
<a href={CALCOM_LINK}>Book directly on Cal.com →</a>
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div class="cal-fallback">
|
||||
<p>
|
||||
Prefer a direct link? <a href={CALCOM_LINK}>Open Cal.com →</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<!-- Cal.com official inline embed via their embed.js CDN script -->
|
||||
<script is:inline define:vars={{ CALCOM_USER }}>
|
||||
(function(C,A,L){
|
||||
let p=function(a,ar){a.q=a.q||[];a.q.push(ar)};
|
||||
let d=C.document;
|
||||
C.Cal=C.Cal||function(){p(C.Cal,arguments)};
|
||||
C.Cal.ns={};C.Cal.loaded=!1;
|
||||
let s=d.createElement("script");
|
||||
s.src=A;s.async=!0;
|
||||
d.head.appendChild(s);
|
||||
C.Cal.q=C.Cal.q||[];
|
||||
C.Cal("init",{origin:"https://cal.com"});
|
||||
C.Cal("inline",{
|
||||
elementOrSelector:"#cal-inline",
|
||||
calLink:CALCOM_USER,
|
||||
layout:"month_view",
|
||||
});
|
||||
C.Cal("ui",{
|
||||
theme:d.documentElement.getAttribute("data-theme")==="dark"?"dark":"light",
|
||||
styles:{branding:{brandColor:"#2563eb"}},
|
||||
});
|
||||
})(window,"https://app.cal.com/embed/embed.js");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.meeting-page {
|
||||
max-width: var(--max-w-page);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.meeting-header {
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.meeting-header h1 {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.meeting-desc {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-relaxed);
|
||||
max-width: var(--max-w-prose);
|
||||
}
|
||||
|
||||
.cal-inline {
|
||||
min-height: 500px;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cal-noscript {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
padding: var(--space-8);
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cal-noscript a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cal-fallback {
|
||||
margin-top: var(--space-6);
|
||||
text-align: center;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cal-fallback a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
import { getCollection, render } from "astro:content";
|
||||
import PostLayout from "@/layouts/PostLayout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("posts", ({ data }) => !data.draft);
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.id },
|
||||
props: { post },
|
||||
}));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { Content, headings } = await render(post);
|
||||
|
||||
const wordCount = post.body?.split(/\s+/).length ?? 0;
|
||||
const minutes = Math.max(1, Math.round(wordCount / 220));
|
||||
const readingTime = `${minutes} min read`;
|
||||
---
|
||||
|
||||
<PostLayout
|
||||
title={post.data.title}
|
||||
description={post.data.description}
|
||||
date={post.data.date}
|
||||
modified={post.data.modified}
|
||||
category={post.data.category}
|
||||
tags={post.data.tags}
|
||||
image={post.data.image}
|
||||
readingTime={readingTime}
|
||||
headings={headings}
|
||||
>
|
||||
<Content />
|
||||
</PostLayout>
|
||||
@@ -0,0 +1,254 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPosts = await getCollection("posts", ({ data }) => !data.draft);
|
||||
const categories = [
|
||||
...new Set(allPosts.map((p) => p.data.category).filter(Boolean)),
|
||||
];
|
||||
return categories.map((cat) => ({
|
||||
params: { category: cat },
|
||||
props: {
|
||||
category: cat,
|
||||
posts: allPosts
|
||||
.filter((p) => p.data.category === cat)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()),
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
const { category, posts } = Astro.props;
|
||||
|
||||
const allPosts = await getCollection("posts", ({ data }) => !data.draft);
|
||||
const categories = [
|
||||
...new Set(allPosts.map((p) => p.data.category).filter(Boolean)),
|
||||
].sort();
|
||||
|
||||
const fmtDate = (d: Date) =>
|
||||
d.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
const readTime = (body?: string) => {
|
||||
const words = body?.split(/\s+/).length ?? 0;
|
||||
return `~${Math.max(1, Math.round(words / 220))} mins`;
|
||||
};
|
||||
|
||||
const excerpt = (body?: string, len = 140) => {
|
||||
if (!body) return "";
|
||||
const plain = body
|
||||
.replace(/^---[\s\S]*?---/, "")
|
||||
.replace(/[#*_`>\[\]()!|~\-]/g, "")
|
||||
.replace(/\n+/g, " ")
|
||||
.trim();
|
||||
return plain.length > len ? plain.slice(0, len).trimEnd() + " …" : plain;
|
||||
};
|
||||
---
|
||||
|
||||
<BaseLayout title={`${category} — Posts`} description={`Posts in the ${category} category`}>
|
||||
<div class="posts-page">
|
||||
<nav class="category-filters" aria-label="Filter by category">
|
||||
<a href="/posts/" class="filter-link">All</a>
|
||||
{categories.map((cat) => (
|
||||
<a
|
||||
href={`/posts/${cat}/`}
|
||||
class:list={["filter-link", { active: cat === category }]}
|
||||
>
|
||||
{cat}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div class="category-header">
|
||||
<h1 class="category-heading">{category}</h1>
|
||||
<p class="text-secondary">
|
||||
{posts.length} post{posts.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="post-list">
|
||||
{posts.map((post) => (
|
||||
<li class="post-entry">
|
||||
<a href={`/posts/${post.id}/`} class="post-row">
|
||||
<div class="post-thumb">
|
||||
{post.data.image ? (
|
||||
<img src={post.data.image} alt="" class="thumb-img" loading="lazy" />
|
||||
) : (
|
||||
<span class="thumb-placeholder">{post.data.title.charAt(0)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div class="post-info">
|
||||
<div class="post-meta">
|
||||
<time datetime={post.data.date.toISOString()}>{fmtDate(post.data.date)}</time>
|
||||
<span>{readTime(post.body)}</span>
|
||||
</div>
|
||||
<h2 class="post-title">{post.data.title}</h2>
|
||||
{post.data.description ? (
|
||||
<p class="post-desc">{post.data.description}</p>
|
||||
) : (
|
||||
<p class="post-desc">{excerpt(post.body)}</p>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.posts-page {
|
||||
max-width: var(--max-w-page);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.category-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
padding-bottom: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: sticky;
|
||||
top: var(--nav-height);
|
||||
z-index: 50;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.filter-link {
|
||||
display: inline-block;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.filter-link:hover {
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.filter-link.active {
|
||||
background-color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.category-heading {
|
||||
text-transform: capitalize;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.post-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-entry {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.post-entry:first-child {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.post-row {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 1fr;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5) var(--space-2);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.post-row:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.post-thumb {
|
||||
aspect-ratio: 3 / 2;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%);
|
||||
transition: filter var(--duration-normal) var(--ease-out);
|
||||
}
|
||||
|
||||
.post-row:hover .thumb-img {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
.thumb-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
.post-desc {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.post-row {
|
||||
grid-template-columns: 100px 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
|
||||
const allPosts = await getCollection("posts", ({ data }) => !data.draft);
|
||||
|
||||
const sorted = allPosts.sort(
|
||||
(a, b) => b.data.date.getTime() - a.data.date.getTime()
|
||||
);
|
||||
|
||||
const categories = [
|
||||
...new Set(sorted.map((p) => p.data.category).filter(Boolean)),
|
||||
].sort();
|
||||
|
||||
const fmtDate = (d: Date) =>
|
||||
d.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
const readTime = (body?: string) => {
|
||||
const words = body?.split(/\s+/).length ?? 0;
|
||||
return `~${Math.max(1, Math.round(words / 220))} mins`;
|
||||
};
|
||||
|
||||
const excerpt = (body?: string, len = 140) => {
|
||||
if (!body) return "";
|
||||
const plain = body
|
||||
.replace(/^---[\s\S]*?---/, "")
|
||||
.replace(/[#*_`>\[\]()!|~\-]/g, "")
|
||||
.replace(/\n+/g, " ")
|
||||
.trim();
|
||||
return plain.length > len ? plain.slice(0, len).trimEnd() + " …" : plain;
|
||||
};
|
||||
---
|
||||
|
||||
<BaseLayout title="Posts" description="Blog posts by Avinal Kumar">
|
||||
<div class="posts-page">
|
||||
<nav class="category-filters" aria-label="Filter by category">
|
||||
<a href="/posts/" class="filter-link active">All</a>
|
||||
{categories.map((cat) => (
|
||||
<a href={`/posts/${cat}/`} class="filter-link">
|
||||
{cat}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<ul class="post-list">
|
||||
{sorted.map((post) => (
|
||||
<li class="post-entry">
|
||||
<a href={`/posts/${post.id}/`} class="post-row">
|
||||
<div class="post-thumb">
|
||||
{post.data.image ? (
|
||||
<img src={post.data.image} alt="" class="thumb-img" loading="lazy" />
|
||||
) : (
|
||||
<span class="thumb-placeholder">{post.data.title.charAt(0)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div class="post-info">
|
||||
<div class="post-meta">
|
||||
<span class="badge">{post.data.category}</span>
|
||||
<time datetime={post.data.date.toISOString()}>{fmtDate(post.data.date)}</time>
|
||||
<span>{readTime(post.body)}</span>
|
||||
</div>
|
||||
<h2 class="post-title">{post.data.title}</h2>
|
||||
{post.data.description ? (
|
||||
<p class="post-desc">{post.data.description}</p>
|
||||
) : (
|
||||
<p class="post-desc">{excerpt(post.body)}</p>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.posts-page {
|
||||
max-width: var(--max-w-page);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.category-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
padding-bottom: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: sticky;
|
||||
top: var(--nav-height);
|
||||
z-index: 50;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.filter-link {
|
||||
display: inline-block;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.filter-link:hover {
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.filter-link.active {
|
||||
background-color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-entry {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.post-entry:first-child {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.post-row {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 1fr;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5) var(--space-2);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.post-row:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.post-thumb {
|
||||
aspect-ratio: 3 / 2;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%);
|
||||
transition: filter var(--duration-normal) var(--ease-out);
|
||||
}
|
||||
|
||||
.post-row:hover .thumb-img {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
.thumb-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
.post-desc {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.post-row {
|
||||
grid-template-columns: 100px 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,577 @@
|
||||
---
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
import resume from "@/data/resume.json";
|
||||
|
||||
const { basics, work, volunteer, education, skills, projects, languages, certificates } = resume as any;
|
||||
|
||||
function fmtDate(iso: string) {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
|
||||
}
|
||||
|
||||
type TimelineEntry = {
|
||||
type: "work" | "education" | "volunteer";
|
||||
title: string;
|
||||
subtitle: string;
|
||||
url?: string;
|
||||
location?: string;
|
||||
startDate: string;
|
||||
endDate?: string;
|
||||
summary?: string;
|
||||
highlights?: string[];
|
||||
};
|
||||
|
||||
const timeline: TimelineEntry[] = [
|
||||
...work.map((w) => ({
|
||||
type: "work" as const,
|
||||
title: w.position,
|
||||
subtitle: w.name,
|
||||
url: w.url || undefined,
|
||||
location: (w as any).location,
|
||||
startDate: w.startDate,
|
||||
endDate: w.endDate,
|
||||
summary: w.summary,
|
||||
highlights: w.highlights,
|
||||
})),
|
||||
...education.map((e: any) => ({
|
||||
type: "education" as const,
|
||||
title: e.area ? `${e.studyType} in ${e.area}` : e.studyType,
|
||||
subtitle: e.institution,
|
||||
url: e.url || undefined,
|
||||
location: e.location,
|
||||
startDate: e.startDate,
|
||||
endDate: e.endDate,
|
||||
summary: e.score ? `CGPA: ${e.score}` : undefined,
|
||||
highlights: undefined as string[] | undefined,
|
||||
})),
|
||||
...volunteer.map((v) => ({
|
||||
type: "volunteer" as const,
|
||||
title: v.position,
|
||||
subtitle: v.organization,
|
||||
url: v.url || undefined,
|
||||
startDate: v.startDate || "2022-01-01",
|
||||
endDate: v.endDate,
|
||||
summary: v.summary,
|
||||
highlights: undefined as string[] | undefined,
|
||||
})),
|
||||
].sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime());
|
||||
|
||||
const typeIcons: Record<string, string> = {
|
||||
work: "briefcase",
|
||||
education: "graduation",
|
||||
volunteer: "heart",
|
||||
};
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
work: "Work",
|
||||
education: "Education",
|
||||
volunteer: "Community",
|
||||
};
|
||||
---
|
||||
|
||||
<BaseLayout title="Resume" description={`${basics.name} — ${basics.label}`}>
|
||||
<div class="resume-page">
|
||||
<header class="resume-hero">
|
||||
<div class="hero-text">
|
||||
<h1>{basics.name}</h1>
|
||||
<p class="hero-label">{basics.label}</p>
|
||||
<p class="hero-summary">{basics.summary}</p>
|
||||
<div class="hero-links">
|
||||
{basics.profiles.map((p) => (
|
||||
<a href={p.url} class="profile-link">{p.network}</a>
|
||||
))}
|
||||
<a href={basics.url} class="profile-link">Website</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-photo">
|
||||
{basics.image ? (
|
||||
<img src={basics.image} alt={basics.name} />
|
||||
) : (
|
||||
<div class="photo-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="resume-body">
|
||||
<section class="timeline-section">
|
||||
<h2>Experience & Education</h2>
|
||||
<div class="timeline">
|
||||
{timeline.map((entry) => (
|
||||
<div class={`tl-entry tl-${entry.type}`}>
|
||||
<div class="tl-label-cell">
|
||||
<span class="tl-type-label">{typeLabels[entry.type]}</span>
|
||||
</div>
|
||||
<div class="tl-rail-cell">
|
||||
<div class="tl-dot" />
|
||||
</div>
|
||||
<div class="tl-card">
|
||||
<div class="tl-card-header">
|
||||
<div class="tl-dates">
|
||||
{fmtDate(entry.startDate)} — {entry.endDate ? fmtDate(entry.endDate) : "Present"}
|
||||
</div>
|
||||
<h3 class="tl-title">{entry.title}</h3>
|
||||
<p class="tl-subtitle">
|
||||
{entry.url ? <a href={entry.url}>{entry.subtitle}</a> : entry.subtitle}
|
||||
{entry.location && <span class="tl-location"> · {entry.location}</span>}
|
||||
</p>
|
||||
</div>
|
||||
{entry.summary && <p class="tl-summary">{entry.summary}</p>}
|
||||
{entry.highlights && entry.highlights.length > 0 && (
|
||||
<ul class="tl-highlights">
|
||||
{entry.highlights.map((h) => <li>{h}</li>)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="two-col">
|
||||
<section class="skills-section">
|
||||
<h2>Skills</h2>
|
||||
<div class="skill-groups">
|
||||
{skills.map((group) => (
|
||||
<div class="skill-group">
|
||||
<h3>{group.name}</h3>
|
||||
<div class="skill-pills">
|
||||
{group.keywords.map((kw) => (
|
||||
<span class="pill">{kw}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="projects-section">
|
||||
<h2>Projects</h2>
|
||||
<div class="project-list">
|
||||
{projects.map((p) => (
|
||||
<div class="project-card">
|
||||
<h3>{p.url ? <a href={p.url}>{p.name}</a> : p.name}</h3>
|
||||
<p>{p.description}</p>
|
||||
{p.highlights && p.highlights.length > 0 && (
|
||||
<ul class="project-highlights">
|
||||
{p.highlights.map((h) => <li>{h}</li>)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="resume-footer">
|
||||
<p>
|
||||
This resume follows the <a href="https://jsonresume.org">JSON Resume</a> standard.
|
||||
<a href="/resume" onclick="window.print(); return false;">Print / save as PDF</a> ·
|
||||
<a href="/data/resume.json" download>Download JSON</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.resume-page {
|
||||
max-width: var(--max-w-page);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ---- Hero ---- */
|
||||
.resume-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
gap: var(--space-8);
|
||||
align-items: center;
|
||||
padding: var(--space-10) 0 var(--space-8);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: var(--space-10);
|
||||
}
|
||||
|
||||
.hero-photo {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.hero-photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.photo-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.resume-hero h1 {
|
||||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||||
margin-bottom: var(--space-2);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-label {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.hero-summary {
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-relaxed);
|
||||
max-width: 60ch;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
.meta-item a:hover { color: var(--accent); }
|
||||
|
||||
.hero-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.profile-link {
|
||||
display: inline-block;
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.profile-link:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background-color: var(--accent-subtle);
|
||||
}
|
||||
|
||||
/* ---- Timeline ---- */
|
||||
.timeline-section { margin-bottom: var(--space-12); }
|
||||
|
||||
.timeline-section > h2,
|
||||
.skills-section > h2,
|
||||
.projects-section > h2 {
|
||||
font-size: var(--text-xl);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tl-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 24px 1fr;
|
||||
gap: 0 var(--space-2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tl-label-cell {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding-top: var(--space-5);
|
||||
padding-right: var(--space-2);
|
||||
}
|
||||
|
||||
.tl-type-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tl-work .tl-type-label { color: var(--accent); }
|
||||
.tl-education .tl-type-label { color: #10b981; }
|
||||
.tl-volunteer .tl-type-label { color: #f59e0b; }
|
||||
|
||||
.tl-rail-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tl-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--accent);
|
||||
background: var(--bg);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: var(--space-5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tl-rail-cell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(var(--space-5) + 12px);
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
background: var(--border);
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tl-entry:last-child .tl-rail-cell::after { display: none; }
|
||||
|
||||
.tl-work .tl-dot { border-color: var(--accent); }
|
||||
.tl-education .tl-dot { border-color: #10b981; background: #10b981; }
|
||||
.tl-volunteer .tl-dot { border-color: #f59e0b; }
|
||||
|
||||
.tl-card {
|
||||
padding: var(--space-4) var(--space-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-surface);
|
||||
transition: border-color var(--duration-fast) var(--ease-out),
|
||||
box-shadow var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.tl-card:hover {
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.tl-dates {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.tl-title {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.tl-subtitle {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tl-subtitle a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tl-subtitle a:hover { text-decoration: underline; }
|
||||
|
||||
.tl-location {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.tl-summary {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tl-highlights {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.tl-highlights li {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
padding-left: 1.2em;
|
||||
position: relative;
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
.tl-highlights li::before {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---- Two column: Skills + Projects ---- */
|
||||
.two-col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-10);
|
||||
margin-bottom: var(--space-10);
|
||||
}
|
||||
|
||||
.skill-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.skill-group h3 {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.skill-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-block;
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--text);
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.pill:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.project-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.project-card {
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-surface);
|
||||
transition: border-color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.project-card:hover { border-color: var(--border-strong); }
|
||||
|
||||
.project-card h3 {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.project-card h3 a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-card h3 a:hover { text-decoration: underline; }
|
||||
|
||||
.project-card > p {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
.project-highlights {
|
||||
list-style: disc;
|
||||
padding-left: 1.2em;
|
||||
margin-top: var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ---- Footer ---- */
|
||||
.resume-footer {
|
||||
padding-top: var(--space-6);
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.resume-footer a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ---- Responsive ---- */
|
||||
@media (max-width: 768px) {
|
||||
.two-col {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.resume-hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-photo {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
justify-self: center;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.tl-entry {
|
||||
grid-template-columns: 48px 16px 1fr;
|
||||
}
|
||||
|
||||
.tl-type-label { font-size: 8px; }
|
||||
|
||||
.tl-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Print ---- */
|
||||
@media print {
|
||||
.resume-page { max-width: 100%; padding: 0; }
|
||||
.resume-hero { padding: 0 0 1rem; }
|
||||
.resume-footer { display: none; }
|
||||
.tl-card { border: 1px solid #ddd; box-shadow: none; }
|
||||
.tl-card:hover { box-shadow: none; }
|
||||
.profile-link { border-color: #999; }
|
||||
.pill { border-color: #999; }
|
||||
a { color: inherit !important; }
|
||||
.hero-label { color: #333; }
|
||||
.tl-dot::before { border-color: #333; }
|
||||
.tl-education .tl-dot::before { background: #333; border-color: #333; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
import rss from "@astrojs/rss";
|
||||
import { getCollection } from "astro:content";
|
||||
import type { APIContext } from "astro";
|
||||
|
||||
export async function GET(context: APIContext) {
|
||||
const posts = await getCollection("posts", ({ data }) => !data.draft);
|
||||
|
||||
const sorted = posts.sort(
|
||||
(a, b) => b.data.date.getTime() - a.data.date.getTime()
|
||||
);
|
||||
|
||||
return rss({
|
||||
title: "Avinal Kumar",
|
||||
description: "Writing about software, self-hosting, open source, and more.",
|
||||
site: context.site!,
|
||||
items: sorted.map((post) => ({
|
||||
title: post.data.title,
|
||||
pubDate: post.data.date,
|
||||
description: post.data.description,
|
||||
link: `/posts/${post.id}/`,
|
||||
categories: post.data.tags,
|
||||
})),
|
||||
customData: `<language>en-us</language>`,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
---
|
||||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||||
|
||||
const hardware = [
|
||||
{
|
||||
category: "Servers",
|
||||
items: [
|
||||
{ name: "Raspberry Pi 5 8GB", url: "https://www.raspberrypi.com/products/raspberry-pi-5/", detail: "Primary server — runs most self-hosted services" },
|
||||
{ name: "Raspberry Pi 4B 8GB", url: "https://www.raspberrypi.org/products/raspberry-pi-4-model-b/", detail: "Secondary server — backup and lighter workloads" },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Storage",
|
||||
items: [
|
||||
{ name: "Samsung SSD 970 EVO Plus 500GB", url: "https://www.samsung.com/us/computing/memory-storage/solid-state-drives/ssd-970-evo-plus-nvme-m-2-500gb-mz-v7s500b-am/", detail: "NVMe on the Pi 5 via Pimoroni NVMe Base" },
|
||||
{ name: "WD Blue SA510 SATA SSD M.2 500GB", url: "https://www.westerndigital.com/en-in/products/internal-drives/wd-blue-sa510-sata-m-2-ssd", detail: "Connected via USB enclosure to the Pi 4B" },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Accessories",
|
||||
items: [
|
||||
{ name: "Raspberry Pi 27W USB-C PSU", url: "https://www.raspberrypi.com/products/27w-power-supply/", detail: "For the Pi 5" },
|
||||
{ name: "Raspberry Pi 15W USB-C PSU", url: "https://www.raspberrypi.com/products/type-c-power-supply/", detail: "For the Pi 4B" },
|
||||
{ name: "Pimoroni NVMe Base", url: "https://shop.pimoroni.com/products/nvme-base", detail: "NVMe SSD HAT for Pi 5" },
|
||||
{ name: "PiBOX NVMe SSD Enclosure", url: "https://pibox.in/", detail: "USB 3.2 10Gbps enclosure" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const selfHosted = [
|
||||
{ name: "Immich", url: "https://immich.app/", desc: "Photo and video backup — Google Photos replacement", category: "Media" },
|
||||
{ name: "Paisa", url: "https://paisa.fyi/", desc: "Personal finance and budget manager using plain text accounting", category: "Finance" },
|
||||
{ name: "Vikunja", url: "https://vikunja.io/", desc: "Todo lists and kanban boards with CalDAV support", category: "Productivity" },
|
||||
{ name: "Atuin", url: "https://atuin.sh/", desc: "Encrypted shell history sync across all machines", category: "Dev Tools" },
|
||||
{ name: "Gitea", url: "https://about.gitea.com/", desc: "Self-hosted Git service — personal project mirror", category: "Dev Tools" },
|
||||
{ name: "Paperless-ngx", url: "https://docs.paperless-ngx.com/", desc: "Document management with built-in OCR", category: "Documents" },
|
||||
{ name: "Shiori", url: "https://github.com/go-shiori/shiori", desc: "Simple bookmark manager — Pocket alternative", category: "Bookmarks" },
|
||||
{ name: "Memos", url: "https://usememos.com/", desc: "Lightweight note-taking — quick thoughts and snippets", category: "Notes" },
|
||||
];
|
||||
|
||||
const networking = [
|
||||
{ name: "Tailscale", url: "https://tailscale.com/", desc: "Mesh VPN connecting all devices securely" },
|
||||
{ name: "RunTipi", url: "https://runtipi.io/", desc: "Docker Compose app manager for server administration" },
|
||||
];
|
||||
|
||||
const softwareStack = [
|
||||
{ category: "Editor", items: ["Neovim", "VS Code / Cursor"] },
|
||||
{ category: "Terminal", items: ["Kitty", "Zsh", "Starship prompt", "Tmux"] },
|
||||
{ category: "OS", items: ["Fedora (daily driver)", "Raspberry Pi OS (servers)"] },
|
||||
{ category: "Browser", items: ["Firefox"] },
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout title="Setup" description="Hardware, software, and self-hosted services powering Avinal's workflow">
|
||||
<div class="setup-page">
|
||||
<header class="setup-header">
|
||||
<h1>Setup</h1>
|
||||
<p class="setup-desc">
|
||||
The hardware, software, and self-hosted services that power my workflow.
|
||||
Heavily inspired by the homelab and self-hosting community.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="setup-section">
|
||||
<h2>Hardware</h2>
|
||||
{hardware.map((group) => (
|
||||
<div class="hw-group">
|
||||
<h3 class="hw-category">{group.category}</h3>
|
||||
<div class="hw-items">
|
||||
{group.items.map((item) => (
|
||||
<div class="hw-card">
|
||||
<h4><a href={item.url}>{item.name}</a></h4>
|
||||
<p>{item.detail}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section class="setup-section">
|
||||
<h2>Self-Hosted Services</h2>
|
||||
<p class="section-intro">
|
||||
All services run on the Raspberry Pis, connected via Tailscale VPN.
|
||||
Most are deployed using Docker Compose via RunTipi.
|
||||
</p>
|
||||
<div class="service-grid">
|
||||
{selfHosted.map((svc) => (
|
||||
<div class="service-card">
|
||||
<span class="service-category">{svc.category}</span>
|
||||
<h3><a href={svc.url}>{svc.name}</a></h3>
|
||||
<p>{svc.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="setup-section">
|
||||
<h2>Networking</h2>
|
||||
<div class="service-grid service-grid-half">
|
||||
{networking.map((svc) => (
|
||||
<div class="service-card">
|
||||
<h3><a href={svc.url}>{svc.name}</a></h3>
|
||||
<p>{svc.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="setup-section">
|
||||
<h2>Software Stack</h2>
|
||||
<div class="sw-grid">
|
||||
{softwareStack.map((group) => (
|
||||
<div class="sw-group">
|
||||
<h3 class="sw-category">{group.category}</h3>
|
||||
<ul class="sw-list">
|
||||
{group.items.map((item) => <li>{item}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="setup-footer">
|
||||
<p class="text-muted text-sm">
|
||||
For a deeper dive into my Raspberry Pi setup, check out
|
||||
<a href="/posts/raspi/everything-on-my-pi/">Everything on my Pi</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.setup-page {
|
||||
max-width: var(--max-w-page);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.setup-header {
|
||||
margin-bottom: var(--space-10);
|
||||
}
|
||||
|
||||
.setup-header h1 {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.setup-desc {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-relaxed);
|
||||
max-width: var(--max-w-prose);
|
||||
}
|
||||
|
||||
.setup-section {
|
||||
margin-bottom: var(--space-12);
|
||||
}
|
||||
|
||||
.setup-section > h2 {
|
||||
font-size: var(--text-xl);
|
||||
margin-bottom: var(--space-6);
|
||||
padding-bottom: var(--space-2);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-intro {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-6);
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
/* Hardware */
|
||||
.hw-group {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.hw-category {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.hw-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.hw-card {
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--bg-surface);
|
||||
}
|
||||
|
||||
.hw-card h4 {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.hw-card h4 a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hw-card h4 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hw-card p {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Services */
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.service-grid-half {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--bg-surface);
|
||||
transition: border-color var(--duration-fast) var(--ease-out),
|
||||
box-shadow var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.service-category {
|
||||
display: inline-block;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--accent);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.service-card h3 a {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.service-card h3 a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
/* Software stack */
|
||||
.sw-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.sw-category {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.sw-list {
|
||||
list-style: disc;
|
||||
padding-left: 1.2em;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.setup-footer {
|
||||
margin-top: var(--space-8);
|
||||
padding-top: var(--space-6);
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user