Product

Register

brand

Users

Academic peers, security researchers, and journalists in the organized-crime / public-health space who are evaluating Jorge’s research record and expertise. Secondarily: hiring managers at research institutions and tech companies assessing both technical and scholarly credentials. Occasionally: curious general public arriving from a media citation. Users arrive with high prior intent — they already know the name or found a specific paper — and scan to validate depth, not to be sold.

Product Purpose

Personal portfolio for Jorge Roa, MSc — Software Developer Associate at Stanford University and researcher specializing in organized crime, cartel mapping, and public health in Mexico. The site aggregates peer-reviewed publications, media appearances, tutorials, and software projects into a single authoritative record. Success means a visitor leaves with a clear, accurate picture of Jorge’s research scope and technical capabilities.

Brand Personality

Rigorous, refined, curious. The interface should feel like the work itself: precise without being cold, scholarly without being stiff. Authority comes from specificity, not from grandeur. The writing style is direct; the aesthetics follow. Emotional goals: confidence in the researcher, trust in the data, and a quiet sense that careful, serious work is happening here.

Anti-references

  • Generic university faculty pages (Times New Roman, gray boxes, no visual system)
  • The academic-portfolio SaaS template look (card grid + sidebar nav + pastel tags)
  • Over-designed personal sites that prioritize aesthetics over content legibility
  • “Startup founder” portfolio energy — bold personal branding that overpowers the research
  • Pure white backgrounds with blue hyperlinks (1990s academic default)

Design Principles

  1. Specificity over decoration — every visual choice should communicate something about the work, not just fill space. If an element could belong to any researcher’s site, reconsider it.
  2. Research is the hero — layout and hierarchy should make it trivial to find a paper, appearance, or tutorial. Navigation debt costs credibility.
  3. Earn every animation — motion is used only where it reinforces meaning (reading progress, entrance sequencing). Never ambient.
  4. Dark is intentional — the dark palette evokes late-night research environments and the subject matter (organized crime, surveillance, security). It’s not aesthetic fashion.
  5. Warmth cuts through precision — the warm accent (#E8A87C) exists to prevent the site from feeling clinical. Use it at inflection points: journal subtitles, stat highlights, hover accents that earn attention.

Accessibility & Inclusion

WCAG AA minimum. Reduced motion respected throughout (all animations have prefers-reduced-motion overrides). Color is never the sole information carrier. Focus indicators use :focus-visible to avoid penalizing mouse users while preserving keyboard navigation.