1f695d3932
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
134 lines
9.1 KiB
XML
134 lines
9.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 1240" font-family="Segoe UI, Arial, sans-serif">
|
||
<rect width="900" height="1240" fill="#05070B"/>
|
||
<text x="60" y="48" fill="#E5A93D" font-family="Consolas, monospace" font-size="12">M4: mobile 390px — homepage (left) · nav overlay open (right)</text>
|
||
|
||
<!-- ============ PHONE 1: homepage ============ -->
|
||
<rect x="60" y="80" width="390" height="1100" rx="24" fill="#0B0E14" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
||
|
||
<!-- slim header 56 -->
|
||
<line x1="60" y1="136" x2="450" y2="136" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<rect x="84" y="94" width="28" height="28" rx="7" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
||
<text x="98" y="113" fill="#E8ECF2" font-family="Consolas, monospace" font-size="11" font-weight="bold" text-anchor="middle">CB</text>
|
||
<!-- CV icon button -->
|
||
<rect x="330" y="94" width="40" height="28" rx="7" fill="#3ECFAE"/>
|
||
<path d="M350 100 v10 m-4 -4 l4 4 l4 -4 M344 114 h12" stroke="#062A22" stroke-width="1.6" fill="none"/>
|
||
<!-- burger -->
|
||
<g stroke="#E8ECF2" stroke-width="1.6">
|
||
<line x1="390" y1="102" x2="414" y2="102"/><line x1="390" y1="110" x2="414" y2="110"/><line x1="390" y1="118" x2="414" y2="118"/>
|
||
</g>
|
||
|
||
<!-- hero -->
|
||
<text x="84" y="192" fill="#3ECFAE" font-family="Consolas, monospace" font-size="10" letter-spacing="1.5">SYSTEMS DEVELOPER · NORWAY</text>
|
||
<text x="84" y="234" fill="#E8ECF2" font-size="34" font-weight="600">Connor</text>
|
||
<text x="84" y="272" fill="#E8ECF2" font-size="34" font-weight="600">Babbington</text>
|
||
<text x="84" y="308" fill="#9AA4B2" font-size="15">I design, build and run web systems.</text>
|
||
<text x="84" y="332" fill="#9AA4B2" font-size="15">8+ years in UK local government —</text>
|
||
<text x="84" y="356" fill="#9AA4B2" font-size="15">now building full-stack in Norway.</text>
|
||
<path d="M84 384 H240 l8 8 H330" fill="none" stroke="#3ECFAE" stroke-width="1.5"/>
|
||
<circle cx="335" cy="392" r="3.5" fill="#3ECFAE"/>
|
||
|
||
<!-- chips 2 rows -->
|
||
<g font-family="Consolas, monospace" font-size="10.5">
|
||
<rect x="84" y="410" width="128" height="26" rx="13" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="148" y="427" fill="#9AA4B2" text-anchor="middle">Tønsberg, Norway</text>
|
||
<rect x="220" y="410" width="108" height="26" rx="13" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="274" y="427" fill="#9AA4B2" text-anchor="middle">Work permit ✓</text>
|
||
<rect x="84" y="444" width="150" height="26" rx="13" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="159" y="461" fill="#9AA4B2" text-anchor="middle">Remote/hybrid/on-site</text>
|
||
<rect x="242" y="444" width="150" height="26" rx="13" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="317" y="461" fill="#9AA4B2" text-anchor="middle">EN native · NO B1</text>
|
||
</g>
|
||
|
||
<!-- stacked CTAs full width, 48px -->
|
||
<rect x="84" y="494" width="342" height="48" rx="8" fill="#3ECFAE"/>
|
||
<text x="255" y="524" fill="#062A22" font-size="15" font-weight="600" text-anchor="middle">View projects</text>
|
||
<rect x="84" y="552" width="342" height="48" rx="8" fill="none" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
||
<text x="255" y="582" fill="#E8ECF2" font-size="15" text-anchor="middle">Download CV · pdf</text>
|
||
|
||
<!-- proof 2x2 -->
|
||
<g>
|
||
<rect x="84" y="628" width="165" height="72" rx="10" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="100" y="660" fill="#E8ECF2" font-size="18" font-weight="600">8+ yrs</text>
|
||
<text x="100" y="682" fill="#5C6675" font-family="Consolas, monospace" font-size="9" letter-spacing="1">EXPERIENCE</text>
|
||
<rect x="261" y="628" width="165" height="72" rx="10" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="277" y="660" fill="#E8ECF2" font-size="15" font-weight="600">Public sector</text>
|
||
<text x="277" y="682" fill="#5C6675" font-family="Consolas, monospace" font-size="9" letter-spacing="1">BACKGROUND</text>
|
||
<rect x="84" y="710" width="165" height="72" rx="10" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="100" y="742" fill="#E8ECF2" font-size="15" font-weight="600">.NET · React</text>
|
||
<text x="100" y="764" fill="#5C6675" font-family="Consolas, monospace" font-size="9" letter-spacing="1">CORE STACK</text>
|
||
<rect x="261" y="710" width="165" height="72" rx="10" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<text x="277" y="742" fill="#E8ECF2" font-size="15" font-weight="600">In Norway</text>
|
||
<text x="277" y="764" fill="#5C6675" font-family="Consolas, monospace" font-size="9" letter-spacing="1">PERMIT ✓</text>
|
||
</g>
|
||
|
||
<!-- project card -->
|
||
<text x="84" y="836" fill="#3ECFAE" font-family="Consolas, monospace" font-size="10" letter-spacing="1.5">02 — PROJECTS</text>
|
||
<rect x="84" y="856" width="342" height="290" rx="12" fill="#11151D" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<rect x="84" y="856" width="342" height="170" rx="12" fill="#171C26"/>
|
||
<rect x="84" y="1010" width="342" height="16" fill="#171C26"/>
|
||
<text x="255" y="948" fill="#5C6675" font-size="11" text-anchor="middle">[ JobTrack screenshot 16:10 ]</text>
|
||
<rect x="342" y="872" width="70" height="24" rx="12" fill="#0B0E14" stroke="#3ECFAE" stroke-opacity="0.4"/>
|
||
<circle cx="356" cy="884" r="3" fill="#3ECFAE"/>
|
||
<text x="366" y="889" fill="#3ECFAE" font-family="Consolas, monospace" font-size="9.5">ACTIVE</text>
|
||
<text x="104" y="1058" fill="#E8ECF2" font-size="18" font-weight="600">JobTrack</text>
|
||
<text x="104" y="1082" fill="#9AA4B2" font-size="13">A workspace for the whole job-application journey.</text>
|
||
<g font-family="Consolas, monospace" font-size="10" fill="#9AA4B2">
|
||
<rect x="104" y="1096" width="56" height="22" rx="11" fill="#171C26"/><text x="132" y="1111" text-anchor="middle">.NET 9</text>
|
||
<rect x="168" y="1096" width="52" height="22" rx="11" fill="#171C26"/><text x="194" y="1111" text-anchor="middle">React</text>
|
||
<rect x="228" y="1096" width="60" height="22" rx="11" fill="#171C26"/><text x="258" y="1111" text-anchor="middle">Docker</text>
|
||
</g>
|
||
<text x="104" y="1136" fill="#3ECFAE" font-size="13">Read case study →</text>
|
||
|
||
<!-- ============ PHONE 2: nav overlay ============ -->
|
||
<rect x="480" y="80" width="390" height="1100" rx="24" fill="#0B0E14" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
||
<rect x="480" y="80" width="390" height="1100" rx="24" fill="#11151D" fill-opacity="0.98"/>
|
||
|
||
<!-- overlay header -->
|
||
<rect x="504" y="94" width="28" height="28" rx="7" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
||
<text x="518" y="113" fill="#E8ECF2" font-family="Consolas, monospace" font-size="11" font-weight="bold" text-anchor="middle">CB</text>
|
||
<g stroke="#E8ECF2" stroke-width="1.8">
|
||
<line x1="812" y1="98" x2="832" y2="118"/><line x1="832" y1="98" x2="812" y2="118"/>
|
||
</g>
|
||
|
||
<!-- language + theme row -->
|
||
<rect x="504" y="152" width="240" height="44" rx="22" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<rect x="508" y="156" width="116" height="36" rx="18" fill="#0B0E14" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
||
<text x="566" y="179" fill="#E8ECF2" font-family="Consolas, monospace" font-size="13" text-anchor="middle">EN</text>
|
||
<text x="686" y="179" fill="#9AA4B2" font-family="Consolas, monospace" font-size="13" text-anchor="middle">NO</text>
|
||
<circle cx="800" cy="174" r="22" fill="#171C26" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
<path d="M806 166 a9 9 0 1 0 4 12 a8 8 0 0 1 -4 -12" fill="#9AA4B2"/>
|
||
|
||
<!-- nav stack: large targets -->
|
||
<g font-size="28" font-weight="600">
|
||
<text x="504" y="292" fill="#E8ECF2">Home</text>
|
||
<text x="504" y="368" fill="#E8ECF2">Projects</text>
|
||
<text x="504" y="444" fill="#E8ECF2">Experience</text>
|
||
<text x="504" y="520" fill="#E8ECF2">About</text>
|
||
<text x="504" y="596" fill="#E8ECF2">Contact</text>
|
||
</g>
|
||
<g font-family="Consolas, monospace" font-size="11" fill="#5C6675">
|
||
<text x="504" y="316">/</text>
|
||
<text x="504" y="392">/projects · 3</text>
|
||
<text x="504" y="468">/experience</text>
|
||
<text x="504" y="544">/about</text>
|
||
<text x="504" y="620">/contact</text>
|
||
</g>
|
||
<line x1="504" y1="660" x2="846" y2="660" stroke="#E8ECF2" stroke-opacity="0.08"/>
|
||
|
||
<!-- CV buttons -->
|
||
<rect x="504" y="692" width="342" height="48" rx="8" fill="#3ECFAE"/>
|
||
<text x="675" y="722" fill="#062A22" font-size="15" font-weight="600" text-anchor="middle">Download CV — English</text>
|
||
<rect x="504" y="752" width="342" height="48" rx="8" fill="none" stroke="#E8ECF2" stroke-opacity="0.16"/>
|
||
<text x="675" y="782" fill="#E8ECF2" font-size="15" text-anchor="middle">Last ned CV — Norsk</text>
|
||
|
||
<!-- contact shortcuts -->
|
||
<g font-family="Consolas, monospace" font-size="13" fill="#9AA4B2">
|
||
<text x="504" y="852">connor.babbington@cesnimda.co.uk ⧉</text>
|
||
<text x="504" y="888">linkedin ↗</text>
|
||
<text x="504" y="924">git.cesnimda.uk ↗</text>
|
||
</g>
|
||
|
||
<text x="504" y="1150" fill="#5C6675" font-family="Consolas, monospace" font-size="11">overlay: full-screen, body scroll locked, Esc/× closes,</text>
|
||
<text x="504" y="1168" fill="#5C6675" font-family="Consolas, monospace" font-size="11">focus trapped · targets ≥ 44px</text>
|
||
</svg>
|