From 221bc03796a052b30c8104481a876a2a60014711 Mon Sep 17 00:00:00 2001 From: Muthu Kumar Date: Mon, 7 Apr 2025 18:01:22 +0530 Subject: [PATCH] feat: add second project list --- src/index.css | 21 ++--- src/pages/main/Work.tsx | 209 ++++++++++++++++++++++++++++++----------- src/pages/main/data/project.ts | 75 ++++++++++++--- 3 files changed, 221 insertions(+), 84 deletions(-) diff --git a/src/index.css b/src/index.css index f0069aa..abbec0d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,11 +1,12 @@ :root { --bg-colour: rgb(0, 0, 0); --card-bg: rgb(18, 18, 18); - --card-tags: rgb(34, 34, 34); - --card-tags-hover: rgb(25, 25, 25); + --card-tags: rgb(35, 35, 35); + --card-tags-hover: rgb(30, 30, 30); --primary-colour: rgb(255, 85, 85); --text-colour: rgb(210, 210, 210); --text-subdued: rgb(150, 150, 150); + --table-border: rgb(54, 54, 54); --card-active: rgb(45, 45, 45); --card-active-border: rgb(60, 60, 60); --card-hover: rgb(15, 15, 15); @@ -46,22 +47,18 @@ h2, h3, h4, h5, -h6, -p { +h6 { margin: 0; line-height: 1.5em; -} - -h1, -h2, -h3, -h4, -h5, -h6 { font-weight: 800; color: var(--primary-colour); } +p { + margin: 0; + line-height: 1.5em; +} + h1, h2 { line-height: 1.2em; diff --git a/src/pages/main/Work.tsx b/src/pages/main/Work.tsx index ccdc6df..c14d250 100644 --- a/src/pages/main/Work.tsx +++ b/src/pages/main/Work.tsx @@ -1,14 +1,51 @@ import React from "react"; -import { css } from "@emotion/css"; +import { css, cx } from "@emotion/css"; import Container from "../../components/Container"; -import { projects } from "./data/project"; - -type Project = { - title: string; - url?: string; - description: string; - cat: string; - tags: string[]; +import { otherProjects, projects, type Project } from "./data/project"; + +const styles = { + project: css` + position: relative; + background: var(--card-bg); + padding: 1.2rem; + cursor: default; + border-radius: 0.5rem; + + display: flex; + flex-direction: column; + transition: all 200ms; + + :hover { + filter: invert(0.08); + transform: translateY(-0.2rem); + } + + header { + display: flex; + justify-content: space-between; + align-items: center; + } + + h4 { + margin-bottom: 0.4rem; + } + `, + tag: css` + display: inline-block; + padding: 0.1rem 0.4rem; + background: var(--card-tags); + color: var(--text-colour); + border-radius: 0.2rem; + transition: all 200ms; + + :hover { + background: var(--card-tags-hover); + } + + & + & { + margin-left: 0.6rem; + } + `, }; const ProjectUnit: React.FC = ({ @@ -16,36 +53,35 @@ const ProjectUnit: React.FC = ({ url, description, cat, + wip, tags, }) => { return ( -
+
-

{title}

+
+

{title}

+ + {"{"} {cat} {"}"} + +

= ({ margin-top: auto; `}> {tags.map(tag => ( - + {tag} ))}

- - {cat} -
); }; +const otherProjectsStyle = css` + width: 100%; + border-collapse: collapse; + border-radius: 0.5rem; + overflow: hidden; + color: var(--text-colour); + + * { + border-collapse: collapse; + } + + th { + color: var(--text-subdued); + } + + th, + td { + padding: 0.9rem 1rem; + text-align: left; + line-height: 1.6; + } + + td { + border-top: 1px solid var(--table-border); + } + + /* border-bottom: 1px solid var(--table-border); */ + + td a { + display: block; + min-width: max-content; + } +`; + const Exp: React.FC = () => { return (

Things I've built

-

Some tools, libraries, and apps over time:

+

A few projects I'm proud of:

{ ))}
+
+

+ Apart from the above, I've also built some other interesting stuff over + time using a variety of technologies: +

+ + + + + + + + + {otherProjects.map(unit => ( + + + + + ))} + +
ProjectDescription
+ + {unit.title} + + + {unit.description} + + # {unit.tags.join(", ")} + +
); }; diff --git a/src/pages/main/data/project.ts b/src/pages/main/data/project.ts index 36e31c1..f786532 100644 --- a/src/pages/main/data/project.ts +++ b/src/pages/main/data/project.ts @@ -1,6 +1,15 @@ -export const projects = [ +export type Project = { + title: string; + url?: string; + description: string; + cat: string; + tags: string[]; + wip?: boolean; +}; + +export const projects: Project[] = [ { - title: window.location.hostname, + title: window.location.hostname.split(".").slice(0, 2).join("."), description: "This website.", url: "https://github.com/MKRhere/pw2", cat: "web", @@ -8,15 +17,15 @@ export const projects = [ }, { title: "hyperactive", - description: "Suite of web-app development libraries.", + description: "Suite of fast, reactive web-app development libraries.", url: "https://github.com/codefeathers/hyperactive", cat: "lib", tags: ["reactive", "ui-framework"], }, { - title: "denoland/node_shims", + title: "deno shims", description: - "Node shims for Deno’s runtime API. Contributed repo into official denoland.", + "Node shims for Deno’s runtime API. Transferred to official denoland.", url: "https://github.com/denoland/node_shims", cat: "lib", tags: ["deno", "shims"], @@ -24,31 +33,67 @@ export const projects = [ { title: "Telegraf", description: - "Active maintainer of one of the most popular Telegram Bot API libraries for Node.", + "Active maintainer of one of the most popular Telegram Bot API libraries for TypeScript.", url: "https://github.com/telegraf/telegraf", cat: "lib", tags: ["typescript", "telegram", "bot-api"], }, { - title: "runtype", - description: "Safely bring runtime values into TypeScript.", - url: "https://codefeathers.github.io/runtype", - cat: "lib", - tags: ["typescript", "runtime"], + title: "mkr/cal", + description: + "A complete calendar application with invites, task management, notetaking, and more.", + url: "https://github.com/MKRhere/cal", + cat: "web", + wip: true, + tags: ["hyperactive", "calendar"], }, { title: "Telecraft", description: "Pluggable Minecraft server administration toolkit.", url: "https://github.com/MadrasMC/telecraft", - cat: "tool", + cat: "cli", tags: ["minecraft", "node"], }, +]; + +export const otherProjects: Project[] = [ + { + title: "true-pg", + description: + "The most complete PostgreSQL schema generator for TypeScript, Kysely, Zod, and others.", + url: "https://github.com/feathers-studio/true-pg", + cat: "lib", + tags: ["postgresql", "schema", "typescript", "kysely", "zod"], + }, + { + title: "wiretap", + description: + "Extremely tiny debug logging utility for all JavaScript runtimes. Published as npm/yarn.", + url: "https://github.com/feathers-studio/wiretap", + cat: "lib", + tags: ["debug", "logging", "typescript"], + }, { - title: "Storymap (WIP)", + title: "storymap", description: "Reverse-engineered thirdparty map renderer for Vintage Story in Zig ⚡️", // url: "https://github.com/MadrasMC/storymap", - cat: "tool", - tags: ["vintage-story", "zig", "wip"], + cat: "cli", + tags: ["vintage-story", "zig"], + wip: true, + }, + { + title: "i3-ts", + description: "TypeScript bindings for the i3 window manager.", + url: "https://github.com/feathers-studio/i3-ts", + cat: "lib", + tags: ["i3", "typescript", "bindings"], + }, + { + title: "pg-extract", + description: "Extract data from PostgreSQL tables into a JSON array.", + url: "https://github.com/feathers-studio/pg-extract", + cat: "lib", + tags: ["postgresql", "json", "data-extraction"], }, ];