/* Cover scale */
.notion-page-cover,
.notion-header__cover {
background-size: cover !important;
background-position: center center !important;
}
:root {
--gs-bg: #080808;
--gs-surface: #0e0e0c;
--gs-surface-2: #131310;
--gs-accent: #C9A96E;
--gs-text: #E8E4DA;
--gs-muted: #5a5548;
--gs-border: rgba(201, 169, 98, 0.16);
--gs-font: "Comic Sans MS", "Comic Sans", cursive;
--color-bg-default: #080808 !important;
--color-text-default: #E8E4DA !important;
}
*,
*::before,
*::after {
font-family: var(--gs-font) !important;
}
html,
body,
.super-root,
.super-content {
background: var(--gs-bg) !important;
color: var(--gs-text) !important;
font-family: var(--gs-font) !important;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image: radial-gradient(circle, rgba(201, 169, 110, 0.22) 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.35;
z-index: 0;
}
.super-content,
.notion-frame,
.notion-page-content {
position: relative;
z-index: 1;
}
.notion-page-title-text,
.notion-heading,
.notion-text,
.notion-callout-text,
.notion-page-content-inner,
.notion-h,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
span,
a,
button,
input,
textarea,
label {
color: var(--gs-text) !important;
font-family: var(--gs-font) !important;
}
.notion-divider {
border-color: var(--gs-border) !important;
}
a,
.notion-link {
color: var(--gs-accent) !important;
}
.notion-collection_view-block,
.notion-collection-item,
.notion-callout {
background: var(--gs-surface) !important;
border: 1px solid var(--gs-border) !important;
border-radius: 6px !important;
}
.super-navbar,
.notion-navbar {
background: rgba(8, 8, 8, 0.92) !important;
border-bottom: 1px solid var(--gs-border) !important;
backdrop-filter: blur(8px);
}
.notion-navbar a,
.notion-navbar button,
.notion-navbar div {
color: var(--gs-text) !important;
font-family: var(--gs-font) !important;
}
Problem
Skilled tradespeople need a modern way to present verified work history, portfolio artifacts, and marketplace-ready identity in one place.
Approach
- Built as a monorepo with mobile and backend workspaces.
- Mobile client uses React Native + Expo with TypeScript.
- Backend uses NestJS + GraphQL (code-first), PostgreSQL 16, TypeORM, and JWT authentication.
Architecture snapshot
🧩
Mobile: React Native + Expo
API: NestJS + GraphQL
Data: PostgreSQL + TypeORM
Auth: JWT + guard-based route protection
Outcome
- Working architecture for a production-oriented identity and portfolio platform.
- Clear stack boundaries and technical documentation for growth.
- Foundation aligned with Base Layer Labs product direction.
Artifacts and proof
// Example contract shape documented in the project
export type PortfolioEntry = {
title: string;
trade: string;
mediaUrls: string[];
verified: boolean;
};
What I learned
- Product framing is stronger when data model, API contracts, and mobile UX are designed together.
- Type-safe boundaries reduce integration debt as features scale.
- Documentation quality directly impacts implementation speed in solo operating mode.