cesnimda
149 lines
11 KiB
XML
149 lines
11 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 1420" font-family="Segoe UI, Arial, sans-serif">
|
|
<defs>
|
|
<radialGradient id="halo" cx="30%" cy="18%" r="55%">
|
|
<stop offset="0%" stop-color="#3ECFAE" stop-opacity="0.07"/>
|
|
<stop offset="100%" stop-color="#3ECFAE" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse">
|
|
<circle cx="1" cy="1" r="1" fill="#E8ECF2" opacity="0.05"/>
|
|
</pattern>
|
|
</defs>
|
|
|
|
<!-- page -->
|
|
<rect width="1440" height="1420" fill="#0B0E14"/>
|
|
<rect width="1440" height="640" fill="url(#dots)"/>
|
|
<rect width="1440" height="640" fill="url(#halo)"/>
|
|
|
|
<!-- ===== HEADER 72px ===== -->
|
|
<line x1="0" y1="72" x2="1440" y2="72" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<!-- monogram -->
|
|
<rect x="120" y="20" width="32" height="32" rx="8" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="136" y="41" fill="#E8ECF2" font-family="Consolas, monospace" font-size="13" font-weight="bold" text-anchor="middle">CB</text>
|
|
<circle cx="148" cy="24" r="2" fill="#3ECFAE"/>
|
|
<!-- nav -->
|
|
<text x="420" y="41" fill="#9AA4B2" font-size="14">Projects</text>
|
|
<text x="510" y="41" fill="#9AA4B2" font-size="14">Experience</text>
|
|
<text x="620" y="41" fill="#9AA4B2" font-size="14">About</text>
|
|
<text x="695" y="41" fill="#9AA4B2" font-size="14">Contact</text>
|
|
<!-- language segmented -->
|
|
<rect x="1000" y="22" width="88" height="28" rx="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<rect x="1003" y="25" width="41" height="22" rx="11" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="1023" y="40" fill="#E8ECF2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">EN</text>
|
|
<text x="1066" y="40" fill="#9AA4B2" font-family="Consolas, monospace" font-size="11" text-anchor="middle">NO</text>
|
|
<!-- theme toggle -->
|
|
<circle cx="1122" cy="36" r="14" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<path d="M1126 30 a7 7 0 1 0 3 9 a6 6 0 0 1 -3 -9" fill="#9AA4B2"/>
|
|
<!-- CV split button -->
|
|
<rect x="1156" y="20" width="164" height="32" rx="8" fill="#3ECFAE"/>
|
|
<text x="1216" y="41" fill="#062A22" font-size="13" font-weight="600" text-anchor="middle">Download CV</text>
|
|
<line x1="1290" y1="26" x2="1290" y2="46" stroke="#062A22" stroke-opacity="0.3"/>
|
|
<path d="M1300 33 l6 6 l6 -6" fill="none" stroke="#062A22" stroke-width="1.8"/>
|
|
|
|
<!-- ===== HERO ===== -->
|
|
<text x="120" y="196" fill="#3ECFAE" font-family="Consolas, monospace" font-size="12" letter-spacing="2">SYSTEMS DEVELOPER · TØNSBERG, NORWAY</text>
|
|
<text x="120" y="262" fill="#E8ECF2" font-size="61" font-weight="600" letter-spacing="-1">Connor Babbington</text>
|
|
<text x="120" y="316" fill="#E8ECF2" font-size="26" font-weight="500">I design, build and run web systems.</text>
|
|
<text x="120" y="356" fill="#9AA4B2" font-size="18">Eight-plus years delivering internal software for UK local government —</text>
|
|
<text x="120" y="384" fill="#9AA4B2" font-size="18">now building full-stack products in Norway.</text>
|
|
|
|
<!-- trace motif -->
|
|
<path d="M120 424 H360 l12 12 H560" fill="none" stroke="#3ECFAE" stroke-width="1.5"/>
|
|
<circle cx="566" cy="436" r="4" fill="#3ECFAE"/>
|
|
<text x="582" y="441" fill="#9AA4B2" font-family="Consolas, monospace" font-size="12">status: open to work</text>
|
|
|
|
<!-- chips -->
|
|
<g font-family="Consolas, monospace" font-size="12">
|
|
<rect x="120" y="466" width="150" height="30" rx="15" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="195" y="485" fill="#9AA4B2" text-anchor="middle">Tønsberg, Norway</text>
|
|
<rect x="282" y="466" width="128" height="30" rx="15" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="346" y="485" fill="#9AA4B2" text-anchor="middle">Work permit ✓</text>
|
|
<rect x="422" y="466" width="200" height="30" rx="15" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="522" y="485" fill="#9AA4B2" text-anchor="middle">Remote / hybrid / on-site</text>
|
|
<rect x="634" y="466" width="212" height="30" rx="15" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="740" y="485" fill="#9AA4B2" text-anchor="middle">English native · Norsk B1</text>
|
|
</g>
|
|
|
|
<!-- CTAs -->
|
|
<rect x="120" y="530" width="156" height="44" rx="8" fill="#3ECFAE"/>
|
|
<text x="198" y="557" fill="#062A22" font-size="15" font-weight="600" text-anchor="middle">View projects</text>
|
|
<rect x="292" y="530" width="196" height="44" rx="8" fill="none" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<text x="390" y="557" fill="#E8ECF2" font-size="15" text-anchor="middle">Download CV · pdf</text>
|
|
|
|
<!-- portrait -->
|
|
<rect x="1020" y="150" width="300" height="375" rx="16" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
|
<circle cx="1170" cy="290" r="72" fill="#242B38"/>
|
|
<path d="M1080 525 q90 -110 180 0" fill="#242B38"/>
|
|
<text x="1170" y="300" fill="#5C6675" font-size="13" text-anchor="middle">[ outdoor headshot ]</text>
|
|
<text x="1020" y="552" fill="#5C6675" font-family="Consolas, monospace" font-size="12">tønsberg, norway · 2025</text>
|
|
|
|
<!-- ===== PROOF STRIP ===== -->
|
|
<g>
|
|
<rect x="120" y="620" width="285" height="96" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="144" y="662" fill="#E8ECF2" font-size="28" font-weight="600">8+ yrs</text>
|
|
<text x="144" y="692" fill="#5C6675" font-family="Consolas, monospace" font-size="11" letter-spacing="1.5">EXPERIENCE</text>
|
|
<rect x="425" y="620" width="285" height="96" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="449" y="662" fill="#E8ECF2" font-size="22" font-weight="600">UK public sector</text>
|
|
<text x="449" y="692" fill="#5C6675" font-family="Consolas, monospace" font-size="11" letter-spacing="1.5">BACKGROUND</text>
|
|
<rect x="730" y="620" width="285" height="96" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="754" y="662" fill="#E8ECF2" font-size="22" font-weight="600">.NET · React · Docker</text>
|
|
<text x="754" y="692" fill="#5C6675" font-family="Consolas, monospace" font-size="11" letter-spacing="1.5">CORE STACK</text>
|
|
<rect x="1035" y="620" width="285" height="96" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="1059" y="662" fill="#E8ECF2" font-size="22" font-weight="600">Based in Norway</text>
|
|
<text x="1059" y="692" fill="#5C6675" font-family="Consolas, monospace" font-size="11" letter-spacing="1.5">WORK PERMIT ✓</text>
|
|
</g>
|
|
|
|
<!-- ===== SKILLS SECTION ===== -->
|
|
<text x="120" y="828" fill="#3ECFAE" font-family="Consolas, monospace" font-size="12" letter-spacing="2">01 — SKILLS</text>
|
|
<text x="120" y="880" fill="#E8ECF2" font-size="39" font-weight="600">What I work with</text>
|
|
<text x="120" y="916" fill="#9AA4B2" font-size="16">A practical profile: business value, maintainability, dependable delivery.</text>
|
|
|
|
<!-- three cards -->
|
|
<g>
|
|
<rect x="120" y="956" width="384" height="360" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="144" y="996" fill="#5C6675" font-family="Consolas, monospace" font-size="11" letter-spacing="1.5">01 — DEVELOPMENT</text>
|
|
<text x="144" y="1032" fill="#9AA4B2" font-size="14">Backend-leaning full-stack work in the</text>
|
|
<text x="144" y="1052" fill="#9AA4B2" font-size="14">.NET ecosystem.</text>
|
|
<g font-family="Consolas, monospace" font-size="12" fill="#E8ECF2">
|
|
<rect x="144" y="1080" width="52" height="28" rx="14" fill="#171C26"/><text x="170" y="1098" text-anchor="middle">C#</text>
|
|
<rect x="204" y="1080" width="64" height="28" rx="14" fill="#171C26"/><text x="236" y="1098" text-anchor="middle">.NET</text>
|
|
<rect x="276" y="1080" width="76" height="28" rx="14" fill="#171C26"/><text x="314" y="1098" text-anchor="middle">Python</text>
|
|
<rect x="144" y="1118" width="110" height="28" rx="14" fill="#171C26"/><text x="199" y="1136" text-anchor="middle">TypeScript</text>
|
|
<rect x="262" y="1118" width="66" height="28" rx="14" fill="#171C26"/><text x="295" y="1136" text-anchor="middle">React</text>
|
|
<rect x="144" y="1156" width="56" height="28" rx="14" fill="#171C26"/><text x="172" y="1174" text-anchor="middle">SQL</text>
|
|
<rect x="208" y="1156" width="110" height="28" rx="14" fill="#171C26"/><text x="263" y="1174" text-anchor="middle">JavaScript</text>
|
|
</g>
|
|
|
|
<rect x="528" y="956" width="384" height="360" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="552" y="996" fill="#5C6675" font-family="Consolas, monospace" font-size="11" letter-spacing="1.5">02 — DEVOPS & INFRASTRUCTURE</text>
|
|
<text x="552" y="1032" fill="#9AA4B2" font-size="14">I deploy and operate what I build —</text>
|
|
<text x="552" y="1052" fill="#9AA4B2" font-size="14">professionally and at home.</text>
|
|
<g font-family="Consolas, monospace" font-size="12" fill="#E8ECF2">
|
|
<rect x="552" y="1080" width="76" height="28" rx="14" fill="#171C26"/><text x="590" y="1098" text-anchor="middle">Docker</text>
|
|
<rect x="636" y="1080" width="66" height="28" rx="14" fill="#171C26"/><text x="669" y="1098" text-anchor="middle">Linux</text>
|
|
<rect x="710" y="1080" width="66" height="28" rx="14" fill="#171C26"/><text x="743" y="1098" text-anchor="middle">CI/CD</text>
|
|
<rect x="552" y="1118" width="130" height="28" rx="14" fill="#171C26"/><text x="617" y="1136" text-anchor="middle">Azure DevOps</text>
|
|
<rect x="690" y="1118" width="150" height="28" rx="14" fill="#171C26"/><text x="765" y="1136" text-anchor="middle">Reverse proxies</text>
|
|
<rect x="552" y="1156" width="120" height="28" rx="14" fill="#171C26"/><text x="612" y="1174" text-anchor="middle">Monitoring</text>
|
|
<rect x="680" y="1156" width="130" height="28" rx="14" fill="#171C26"/><text x="745" y="1174" text-anchor="middle">Self-hosting</text>
|
|
</g>
|
|
|
|
<rect x="936" y="956" width="384" height="360" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
|
<text x="960" y="996" fill="#5C6675" font-family="Consolas, monospace" font-size="11" letter-spacing="1.5">03 — PRACTICES</text>
|
|
<text x="960" y="1032" fill="#9AA4B2" font-size="14">Production thinking: testing, security,</text>
|
|
<text x="960" y="1052" fill="#9AA4B2" font-size="14">and honest communication.</text>
|
|
<g font-family="Consolas, monospace" font-size="12" fill="#E8ECF2">
|
|
<rect x="960" y="1080" width="86" height="28" rx="14" fill="#171C26"/><text x="1003" y="1098" text-anchor="middle">Testing</text>
|
|
<rect x="1054" y="1080" width="130" height="28" rx="14" fill="#171C26"/><text x="1119" y="1098" text-anchor="middle">OAuth2 flows</text>
|
|
<rect x="960" y="1118" width="180" height="28" rx="14" fill="#171C26"/><text x="1050" y="1136" text-anchor="middle">Security hardening</text>
|
|
<rect x="1148" y="1118" width="150" height="28" rx="14" fill="#171C26"/><text x="1223" y="1136" text-anchor="middle">Prod. support</text>
|
|
<rect x="960" y="1156" width="220" height="28" rx="14" fill="#171C26"/><text x="1070" y="1174" text-anchor="middle">Stakeholder comms</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- annotations -->
|
|
<g font-family="Consolas, monospace" font-size="11" fill="#E5A93D">
|
|
<text x="120" y="106">A1: trace draws on load (700ms), dot blinks once → stays lit</text>
|
|
<text x="920" y="106">hover: nav underline draw · CV button = locale default + chevron menu</text>
|
|
</g>
|
|
</svg>
|