The library behind danielsimonian.dev: a portfolio for remote roles, custom systems for businesses and, soon, teaching and a student area. One identity, two voices.
Brand
Monogram, wordmark and a single signal-orange accent.
Icons
Lucide, thin uniform stroke; monochrome technology logos.
pnpm dlx skills add emilkowalski/skillsComponents
Basic, portfolio, solutions and teaching pieces.
Colors
Neutral base in both themes, AA contrast validated.
Compare themes
Light · TE
Dark · Linear/Geist
01 / 05
Primitive palette → semantic tokens → Tailwind utilities. Neutral base in both themes, one signal-orange accent, cobalt for teaching.
styles/tokens.cssSemantic tokens resolve per theme — toggle the theme to see values change. Components never use primitives directly.
Background & surface
--bg…--bg-subtle…--surface…--surface-raised…--surface-hover…--surface-sunken…--surface-inverse…Text
--text…--text-muted…--text-subtle…--text-inverse…--text-disabled…Border & grid
--border…--border-strong…--border-input…--grid-line…--grid-construction…Brand · signal orange
--brand…--brand-hover…--brand-text…--brand-subtle…--brand-border…Teaching · cobalt
--teach…--teach-text…--teach-subtle…--teach-border…Feedback
--success…--success-subtle…--warning…--warning-subtle…--danger…--danger-subtle…--info…--info-subtle…Primitives
grayorangebluegreenamberredcyanComputed live from the current theme. Text ≥ 4.5:1, UI components ≥ 3:1. Orange fills always carry near-black text.
| Sample | Foreground / background | Use | Ratio | AA |
|---|
Geist · Geist MonoOne sans for reading and headings, one mono for labels, metadata, numbers and code — the mono is part of the identity. Display is used sparingly.
text-display44→88 · 800 · -0.045em · uppercase
Signal.
text-h132→48 · 700
Systems built to fit
text-h224→32 · 600
Featured projects
text-h320 · 600
Ranking BT
text-h416 · 600
My role
text-body-lg18 · 400 · 1.6
I build web products end to end and ship them to production.
text-body16 · 400 · 1.65
Ranking platform for the beach tennis community.
text-body-sm14 · 400
Supporting text in cards and forms.
text-caption13 · 400
Caption · updated Sep 25, 2026
label-mono11 · mono · 500 · +0.08em · caps
01 — Projects · 2022 → now
text-code13 · mono · 1.7
const ranking = athletes.sort(byPoints)
4px base. Sections breathe (64–128px); components stay tight (8–24px).
--space-14px--space-28px--space-312px--space-416px--space-624px--space-832px--space-1248px--space-1664px--space-2496px--space-32128pxGenerous radii on containers, tight on chips. Depth comes from borders and surface steps; shadows only on floating layers.
xs · 4sm · 6md · 8lg · 12xl · 162xl · 24pill · 9990border onlye1tabs, segmentede2menus, toastse3modals, lightboxA 672px reading column (leerob) inside a 1152px page. Content-first; the grid shows through as hairlines, not boxes.
viewport: …px → …
Emil Kowalski · animate / review-animationsShort and functional. Strong ease-out for enter/exit, never ease-in, nothing from scale(0), UI under 300ms, hover motion only on fine pointers, keyboard actions never animate.
--ease-out-strongEnter / exit
--ease-in-out-strongMove on screen
--ease-drawerDrawers, sheets
ease (CSS)Hover, colour
prefers-reduced-motion: …
lucide-react · simple-iconsLucide at 1.5–2px stroke for UI. Technology logos are monochrome (currentColor) so the set stays consistent — never full-colour brand logos side by side.
section-label · ruler · waveform · grid-frameThe ~20% Teenage Engineering: numbered mono labels, DAW-style rulers as dividers, a waveform texture and construction lines. Details, not a theme.
01Projects
02 / 05Stack
03Teaching
2022 → now
Rule: at most one identity detail per block. If it hurts reading, it goes.
02 / 05
shadcn/ui (Radix) customised with the tokens. Every control has visible keyboard focus, disabled, loading and error states where they apply.
input · textarea · password-input · search-input · fieldField wires label, hint and error to the control (aria-describedby / aria-invalid). 16px text on mobile avoids iOS zoom.
As shown on the certificate
Enter a valid e-mail, like name@company.com
⌘ K focuses · Esc clears
Radix primitivescomponents/ui/avatar.tsxbadge.tsx · tech-tag.tsxStatus always pairs colour with text. Tech tags are mono with an optional monochrome logo.
Popovers scale from their trigger (transform-origin), 150ms ease-out. Tooltips skip the delay once one is open.
alert.tsx · sonnerToasts (Sonner) confirm actions: copy e-mail, form sent, assignment delivered. Bottom-right, swipe to dismiss, pause on hover.
dialog · drawer (Vaul) · sheetModal stays centred (no transform-origin). Drawer uses Vaul: drag to dismiss with momentum, iOS curve. Sheet for side panels (e.g. case study).
locale-switcher · theme-switcherRadio-group semantics: Tab focuses the group, ← → change the option. Theme has system / light / dark.
external-link · copy-button03 / 05
Technical, direct voice for recruiters and developers. English first. Content is the hero; identity lives in labels, numbering and hairlines.
portfolio/site-header.tsxSticky, translucent bar. Below 1024px the links move into a Vaul bottom drawer with 56px tap targets and safe-area padding.
Narrow the window below 1024px to see the mobile version.
portfolio/hero.tsxTwo variants for Part 2's prototype picker: display (heavy TE type, used once) and quiet (leerob).
Full Stack Developer · Santos, SP, Brazil
I build web products end to end — from the database schema to the last pixel — and ship them to production. Twenty years of teaching and audio engineering taught me to explain clearly and care about timing.
danielsimonian@me.comFull Stack Developer · Santos, SP, Brazil
I build web products end to end — from the database schema to the last pixel — and ship them to production. Twenty years of teaching and audio engineering taught me to explain clearly and care about timing.
danielsimonian@me.comportfolio/project-card.tsxFeatured (large, with cover), default (card) and compact (list row). Name, type, description, stack, status and links.
Ranking · Feminino C
Baixada Santista 2026
01Own productDAMA Sports2024 → now
Ranking platform for the beach tennis community: tournaments, categories, weekly standings and athlete history in one place.
ClientPORTO 360 · TV Globo2025
Website for a TV presenter and his port-industry programme, with DNS on Cloudflare and deploys on Vercel.
Own product2025
Inventory management SaaS for small businesses: products, stock movements and low-stock alerts.
Ranking platform for the beach tennis community: tournaments, categories, weekly standings and athlete history in one place.
Website and platform for my creative agency: public pages for the Tech, Sports and Studio divisions, tournament pages, plus an admin CRM for clients and quotes and a password-gated client portal.
Management system for clinics: online booking, patient records and follow-up in a single place owned by the clinic.
Website for a TV presenter and his port-industry programme, with DNS on Cloudflare and deploys on Vercel.
portfolio/project-filter.tsxFilter by type and technology with live counts. Pick Stripe + Client to see the empty state.
7 / 7 projects
Own productDAMA Sports2024 → now
Ranking platform for the beach tennis community: tournaments, categories, weekly standings and athlete history in one place.
Own productDAMA Digital Criativa2025 → now
Website and platform for my creative agency: public pages for the Tech, Sports and Studio divisions, tournament pages, plus an admin CRM for clients and quotes and a password-gated client portal.
Own product2025
Management system for clinics: online booking, patient records and follow-up in a single place owned by the clinic.
ClientPORTO 360 · TV Globo2025
Website for a TV presenter and his port-industry programme, with DNS on Cloudflare and deploys on Vercel.
Client2024
Institutional website for a music school with 20+ years in Santos: courses, teachers and enrolment contact.
Own product2025
Inventory management SaaS for small businesses: products, stock movements and low-stock alerts.
Own product2024
Generator and manager for dynamic QR codes — used to track equipment for a service provider.
portfolio/case-study.tsxContext → role → solution → architecture → stack → results → learnings. Numbered labels stick on desktop.
01Context
Each organiser published results their own way. Athletes didn't know their real standing and sponsors had no numbers.
02My role
Product, design and end-to-end development — from the Postgres schema to deploy.
03Stack
04Results
Athletes
1.2k
in the ranking
Tournaments
86
recorded
LCP
<1s
mobile median
Illustrative values — Ranking BT's real metrics are still pending.
05Learnings
portfolio/stat.tsxAthletes ranked
1.2k+18%
Baixada Santista, 2026
Tournaments recorded
86
since 2024
Teaching
24yrs
music and technology
Illustrative values until real numbers arrive.
portfolio/architecture-diagram.tsxBoxes and arrows, left → right (stacks on mobile). The brand-topped box marks the core. Screen readers get an ordered text version.
portfolio/device-frame.tsxFrames hold real UI (mock screens are components, not images), so they theme and translate.
Ranking · Feminino C
Baixada Santista 2026
Marina Couto
Feminino C · 12 torneios
Pontos por etapa · 2026
portfolio/screenshot-gallery.tsxClick to enlarge. ← → navigate, Esc closes, focus is trapped and returned. Opens from scale(.96) in 200ms.
portfolio/code-block.tsx · sugar-high// lib/ranking.ts — points per category, ties broken by tournaments playedexport function buildRanking(results: Result[]): RankingRow[] { const byAthlete = Map.groupBy(results, (r) => r.athleteId) return [...byAthlete.entries()] .map(([athleteId, rows]) => ({ athleteId, points: rows.reduce((sum, r) => sum + r.points, 0), tournaments: rows.length, })) .sort((a, b) => b.points - a.points || b.tournaments - a.tournaments) .map((row, i) => ({ ...row, position: i + 1 }))}portfolio/experience-timeline.tsx2022 → now
Santos, Brazil · Remote
Digital studio with three divisions (Tech, Sports, Studio). I design, build and operate web products and client systems — from discovery to production and support.
2021 → now
Santos, Brazil
Programming Logic & Data Structures, Phonographic Production, Audiovisual and Advertising. I turn class projects into real, deployed experiments.
2001 → 2025
Santos, Brazil
Ran a music school for over two decades: teaching, curriculum, team and operations — the school where I learned to manage people and processes.
portfolio/education-card.tsxPUCRS
SENAC Santos
SENAC
portfolio/skills-map.tsxGrouped by area like channels on a mixer. No percentage bars.
portfolio/now-section.tsxDaniel Simonian
Santos, SP, Brazil
Before code, there was music: I ran a music school for over two decades, produced records and taught phonographic production. Today I run DAMA Digital Criativa, build my own products (Ranking BT, Clinup, PlayStock) and teach programming logic at ESAMC Santos.
Now · Sep 2026
InterestsBeach tennis · Audio engineering · Design systems · Teaching
portfolio/contact.tsxCopyable e-mail (toast), LinkedIn, GitHub and a validated form. Tick “Simulate failure” to see the error state.
09Contact
Remote roles, projects for your business, or invitations to teach and speak.
portfolio/article-card.tsxWhat I learned modelling categories, tournaments and tie-breaks in Postgres.
Lab6 min read
portfolio/spec-sheet.tsxTeenage Engineering-style table: mono label left, value right, hairlines. For project metadata, stack and education.
portfolio/command-copy.tsxFor the hero and for class material.
pnpm create next-app@latest aula-01 --tsdanielsimonian@me.comportfolio/illustration-card.tsxA reserved slot for ONE authored illustration of Daniel's path (Santos, the sea, music, classroom, code). Shown here with an original line-art placeholder.
tiguinho/tiguinho.tsxIn memory of Tiguinho, Daniel's cat. Hidden on public pages; every minute or two he peeks, crosses, follows the cursor or naps. Hover or tap: slow blink + heart; click: name tag. Never over dialogs or while typing. Dev: ?tiguinho=peek|cross|follow|nap.
walksitblinkloafpeekpeekBlinkcrouchleapfallplaystretchportfolio/grid-frame.tsx01 — Stack
Next.js · Supabase · Vercel
02 — Timezone
UTC-3 · Santos, BR
04 / 05
Plain, jargon-free voice for business owners: results, not technology. Same tokens; orange can appear a little more on CTAs.
solutions/segment-card.tsxLarge and compact. As toggles they drive the system preview below — click one.
solutions/system-preview.tsxSimulated screens per segment with small, real interactions: book a slot, pay a tuition, add a dish, approve a quote.
Schedule · Dr. Helena Prado
General practice · October
Mon 06
Tue 07
Wed 08
solutions/module-builder.tsxPick a segment, toggle modules. The summary names the project type. No automatic prices — it ends in “Request a proposal”, which prefills the briefing below.
solutions/saas-comparison.tsxHonest: it also states where SaaS wins (time to start).
| Criteria | Generic SaaS | Your own system |
|---|---|---|
| Monthly cost | Per user, grows with the team | Hosting + optional support plan |
| Customisation | What the vendor allows | Built around your process |
| Data ownership | Stored on the vendor's account | Yours, exportable any time |
| Integration with your site | Embeds and external links | Same site, same login |
| Your brand | Vendor logo and domain | Your name, your domain |
| Time to start | Same day | Weeks — it's built for you |
solutions/process-steps.tsx01 / 05
Conversation
We map how your business works today and what hurts.
02 / 05
Proposal
Scope, timeline and price in writing — no surprises.
03 / 05
Prototype
You click through the screens before a line of code.
04 / 05
Development
Weekly previews you can open on your phone.
05 / 05
Launch & support
Training, go-live and a support plan if you want one.
solutions/package-card.tsxPrices are optional (“from”). Shown with and without.
A fast, clear site that turns visitors into contacts.
2–3 weeks
Your site plus one or two modules working together.
5–8 weeks
A system shaped around your whole operation.
from R$ —
From 10 weeks
“R$ —” is a placeholder: prices haven't been defined yet.
solutions/client-case-card.tsxClient, segment, challenge, what was built, result. No invented testimonials.
solutions/faq.tsxsolutions/briefing-form.tsxSegment → needs → timeline → contact. Progress, per-step validation, sending / success / error, WhatsApp alternative.
solutions/cta-band.tsxAlways rendered on the dark palette (inverse moment) in both themes.
Next step
A 30-minute, no-commitment call to see whether your own system makes sense for you.
05 / 05
Portuguese only. Cobalt marks the teaching context without breaking the identity. Built now, screens come later.
teaching/course-card.tsxESAMC Santos
Desenvolvimento Full Stack
6 módulos
ESAMC Santos
Produção Audiovisual
8 módulos
teaching/lesson-card.tsxVariáveis, tipos, operadores e o primeiro programa rodando no navegador e no Node.
if/else, switch, for, while — e como escolher a estrutura certa para cada problema.
Coleções de dados na prática, com um mini-ranking de beach tennis como exemplo.
teaching/student-work-card.tsxLógica Computacional · 2026.1 · Turma B
Ana Beatriz Nogueira, João Pedro Albuquerque
Estrutura de Dados · 2025.2 · Turma A
Lucas Ferreira, Rafaela Costa, Thiago Mendes
teaching/works-showcase.tsx3 trabalhos
Lógica Computacional · 2026.1 · Turma B
Ana Beatriz Nogueira, João Pedro Albuquerque
Lógica Computacional · 2026.1 · Turma A
Maria Eduarda Santos de Oliveira
Estrutura de Dados · 2025.2 · Turma A
Lucas Ferreira, Rafaela Costa, Thiago Mendes
teaching/student-profile.tsxMaria Eduarda Santos de Oliveira
2026.1 · Turma A
João Pedro Albuquerque
2026.1 · Turma B
Desenvolvimento Full Stack · ESAMC Santos
teaching/login-box.tsxEntre para ver aulas, entregas e feedback.
Entre para ver aulas, entregas e feedback.
teaching/assignment.tsxLógica Computacional II · Módulo A
Crie uma função que receba uma lista de atletas com pontos e devolva o ranking ordenado, com desempate por número de torneios. Publique no GitHub e envie o link.
Prazo:
Arraste arquivos aqui ou
.zip, .pdf ou .js · até 20 MB
teaching/teacher-feedback.tsxDaniel Simonian avaliou sua entrega ·
ABoa separação entre a função de ordenação e a de desempate. Próximo passo: trocar o for por reduce e escrever dois testes para os casos de empate.
teaching/module-progress.tsx4/6 aulas · 67%
teaching/deadline-list.tsxQuiz — estruturas de repetição
Quiz
Atividade 02 — Ranking com arrays
Atividade
Entrega parcial do projeto
Projeto
teaching/playground-card.tsxPlayground · Aula A.03
components/states/*Empty, loading skeleton, error, 404 and restricted access.
Nenhuma entrega ainda
Quando você enviar uma atividade, ela aparece aqui.
Não foi possível carregar as aulas
O servidor demorou para responder. Seus dados estão salvos.
ERR_TIMEOUT · 504ERR 404 · PAGE NOT FOUND
The address may have moved or never existed. Head back and take another path.
Back to start401 · ÁREA DO ALUNO
Acesso restrito
Esta área é exclusiva para alunos matriculados. Entre com o e-mail institucional para continuar.