mirror of
https://github.com/MadsLorentzen/ai-job-search.git
synced 2026-11-02 13:12:50 +00:00
docs(readme): redesign README with animated SVG diagrams
Replace the ASCII workflow diagram with animated SVGs built from Pip's palette: a hero where Pip flies an application to its destination, the 69/20/1 application funnel as envelopes, the six-command route, and the /apply draft-review loop. Long reference material moves into collapsible sections; all content and the anchors SETUP.md links to are kept.
This commit is contained in:
Jakob Stender Guldberg committed
1 parent
4b109c20c3
commit
e61fb6ea8b
5 files changed
+445
-114
No files matched your search
@@ -0,0 +1,37 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 360" width="1280" height="360" role="img" aria-labelledby="t d">
|
||||
<title id="t">The author's own search</title>
|
||||
<desc id="d">69 envelopes for 69 tailored applications. 20 light up as first interviews, and one is sealed as the signed contract.</desc>
|
||||
<style>
|
||||
.env{animation:drop 14s cubic-bezier(.2,.8,.2,1) both infinite}
|
||||
.iv{animation:iv 14s ease-out both infinite}
|
||||
.ct{transform-box:fill-box;transform-origin:center;animation:ct 14s cubic-bezier(.3,1.6,.5,1) both infinite}
|
||||
.burst{transform-box:fill-box;transform-origin:center;animation:burst 14s ease-out both infinite}
|
||||
.l1{animation:lg1 14s ease-out both infinite}.l2{animation:lg2 14s ease-out both infinite}.l3{animation:lg3 14s ease-out both infinite}
|
||||
@keyframes drop{0%{opacity:0;transform:translateY(-10px)}4%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
|
||||
@keyframes iv{0%,24%{opacity:0}28%,88%{opacity:1}94%,100%{opacity:0}}
|
||||
@keyframes ct{0%,40%{opacity:0;transform:scale(.4)}44%,88%{opacity:1;transform:scale(1.18)}94%,100%{opacity:0;transform:scale(1.18)}}
|
||||
@keyframes burst{0%,42%{opacity:0;transform:scale(.3)}44%{opacity:.9}56%,100%{opacity:0;transform:scale(2.2)}}
|
||||
@keyframes lg1{0%,6%{opacity:0;transform:translateY(8px)}12%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
|
||||
@keyframes lg2{0%,26%{opacity:0;transform:translateY(8px)}32%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
|
||||
@keyframes lg3{0%,43%{opacity:0;transform:translateY(8px)}49%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
|
||||
@media (prefers-reduced-motion: reduce){*{animation:none!important}}
|
||||
@media (prefers-reduced-motion: reduce){.burst{opacity:0}.ct{transform:scale(1.18)}}
|
||||
</style>
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#0F2229"/><stop offset="1" stop-color="#15333C"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glow" cx="0.75" cy="1.0" r="0.6">
|
||||
<stop offset="0" stop-color="#2A9D8F" stop-opacity=".30"/><stop offset="1" stop-color="#2A9D8F" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<clipPath id="card"><rect width="1280" height="360" rx="28"/></clipPath>
|
||||
|
||||
</defs>
|
||||
<g clip-path="url(#card)">
|
||||
<rect width="1280" height="360" fill="url(#bg)"/>
|
||||
<rect width="1280" height="360" fill="url(#glow)"/>
|
||||
<g class="env" style="animation-delay:0.00s"><rect x="93.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M95.0 54 L112.0 66.3 L129.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/></g><g class="env" style="animation-delay:0.04s"><rect x="141.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M143.0 54 L160.0 66.3 L177.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/></g><g class="env" style="animation-delay:0.09s"><rect x="189.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M191.0 54 L208.0 66.3 L225.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/></g><g class="env" style="animation-delay:0.14s"><rect x="237.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M239.0 54 L256.0 66.3 L273.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/><g class="iv" style="animation-delay:0.08s"><rect x="237.0" y="52" width="38" height="26" rx="3" fill="#2A9D8F" stroke="#9FE0CF" stroke-width="1.5"/><path d="M239.0 54 L256.0 66.3 L273.0 54" fill="none" stroke="#9FE0CF" stroke-width="1.6" stroke-linejoin="round"/></g></g><g class="env" style="animation-delay:0.18s"><rect x="285.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M287.0 54 L304.0 66.3 L321.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/><g class="iv" style="animation-delay:0.11s"><rect x="285.0" y="52" width="38" height="26" rx="3" fill="#2A9D8F" stroke="#9FE0CF" stroke-width="1.5"/><path d="M287.0 54 L304.0 66.3 L321.0 54" fill="none" stroke="#9FE0CF" stroke-width="1.6" stroke-linejoin="round"/></g></g><g class="env" style="animation-delay:0.22s"><rect x="333.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M335.0 54 L352.0 66.3 L369.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/><g class="iv" style="animation-delay:0.13s"><rect x="333.0" y="52" width="38" height="26" rx="3" fill="#2A9D8F" stroke="#9FE0CF" stroke-width="1.5"/><path d="M335.0 54 L352.0 66.3 L369.0 54" fill="none" stroke="#9FE0CF" stroke-width="1.6" stroke-linejoin="round"/></g></g><g class="env" style="animation-delay:0.27s"><rect x="381.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M383.0 54 L400.0 66.3 L417.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/><g class="iv" style="animation-delay:0.16s"><rect x="381.0" y="52" width="38" height="26" rx="3" fill="#2A9D8F" stroke="#9FE0CF" stroke-width="1.5"/><path d="M383.0 54 L400.0 66.3 L417.0 54" fill="none" stroke="#9FE0CF" stroke-width="1.6" stroke-linejoin="round"/></g></g><g class="env" style="animation-delay:0.32s"><rect x="429.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M431.0 54 L448.0 66.3 L465.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/></g><g class="env" style="animation-delay:0.36s"><rect x="477.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M479.0 54 L496.0 66.3 L513.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/></g><g class="env" style="animation-delay:0.40s"><rect x="525.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M527.0 54 L544.0 66.3 L561.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/><g class="iv" style="animation-delay:0.24s"><rect x="525.0" y="52" width="38" height="26" rx="3" fill="#2A9D8F" stroke="#9FE0CF" stroke-width="1.5"/><path d="M527.0 54 L544.0 66.3 L561.0 54" fill="none" stroke="#9FE0CF" stroke-width="1.6" stroke-linejoin="round"/></g></g><g class="env" style="animation-delay:0.45s"><rect x="573.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M575.0 54 L592.0 66.3 L609.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/></g><g class="env" style="animation-delay:0.49s"><rect x="621.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M623.0 54 L640.0 66.3 L657.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/></g><g class="env" style="animation-delay:0.54s"><rect x="669.0" y="52" width="38" height="26" rx="3" fill="#1d3f49" stroke="#3d6664" stroke-width="1.5"/><path d="M671.0 54 L688.0 66.3 L705.0 54" fill="none" stroke="#4f7a77" stroke-width="1.6" stroke-linejoin="round"/><g class="iv" style="animation-delay:0.32s"><rect x="669.0" y="52" width="38" height="26" rx="3" fill="#2A9D8F" stroke="#9FE0CF" stroke-width="1.5"/><path d="M671.0Line truncated
|
||||
<g class="l1"><text x="93.0" y="258" font-family="ui-rounded,'SF Pro Rounded','Nunito','Varela Round','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif" font-size="56" font-weight="800" letter-spacing="-1.5" fill="#EEF3EF">69</text><text x="93.0" y="292" font-family="ui-rounded,'SF Pro Rounded','Nunito','Varela Round','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif" font-size="20" fill="#EEF3EF" fill-opacity=".75">tailored applications</text></g><g class="l2"><text x="513.0" y="258" font-family="ui-rounded,'SF Pro Rounded','Nunito','Varela Round','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif" font-size="56" font-weight="800" letter-spacing="-1.5" fill="#9FE0CF">20</text><text x="513.0" y="292" font-family="ui-rounded,'SF Pro Rounded','Nunito','Varela Round','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif" font-size="20" fill="#EEF3EF" fill-opacity=".75">first interviews</text></g><g class="l3"><text x="873.0" y="258" font-family="ui-rounded,'SF Pro Rounded','Nunito','Varela Round','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif" font-size="56" font-weight="800" letter-spacing="-1.5" fill="#F4704F">1</text><text x="873.0" y="292" font-family="ui-rounded,'SF Pro Rounded','Nunito','Varela Round','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif" font-size="20" fill="#EEF3EF" fill-opacity=".75">signed contract</text></g>
|
||||
</g>
|
||||
<rect x=".5" y=".5" width="1279" height="359" rx="27.5" fill="none" stroke="#9FE0CF" stroke-opacity=".14"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 28 KiB |
Reference in new issue
Block a user