Color Usage Guide Electric Blue (#3b82f6) use for:
Primary CTA buttons ("View Projects", "Contact Me") Navigation active/hover states Technical skill badges (React, TypeScript, Node.js, Python) Code snippets background Links in body text Project card borders on hover
Coral (#ff6b6b) use for:
Secondary CTAs ("Download CV", "View All Projects") Domain expertise skill badges (Bioinformatics, Data Analysis, Genomics) External link icons (GitHub, LinkedIn) Accent elements (underlines, highlights) "Featured" or "New" project tags Contact form submit button
Why this split works:
Blue = Technical/Code (aligns with traditional tech colors) Coral = Domain/Bio (warm, scientific, human element) Creates visual hierarchy without being overwhelming Tells your transition story through color
Design Tips Balance the colors (60-30-10 rule):
60%: Neutral backgrounds and text 30%: Blue (primary accent) 10%: Coral (secondary accent, use sparingly for impact)
Accessibility:
Both colors pass WCAG AA contrast on their backgrounds Use darker shades for text-on-accent scenarios Never put coral text on blue background (or vice versa)
Subtle touches:
Use very light tints for section backgrounds (5% opacity blue/coral) Gradient from blue → coral for hero section background (subtle) Animate color transitions smoothly (0.2s ease)