Add organizations, research groups and repo stats to projects
This commit is contained in:
SirBlob committed
1 parent
3fefc814e1
commit
c820672803
25 files changed
+566
-25
No files matched your search
@@ -16,6 +16,7 @@
|
||||
{ "label": "portfolio", "icon": "ph:briefcase-duotone", "open": { "page": "/portfolio" } },
|
||||
{ "label": "projects", "icon": "ph:folder-open-duotone", "open": { "page": "/projects" } },
|
||||
{ "label": "hackathons", "icon": "ph:trophy-duotone", "open": { "page": "/projects/hackathons" } },
|
||||
{ "label": "research", "icon": "ph:microscope-duotone", "open": { "page": "/projects/research" } },
|
||||
{ "label": "blog", "icon": "ph:notebook-duotone", "open": { "page": "/blog" } },
|
||||
{ "label": "links", "icon": "ph:qr-code-duotone", "open": { "page": "/links" } }
|
||||
]
|
||||
|
||||
@@ -37,10 +37,17 @@
|
||||
"description": "A sustainability platform that helps users detect and report greenwashing, misleading environmental claims made by companies and products.",
|
||||
"image": "/img/hoya26.png",
|
||||
"tags": ["Svelte", "TypeScript", "Python", "Flask", "Tailwind", "Sustainability"],
|
||||
"featured": true,
|
||||
"event": { "name": "HoyaHax 2026", "university": "Georgetown University", "location": "Washington, D.C.", "year": "2026" },
|
||||
"links": { "demo": "https://ethix.sirblob.co/", "code": "https://github.com/SirBlobby/Hoya26", "devpost": "https://devpost.com/software/ethix" }
|
||||
},
|
||||
{
|
||||
"name": "groSharey",
|
||||
"description": "Split grocery costs with your roommates: scan a receipt, let AI assign each item to whoever asked for it, and everyone sees exactly what they owe, with Venmo and PayPal payments and email reminders.",
|
||||
"image": "/hacks/grosharey.png",
|
||||
"tags": ["React", "TypeScript", "Expo", "Flask", "Python", "MongoDB", "Gemini", "ElevenLabs"],
|
||||
"event": { "name": "Technica 2026", "university": "University of Maryland", "location": "College Park, MD", "year": "2026" },
|
||||
"links": { "demo": "https://grosharey-frontend.vercel.app/", "code": "https://github.com/SirBlobby/GroSharey", "devpost": "https://devpost.com/software/cool_project" }
|
||||
},
|
||||
{
|
||||
"name": "Food Decisive",
|
||||
"description": "Ever felt the indecisiveness of choosing what to eat? Don't fret! Decide your next bite with Food Decisive.",
|
||||
@@ -61,6 +68,7 @@
|
||||
{
|
||||
"name": "Fauxcall",
|
||||
"description": "This product is perfect for situations where you are walking at night and you feel unsafe from someone. Fauxcall lets users create a convincing fake phone call to deter potential attackers and provide a quick escape mechanism.",
|
||||
"image": "/hacks/fauxcall.png",
|
||||
"tags": ["MongoDB", "Next.js", "Python", "React", "Sesame", "Skeleton", "Twilio"],
|
||||
"event": { "name": "HooHacks 2025", "university": "University of Virginia", "location": "Charlottesville, VA", "year": "2025" },
|
||||
"links": { "code": "https://github.com/SirBlobby/HooHacks-12", "devpost": "https://devpost.com/software/fauxcall" }
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
"period": "2026 – Present",
|
||||
"featured": true,
|
||||
"tags": ["Rust", "SvelteKit", "Yjs", "Typst", "Self-Hosted"],
|
||||
"image": "/projects/typstdrive.png",
|
||||
"links": { "code": "https://github.com/SirBlobby/TypstDrive" }
|
||||
"image": "/projects/typstdrive-editor.png",
|
||||
"links": { "code": "https://github.com/SirBlobby/TypstDrive", "docs": "https://sirblobby.github.io/TypstDrive/" }
|
||||
},
|
||||
{
|
||||
"name": "Typst Desktop",
|
||||
@@ -23,14 +23,12 @@
|
||||
"name": "Pkit",
|
||||
"description": "CLI toolkit and utilities (Rust project), a small developer-focused CLI.",
|
||||
"tags": ["Rust", "CLI"],
|
||||
"image": "https://icons.veryicon.com/png/o/business/vscode-program-item-icon/rust-1.png",
|
||||
"links": { "code": "https://github.com/dead-projects-inc/pkit-cli", "demo": "https://pkit.sirblob.co/" }
|
||||
},
|
||||
{
|
||||
"name": "OBookLLM",
|
||||
"description": "OBookLLM is a powerful, self-hosted, offline-capable alternative to NotebookLLM.",
|
||||
"tags": ["Python", "LLM", "AI", "NotebookLLM"],
|
||||
"image": "https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg",
|
||||
"links": { "code": "https://github.com/SirBlobby/OBookLLM" }
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,28 @@
|
||||
[
|
||||
{
|
||||
"name": "ARC - Autonomous Robotics Club",
|
||||
"organization": "Secretary of ARC · Team Lead of the RAVC Team",
|
||||
"description": "George Mason University's Autonomous Robotics Club, where members pick a project and build autonomous robots as a team, no experience required. Won the 2026 Raytheon Autonomous Vehicle Competition with a drone that launches from and lands on a moving ground vehicle, navigating with visual-inertial odometry (VIO) instead of GPS.",
|
||||
"tags": ["Robotics", "Autonomous Vehicles", "Drones", "VIO", "Student Organization"],
|
||||
"featured": true,
|
||||
"awards": [{ "track": "2026 Raytheon Autonomous Vehicle Competition", "place": "1st Place" }],
|
||||
"gallery": ["/organizations/arc-1.jpg", "/organizations/arc-2.jpg", "/organizations/arc-3.jpg"],
|
||||
"links": {
|
||||
"website": "https://gmu.autonomousrobotics.club/",
|
||||
"article": "https://www.gmu.edu/news/2026-05/george-mason-students-fly-first-place-no-gps-no-grade-and-almost-no-problems"
|
||||
},
|
||||
"socials": [
|
||||
{ "name": "GitHub", "icon": "mdi:github", "url": "https://github.com/ARC-GMU" },
|
||||
{ "name": "Instagram", "icon": "mdi:instagram", "url": "https://www.instagram.com/arc.gmu/" },
|
||||
{ "name": "LinkedIn", "icon": "mdi:linkedin", "url": "https://www.linkedin.com/company/arcgmu/" },
|
||||
{ "name": "CREATE Lab", "icon": "ph:flask-duotone", "url": "https://create.autonomousrobotics.club/projects/autonomous-robotics-club" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "GMU Minecraft Club",
|
||||
"organization": "President",
|
||||
"description": "George Mason University's Minecraft club, bringing students together to play, build, and run community servers.",
|
||||
"tags": ["Minecraft", "Community", "Gaming"],
|
||||
"links": { "website": "https://gmmc.club/" }
|
||||
}
|
||||
]
|
||||
@@ -4,18 +4,18 @@
|
||||
"description": "Selenium automation utilities for MCP workflows, packaged for reuse.",
|
||||
"tags": ["TypeScript", "Selenium"],
|
||||
"featured": true,
|
||||
"links": { "package": "https://www.npmjs.com/package/@sirblob/mcp-selenium" }
|
||||
"links": { "package": "https://www.npmjs.com/package/@sirblob/mcp-selenium", "code": "https://github.com/SirBlobby/mcp-selenium" }
|
||||
},
|
||||
{
|
||||
"name": "PokemonTCGAPI",
|
||||
"description": "Unofficial NPM package wrapper for the PokemonTCG API.",
|
||||
"tags": ["TypeScript", "Node.js"],
|
||||
"links": { "package": "https://www.npmjs.com/package/@bosstop/pokemontcgapi" }
|
||||
"links": { "package": "https://www.npmjs.com/package/@bosstop/pokemontcgapi", "code": "https://github.com/SirBlobby/PokemonTCGAPI" }
|
||||
},
|
||||
{
|
||||
"name": "MCSS TS API",
|
||||
"description": "TypeScript API for MC Server Soft services, published to NPM.",
|
||||
"tags": ["TypeScript", "Node.js"],
|
||||
"links": { "package": "https://www.npmjs.com/package/@mcserversoft/mcss-api" }
|
||||
"links": { "package": "https://www.npmjs.com/package/@mcserversoft/mcss-api", "code": "https://github.com/mcserversoft-community/mcss-api-js" }
|
||||
}
|
||||
]
|
||||
@@ -1,14 +1,31 @@
|
||||
[
|
||||
{
|
||||
"name": "Astroswarm",
|
||||
"organization": "CREATE Lab",
|
||||
"name": "Autonomous Swarm Robotics Center",
|
||||
"shortName": "ASRC",
|
||||
"lab": { "name": "CREATE Lab", "url": "https://create.autonomousrobotics.club/" },
|
||||
"institution": "George Mason University",
|
||||
"role": "Undergraduate Research Assistant",
|
||||
"period": "May 2026 – Present",
|
||||
"description": "A visual coding game that turns swarm control into a playable simulator, generating trial data at scale on which algorithms best defend a target. Part of a research program on controlling robot fleets with one operator.",
|
||||
"description": "Research group working on swarm robotics, with a focus on emergent behaviors and controlling robot fleets with one operator.",
|
||||
"focus": ["Swarm Robotics", "Emergent Behavior", "Multi-Robot Control", "ROS"],
|
||||
"links": [
|
||||
{ "label": "CREATE Lab", "url": "https://create.autonomousrobotics.club/" },
|
||||
{ "label": "GitHub", "url": "https://github.com/GMU-ASRC" },
|
||||
{ "label": "My Profile", "url": "https://create.autonomousrobotics.club/team/gagan-manjunatha" }
|
||||
],
|
||||
"projects": [
|
||||
{
|
||||
"name": "Astroswarm",
|
||||
"period": "May 2026 – Present",
|
||||
"description": "A visual coding game that turns swarm control into a playable simulator, generating trial data at scale on which algorithms best defend a target.",
|
||||
"tags": ["Python", "ROS", "Swarm Robotics"],
|
||||
"featured": true,
|
||||
"links": {
|
||||
"demo": "https://astroswarm.autonomousrobotics.club/",
|
||||
"code": "https://github.com/GMU-ASRC/astro-swarm",
|
||||
"article": "https://cec.gmu.edu/news/2026-07/new-art-herding-robots"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,16 +1,28 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import type { Project, ProjectCategory } from '#lib/content';
|
||||
import type { RepoStats } from '#lib/github/types';
|
||||
import LinkButton from '#lib/components/ui/LinkButton.svelte';
|
||||
import Tag from '#lib/components/ui/Tag.svelte';
|
||||
|
||||
let { project, category }: { project: Project; category: ProjectCategory } = $props();
|
||||
let {
|
||||
project,
|
||||
category,
|
||||
repoStats,
|
||||
downloads
|
||||
}: { project: Project; category: ProjectCategory; repoStats?: RepoStats; downloads?: number } = $props();
|
||||
|
||||
const downloadsLabel = $derived(
|
||||
downloads === undefined ? '' : new Intl.NumberFormat('en-US', { notation: 'compact' }).format(downloads)
|
||||
);
|
||||
|
||||
const linkButtons = $derived(
|
||||
[
|
||||
{ href: project.links.website, label: 'Website', icon: 'mdi:web' },
|
||||
{ href: project.links.demo, label: 'View Demo', icon: 'mdi:open-in-new' },
|
||||
{ href: project.links.package, label: 'View Package', icon: 'mdi:package-variant' },
|
||||
{ href: project.links.code, label: 'View Code', icon: 'mdi:github' },
|
||||
{ href: project.links.docs, label: 'Docs', icon: 'mdi:book-open-page-variant-outline' },
|
||||
{ href: project.links.devpost, label: 'Devpost', icon: 'simple-icons:devpost' },
|
||||
{ href: project.links.article, label: 'Article', icon: 'mdi:newspaper-variant-outline' }
|
||||
].filter((button) => button.href)
|
||||
@@ -33,6 +45,28 @@
|
||||
{#if project.version}
|
||||
<span class="badge version">v{project.version}</span>
|
||||
{/if}
|
||||
{#if repoStats && project.links.code}
|
||||
<a class="repo-stat stars" href="{project.links.code}/stargazers" target="_blank" rel="noopener noreferrer" title="GitHub stars">
|
||||
<Icon icon="mdi:star-outline" width="15" />
|
||||
{repoStats.stars}
|
||||
</a>
|
||||
<a class="repo-stat forks" href="{project.links.code}/forks" target="_blank" rel="noopener noreferrer" title="GitHub forks">
|
||||
<Icon icon="mdi:source-fork" width="15" />
|
||||
{repoStats.forks}
|
||||
</a>
|
||||
{/if}
|
||||
{#if downloads !== undefined && project.links.package}
|
||||
<a
|
||||
class="repo-stat downloads"
|
||||
href={project.links.package}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="{downloads.toLocaleString('en-US')} npm downloads"
|
||||
>
|
||||
<Icon icon="mdi:download" width="15" />
|
||||
{downloadsLabel}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if project.event}
|
||||
@@ -78,10 +112,82 @@
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if project.gallery?.length}
|
||||
<div class="gallery" data-image-group>
|
||||
{#each project.gallery as photo, index (photo)}
|
||||
<a class="gallery-item" href={photo} target="_blank" rel="noopener noreferrer">
|
||||
<img src={photo} alt="{project.name} photo {index + 1}" loading="lazy" />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if project.socials?.length}
|
||||
<div class="socials">
|
||||
{#each project.socials as social (social.url)}
|
||||
<a class="social" href={social.url} target="_blank" rel="noopener noreferrer" title={social.name}>
|
||||
<Icon icon={social.icon} width="16" />
|
||||
<span>{social.name}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 0.5rem;
|
||||
max-width: 640px;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
display: block;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery-item:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 0.9rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.social:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.project-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
@@ -153,6 +259,31 @@
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.repo-stat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0 0.45rem;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.repo-stat.stars {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.repo-stat.forks {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.repo-stat.downloads {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.repo-stat:hover {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.event {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { page } from '$app/state';
|
||||
import { projectCategories } from '#lib/content';
|
||||
|
||||
const chipColors = ['magenta', 'orange', 'green', 'cyan'];
|
||||
const chipColors = ['magenta', 'orange', 'green', 'cyan', 'yellow'];
|
||||
</script>
|
||||
|
||||
<nav class="project-nav">
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import type { ProjectCategory, ResearchGroup } from '#lib/content';
|
||||
import LinkButton from '#lib/components/ui/LinkButton.svelte';
|
||||
import Tag from '#lib/components/ui/Tag.svelte';
|
||||
import ProjectEntry from '#lib/components/projects/ProjectEntry.svelte';
|
||||
|
||||
let { group, category }: { group: ResearchGroup; category: ProjectCategory } = $props();
|
||||
|
||||
const linkIcons: Record<string, string> = {
|
||||
GitHub: 'mdi:github',
|
||||
'My Profile': 'mdi:account-circle-outline'
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="research-group">
|
||||
<h2 class="group-title">{group.name}</h2>
|
||||
|
||||
<div class="path">
|
||||
<span class="muted">~/</span>{group.institution}<span class="muted">/</span><a
|
||||
href={group.lab.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">{group.lab.name}</a
|
||||
><span class="muted">/</span><span class="current">{group.shortName}</span>
|
||||
</div>
|
||||
|
||||
<div class="group-body">
|
||||
<div class="badges">
|
||||
<span class="badge group"><Icon icon={category.icon} width="15" /> Research Group</span>
|
||||
<span class="badge short-name">{group.shortName}</span>
|
||||
</div>
|
||||
|
||||
<div class="role">{group.role}</div>
|
||||
<div class="muted">{group.period}</div>
|
||||
|
||||
<p>{group.description}</p>
|
||||
|
||||
<div class="tags">
|
||||
{#each group.focus as area, index (area)}
|
||||
<Tag label={area} colorIndex={index} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
{#each group.links as link (link.url)}
|
||||
<LinkButton href={link.url} icon={linkIcons[link.label] ?? 'mdi:open-in-new'}>{link.label}</LinkButton>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tree-label">
|
||||
<span class="muted">$</span> ls ~/research/{group.shortName.toLowerCase()}/projects
|
||||
</div>
|
||||
|
||||
<div class="project-tree">
|
||||
{#each group.projects as project, index (project.name)}
|
||||
<div class="tree-item">
|
||||
<span class="branch">{index === group.projects.length - 1 ? '└──' : '├──'}</span>
|
||||
<div class="tree-entry">
|
||||
<ProjectEntry {project} {category} />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.research-group {
|
||||
padding: 1rem 0 1.5rem;
|
||||
border-top: 1px dashed color-mix(in srgb, var(--foreground) 25%, transparent);
|
||||
}
|
||||
|
||||
.group-title {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.path {
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.path a {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.path a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.current {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.group-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.badges,
|
||||
.tags,
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0 0.45rem;
|
||||
color: var(--background);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge.group {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.badge.short-name {
|
||||
background: var(--magenta);
|
||||
}
|
||||
|
||||
.role {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tree-label {
|
||||
margin: 1.5rem 0 0.25rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.branch {
|
||||
padding-top: 1rem;
|
||||
color: var(--muted);
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.tree-entry {
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -4,20 +4,24 @@ import leadershipData from '#content/leadership.json';
|
||||
import aboutData from '#content/about.json';
|
||||
import desktopData from '#content/desktop.json';
|
||||
import blogData from '#content/blog.json';
|
||||
import musicData from '#content/music.json';
|
||||
import openSourceData from '#content/projects/opensource.json';
|
||||
import packagesData from '#content/projects/packages.json';
|
||||
import hackathonsData from '#content/projects/hackathons.json';
|
||||
import researchData from '#content/projects/research.json';
|
||||
import organizationsData from '#content/projects/organizations.json';
|
||||
import type {
|
||||
AboutContent,
|
||||
BlogSettings,
|
||||
DesktopContent,
|
||||
Experience,
|
||||
Leadership,
|
||||
Playlist,
|
||||
Profile,
|
||||
Project,
|
||||
ProjectCategory,
|
||||
ProjectCategoryId
|
||||
ProjectCategoryId,
|
||||
ResearchGroup
|
||||
} from './types';
|
||||
|
||||
export type * from './types';
|
||||
@@ -28,6 +32,8 @@ export const leadership: Leadership[] = leadershipData;
|
||||
export const about: AboutContent = aboutData;
|
||||
export const desktop: DesktopContent = desktopData;
|
||||
export const blogSettings: BlogSettings = blogData;
|
||||
export const playlist: Playlist = musicData;
|
||||
export const researchGroups: ResearchGroup[] = researchData;
|
||||
|
||||
function featuredFirst(projects: Project[]): Project[] {
|
||||
return [...projects].sort((first, second) => Number(!!second.featured) - Number(!!first.featured));
|
||||
@@ -60,7 +66,18 @@ export const projectCategories: ProjectCategory[] = [
|
||||
title: 'Research',
|
||||
icon: 'ph:microscope-duotone',
|
||||
summary: 'Research roles, projects, and publications.',
|
||||
projects: featuredFirst(researchData)
|
||||
projects: featuredFirst(
|
||||
researchGroups.flatMap((group) =>
|
||||
group.projects.map((project) => ({ ...project, organization: project.organization ?? group.shortName }))
|
||||
)
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 'organizations',
|
||||
title: 'Organizations',
|
||||
icon: 'ph:users-three-duotone',
|
||||
summary: 'Clubs and teams I lead and help run.',
|
||||
projects: featuredFirst(organizationsData)
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -18,6 +18,7 @@ export interface Profile {
|
||||
title: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
photo?: string;
|
||||
bio: string;
|
||||
tagline: string;
|
||||
education: Education;
|
||||
@@ -55,6 +56,8 @@ export interface ProjectLinks {
|
||||
devpost?: string;
|
||||
package?: string;
|
||||
article?: string;
|
||||
docs?: string;
|
||||
website?: string;
|
||||
}
|
||||
|
||||
export interface HackathonEvent {
|
||||
@@ -82,9 +85,29 @@ export interface Project {
|
||||
event?: HackathonEvent;
|
||||
awards?: Award[];
|
||||
demoMayBeOffline?: boolean;
|
||||
socials?: Social[];
|
||||
gallery?: string[];
|
||||
}
|
||||
|
||||
export type ProjectCategoryId = 'opensource' | 'packages' | 'hackathons' | 'research';
|
||||
export interface ResearchLab {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface ResearchGroup {
|
||||
name: string;
|
||||
shortName: string;
|
||||
lab: ResearchLab;
|
||||
institution: string;
|
||||
role: string;
|
||||
period: string;
|
||||
description: string;
|
||||
focus: string[];
|
||||
links: LabeledLink[];
|
||||
projects: Project[];
|
||||
}
|
||||
|
||||
export type ProjectCategoryId = 'opensource' | 'packages' | 'hackathons' | 'research' | 'organizations';
|
||||
|
||||
export interface ProjectCategory {
|
||||
id: ProjectCategoryId;
|
||||
@@ -113,6 +136,7 @@ export interface RatedTitle {
|
||||
}
|
||||
|
||||
export interface AboutContent {
|
||||
anilistUsername?: string;
|
||||
hobbies: Hobby[];
|
||||
games: Game[];
|
||||
shows: RatedTitle[];
|
||||
@@ -145,6 +169,10 @@ export interface DesktopContent {
|
||||
startupCommand: string;
|
||||
}
|
||||
|
||||
export interface Playlist {
|
||||
videos: string[];
|
||||
}
|
||||
|
||||
export interface BlogSettings {
|
||||
name: string;
|
||||
tagline: string;
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export interface RepoStats {
|
||||
stars: number;
|
||||
forks: number;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { RepoStats } from '#lib/github/types';
|
||||
|
||||
const cacheDuration = 60 * 60 * 1000;
|
||||
const githubRepoPattern = /^https:\/\/github\.com\/([^/]+\/[^/#?]+)/;
|
||||
|
||||
const statsCache = new Map<string, { stats: RepoStats; fetchedAt: number }>();
|
||||
|
||||
function githubRepoPath(url: string): string | null {
|
||||
const match = url.match(githubRepoPattern);
|
||||
return match ? match[1].replace(/\.git$/, '') : null;
|
||||
}
|
||||
|
||||
async function fetchRepoStats(repoPath: string): Promise<RepoStats | null> {
|
||||
const cached = statsCache.get(repoPath);
|
||||
if (cached && Date.now() - cached.fetchedAt < cacheDuration) return cached.stats;
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://api.github.com/repos/${repoPath}`, {
|
||||
headers: { Accept: 'application/vnd.github+json', 'User-Agent': 'portfolio-website' }
|
||||
});
|
||||
if (!response.ok) return cached?.stats ?? null;
|
||||
|
||||
const repo = await response.json();
|
||||
const stats: RepoStats = { stars: repo.stargazers_count, forks: repo.forks_count };
|
||||
statsCache.set(repoPath, { stats, fetchedAt: Date.now() });
|
||||
return stats;
|
||||
} catch {
|
||||
return cached?.stats ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function getRepoStats(codeUrls: string[]): Promise<Record<string, RepoStats>> {
|
||||
const results = await Promise.all(
|
||||
codeUrls.map(async (codeUrl) => {
|
||||
const repoPath = githubRepoPath(codeUrl);
|
||||
const stats = repoPath ? await fetchRepoStats(repoPath) : null;
|
||||
return [codeUrl, stats] as const;
|
||||
})
|
||||
);
|
||||
return Object.fromEntries(results.filter((result): result is readonly [string, RepoStats] => result[1] !== null));
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
const cacheDuration = 60 * 60 * 1000;
|
||||
const dayDuration = 24 * 60 * 60 * 1000;
|
||||
const maxRangeDays = 540;
|
||||
const npmPackagePattern = /^https:\/\/www\.npmjs\.com\/package\/((?:@[^/]+\/)?[^/#?]+)/;
|
||||
|
||||
const downloadsCache = new Map<string, { downloads: number; fetchedAt: number }>();
|
||||
|
||||
function npmPackageName(url: string): string | null {
|
||||
return url.match(npmPackagePattern)?.[1] ?? null;
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
return date.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
async function fetchCreatedDate(packageName: string): Promise<Date> {
|
||||
const response = await fetch(`https://registry.npmjs.org/${packageName.replace('/', '%2f')}`);
|
||||
if (!response.ok) throw new Error(`npm registry returned ${response.status} for ${packageName}`);
|
||||
const metadata = await response.json();
|
||||
return new Date(metadata.time.created);
|
||||
}
|
||||
|
||||
async function fetchDownloadsBetween(packageName: string, start: Date, end: Date): Promise<number> {
|
||||
const range = `${formatDate(start)}:${formatDate(end)}`;
|
||||
const response = await fetch(`https://api.npmjs.org/downloads/point/${range}/${packageName}`);
|
||||
if (!response.ok) throw new Error(`npm downloads returned ${response.status} for ${packageName}`);
|
||||
const result = await response.json();
|
||||
return result.downloads ?? 0;
|
||||
}
|
||||
|
||||
async function fetchTotalDownloads(packageName: string): Promise<number | null> {
|
||||
const cached = downloadsCache.get(packageName);
|
||||
if (cached && Date.now() - cached.fetchedAt < cacheDuration) return cached.downloads;
|
||||
|
||||
try {
|
||||
const today = new Date();
|
||||
const rangeRequests: Promise<number>[] = [];
|
||||
for (let rangeStart = await fetchCreatedDate(packageName); rangeStart <= today; ) {
|
||||
const rangeEnd = new Date(Math.min(rangeStart.getTime() + (maxRangeDays - 1) * dayDuration, today.getTime()));
|
||||
rangeRequests.push(fetchDownloadsBetween(packageName, rangeStart, rangeEnd));
|
||||
rangeStart = new Date(rangeEnd.getTime() + dayDuration);
|
||||
}
|
||||
|
||||
const downloads = (await Promise.all(rangeRequests)).reduce((total, count) => total + count, 0);
|
||||
downloadsCache.set(packageName, { downloads, fetchedAt: Date.now() });
|
||||
return downloads;
|
||||
} catch (error) {
|
||||
console.error(`npm download count failed for ${packageName}:`, error);
|
||||
return cached?.downloads ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPackageDownloads(packageUrls: string[]): Promise<Record<string, number>> {
|
||||
const results = await Promise.all(
|
||||
packageUrls.map(async (packageUrl) => {
|
||||
const packageName = npmPackageName(packageUrl);
|
||||
const downloads = packageName ? await fetchTotalDownloads(packageName) : null;
|
||||
return [packageUrl, downloads] as const;
|
||||
})
|
||||
);
|
||||
return Object.fromEntries(results.filter((result): result is readonly [string, number] => result[1] !== null));
|
||||
}
|
||||
@@ -10,13 +10,13 @@ export interface SitePage {
|
||||
}
|
||||
|
||||
export const sitePages: SitePage[] = [
|
||||
{ name: 'about', path: '/about', title: 'About', description: 'Background, hobbies, games, shows and movies.', icon: 'ph:user-circle-duotone' },
|
||||
{ name: 'about', path: '/about', title: 'About', description: 'Background, hobbies, games, shows, movies and anime.', icon: 'ph:user-circle-duotone' },
|
||||
{ name: 'portfolio', path: '/portfolio', title: 'Portfolio', description: 'Profile, experience, skills and contact info.', icon: 'ph:briefcase-duotone' },
|
||||
{
|
||||
name: 'projects',
|
||||
path: '/projects',
|
||||
title: 'Projects',
|
||||
description: 'Open source, packages, hackathons and research.',
|
||||
description: 'Open source, packages, hackathons, research and organizations.',
|
||||
icon: 'ph:folder-open-duotone',
|
||||
children: projectCategories.map((category) => ({
|
||||
name: category.id,
|
||||
|
||||
@@ -59,7 +59,7 @@ export const infoCommands: Command[] = [
|
||||
{
|
||||
name: 'projects',
|
||||
description: 'List projects, optionally by category',
|
||||
usage: 'projects [opensource|packages|hackathons|research]',
|
||||
usage: 'projects [opensource|packages|hackathons|research|organizations]',
|
||||
argumentOptions: () => projectCategories.map((category) => category.id),
|
||||
run: (args, context) => {
|
||||
const categories = args[0] ? [findProjectCategory(args[0])] : projectCategories;
|
||||
|
||||
@@ -10,12 +10,13 @@
|
||||
function countLabel(id: string, count: number): string {
|
||||
if (id === 'hackathons') return count === 1 ? 'event' : 'events';
|
||||
if (id === 'packages') return 'published';
|
||||
if (id === 'organizations') return count === 1 ? 'organization' : 'organizations';
|
||||
return count === 1 ? 'project' : 'projects';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<PageHeader command="ls ~/projects" title="My Project Universe" subtitle="Everything I build lives in one of four buckets. Pick a door." />
|
||||
<PageHeader command="ls ~/projects" title="My Project Universe" subtitle="Everything I build lives in one of five buckets. Pick a door." />
|
||||
<ProjectNav />
|
||||
|
||||
<div class="category-grid">
|
||||
@@ -46,7 +47,7 @@
|
||||
<style>
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { findProjectCategory, projectCategories } from '#lib/content';
|
||||
import { getRepoStats } from '#lib/server/github';
|
||||
import { getPackageDownloads } from '#lib/server/npm';
|
||||
import type { EntryGenerator, PageServerLoad } from './$types';
|
||||
|
||||
const categoriesWithRepoStats = new Set(['opensource', 'packages']);
|
||||
const categoriesWithDownloads = new Set(['packages']);
|
||||
|
||||
export const entries: EntryGenerator = () => projectCategories.map((category) => ({ category: category.id }));
|
||||
|
||||
export const load: PageServerLoad = async ({ params }) => {
|
||||
const category = findProjectCategory(params.category);
|
||||
if (!category) error(404, 'Project category not found');
|
||||
|
||||
const codeUrls = categoriesWithRepoStats.has(category.id)
|
||||
? category.projects.flatMap((project) => (project.links.code ? [project.links.code] : []))
|
||||
: [];
|
||||
const packageUrls = categoriesWithDownloads.has(category.id)
|
||||
? category.projects.flatMap((project) => (project.links.package ? [project.links.package] : []))
|
||||
: [];
|
||||
|
||||
const [repoStats, packageDownloads] = await Promise.all([getRepoStats(codeUrls), getPackageDownloads(packageUrls)]);
|
||||
|
||||
return { categoryId: category.id, repoStats, packageDownloads };
|
||||
};
|
||||
@@ -1,15 +1,17 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import { findProjectCategory } from '#lib/content';
|
||||
import { findProjectCategory, researchGroups } from '#lib/content';
|
||||
import PageHeader from '#lib/components/ui/PageHeader.svelte';
|
||||
import ProjectNav from '#lib/components/projects/ProjectNav.svelte';
|
||||
import ProjectEntry from '#lib/components/projects/ProjectEntry.svelte';
|
||||
import ResearchGroup from '#lib/components/research/ResearchGroup.svelte';
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
|
||||
const category = $derived(findProjectCategory(data.categoryId)!);
|
||||
const awardCount = $derived(category.projects.filter((project) => project.awards?.length).length);
|
||||
const featuredCount = $derived(category.projects.filter((project) => project.featured).length);
|
||||
const isResearch = $derived(category.id === 'research');
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
@@ -17,7 +19,10 @@
|
||||
<ProjectNav />
|
||||
|
||||
<div class="stats">
|
||||
<span>Total: <b class="total">{category.projects.length}</b></span>
|
||||
{#if isResearch}
|
||||
<span>Groups: <b class="total">{researchGroups.length}</b></span>
|
||||
{/if}
|
||||
<span>{isResearch ? 'Projects' : 'Total'}: <b class="total">{category.projects.length}</b></span>
|
||||
{#if awardCount}
|
||||
<span>Awards: <b class="awards">{awardCount}</b></span>
|
||||
{/if}
|
||||
@@ -26,9 +31,20 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#each category.projects as project (project.name)}
|
||||
<ProjectEntry {project} {category} />
|
||||
{#if isResearch}
|
||||
{#each researchGroups as group (group.name)}
|
||||
<ResearchGroup {group} {category} />
|
||||
{/each}
|
||||
{:else}
|
||||
{#each category.projects as project (project.name)}
|
||||
<ProjectEntry
|
||||
{project}
|
||||
{category}
|
||||
repoStats={project.links.code ? data.repoStats[project.links.code] : undefined}
|
||||
downloads={project.links.package ? data.packageDownloads[project.links.package] : undefined}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 714 KiB |
Reference in new issue
Block a user