Skip to content

Refactor background into component #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oscarwroche merged 2 commits into from
Sep 29, 2025
Merged

Refactor background into component #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5a9c9d
add theo as code owner
joelamouche Sep 28, 2025
f3dc7e9
refactor out background
joelamouche Sep 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/CODEOWNERS
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# Global owners
* @joelamouche @oscarwroche
* @joelamouche @oscarwroche @Teddy1792
181 changes: 181 additions & 0 deletions frontend/src/components/AppBackground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
export function AppBackground() {
return (
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 3600 4500"
className="w-[200%] h-[200%]"
>
<defs>
<linearGradient id="rayGradient" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stopColor="lightgray" stopOpacity="1" />
<stop offset="100%" stopColor="lightgray" stopOpacity="0" />
</linearGradient>
</defs>
<g id="wrapper">
<g id="rays" fill="url(#rayGradient)">
<polygon points="1780,1800 1820,1800 1880,700 1720,700" />
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(18,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(36,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(54,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(72,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(90,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(108,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(126,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(144,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(162,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(180,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(198,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(216,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(234,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(252,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(270,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(288,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(306,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(324,1800,2250)"
/>
<polygon
points="1780,1800 1820,1800 1880,700 1720,700"
transform="rotate(342,1800,2250)"
/>
</g>

<g id="logo_svg" transform="translate(1620,2020)">
<svg
className="img-fluid"
id="outputsvg"
xmlns="http://www.w3.org/2000/svg"
style={{
transform: "none",
transformOrigin: "50% 50%",
cursor: "move",
maxHeight: "none",
}}
width="360"
height="450"
viewBox="0 0 3600 4500"
>
<g
id="l3Hsfi7tdR5427YcO9c3lUE"
fill="rgb(135,160,173)"
style={{ transform: "none" }}
>
<g style={{ transform: "none" }}>
<path
id="pNStYzxTa"
d="M1605 4126 c-685 -357 -1144 -819 -1325 -1333 -61 -171 -60 -160 -60 -1143 0 -842 1 -898 18 -912 20 -18 348 -119 1027 -318 577 -168 542 -164 786 -91 90 28 324 98 519 156 473 142 768 233 791 246 10 5 21 20 24 32 3 12 4 434 2 937 -3 1018 2 934 -72 1140 -174 480 -644 939 -1322 1291 -119 62 -138 69 -190 69 -52 0 -72 -8 -198 -74z m344 -903 c7 -54 24 -185 38 -291 23 -172 25 -217 8 -200 -5 5 -20 104 -64 421 -25 175 -24 167 -8 167 10 0 17 -29 26 -97z m391 -262 c-61 -70 -80 -82 -26 -17 40 50 47 96 19 130 -9 12 0 5 21 -16 l39 -36 -53 -61z m-1238 72 c28 -38 41 -71 61 -153 14 -58 41 -152 61 -210 19 -57 34 -105 32 -107 -1 -2 -28 50 -58 114 -53 111 -93 221 -118 323 -6 25 -13 53 -16 63 -8 26 -1 21 38 -30z m524 -86 c16 -18 5 -10 -23 17 -51 48 -52 51 -35 69 16 19 17 18 23 -17 3 -20 19 -51 35 -69z m-200 -747 c193 -385 351 -615 623 -907 111 -120 127 -133 157 -133 32 0 34 2 34 34 0 26 -10 46 -40 81 -98 113 -301 404 -412 590 -145 244 -345 615 -330 615 18 0 158 -61 232 -102 128 -70 210 -129 303 -217 l90 -86 -99 -5 -99 -5 -3 -37 c-3 -34 0 -39 35 -56 21 -11 82 -34 135 -52 104 -34 160 -68 201 -122 36 -47 137 -253 137 -279 0 -5 -34 -9 -75 -9 l-75 0 0 -34 c0 -32 3 -36 53 -54 28 -11 71 -26 95 -33 23 -7 46 -17 51 -23 15 -20 95 -334 136 -534 4 -19 3 -32 -4 -32 -20 0 -170 70 -275 129 -162 90 -295 190 -443 335 -195 189 -334 376 -438 591 -93 190 -124 314 -131 515 l-4 135 27 -60 c15 -33 68 -143 119 -245z"
></path>
</g>
</g>
<g
id="l3YhWVJcjoD5uAAbxMUAqaA"
fill="rgb(211,211,210)"
style={{ transform: "none" }}
>
<g style={{ transform: "none" }}>
<path
id="p3BX9h9OY"
d="M1645 4254 c-529 -267 -960 -608 -1212 -959 -127 -176 -236 -402 -291 -603 l-27 -97 -3 -952 -3 -951 23 -26 c17 -20 55 -36 153 -65 195 -59 962 -285 1105 -326 69 -20 186 -54 260 -76 74 -21 151 -39 170 -39 39 0 140 29 750 213 917 278 872 263 903 297 l28 31 -4 947 -3 947 -26 95 c-78 280 -197 504 -387 732 -245 292 -671 611 -1100 822 -173 85 -186 86 -336 10z m318 -153 c678 -352 1148 -811 1322 -1291 74 -205 68 -126 72 -1110 2 -487 1 -895 -2 -907 -3 -12 -14 -27 -24 -32 -23 -13 -318 -104 -791 -246 -195 -58 -429 -128 -519 -156 -90 -27 -182 -49 -205 -49 -67 0 -1514 428 -1548 458 -17 14 -18 69 -18 882 0 950 0 942 60 1113 141 400 432 748 895 1074 202 142 544 332 598 333 15 0 87 -31 160 -69z"
></path>
<path
id="pqaxyfAoF"
d="M1710 3255 c0 -22 4 -25 35 -25 31 0 35 3 35 25 0 22 -4 25 -35 25 -31 0 -35 -3 -35 -25z"
></path>
<path
id="pBoFPeD3G"
d="M2150 3255 c0 -22 4 -25 40 -25 36 0 40 3 40 25 0 23 -4 25 -40 25 -36 0 -40 -2 -40 -25z"
></path>
<path
id="pGskvRjha"
d="M1392 2505 c9 -19 19 -25 45 -25 26 0 33 4 33 19 0 19 -25 31 -67 31 -20 0 -21 -2 -11 -25z"
></path>
<path
id="pLovgig38"
d="M1670 2395 c0 -35 0 -35 45 -35 57 0 59 18 6 48 -21 12 -41 22 -45 22 -3 0 -6 -16 -6 -35z"
></path>
</g>
</g>
<g
id="lf8xIF6Yxumcjtd0sb5X7B"
fill="rgb(229,227,226)"
style={{ transform: "none" }}
>
<g style={{ transform: "none" }}>
<path
id="pAkTHXNmW"
d="M1913 3352 c-24 -2 -43 -5 -43 -7 0 -2 9 -68 20 -147 11 -79 29 -208 40 -288 32 -234 24 -210 75 -210 30 0 45 4 45 13 0 6 -11 91 -25 187 -13 96 -32 236 -41 310 -9 74 -19 137 -23 140 -3 3 -25 4 -48 2z"
></path>
<path
id="p16hoIawXM"
d="M1664 3213 c-27 -37 -75 -96 -107 -130 l-59 -62 20 -28 c11 -15 37 -44 57 -63 20 -19 59 -65 87 -102 l50 -68 61 0 61 0 -30 33 c-17 17 -53 61 -79 97 -27 36 -62 80 -78 99 l-28 33 25 27 c14 14 59 71 100 126 l75 100 -31 3 c-18 2 -34 -2 -39 -10 -7 -10 -9 -10 -9 0 0 29 -29 8 -76 -55z"
></path>
<path
id="pdpFLPnBJ"
d="M2152 3238 c19 -24 64 -82 101 -130 l68 -87 -83 -106 c-46 -59 -91 -118 -101 -131 l-19 -24 59 0 58 1 68 87 c37 48 86 106 108 130 l41 42 -64 68 c-34 37 -85 95 -112 130 -48 61 -69 74 -80 50 -5 -10 -7 -10 -12 0 -3 6 -19 12 -36 12 l-30 0 34 -42z"
></path>
<path
id="pFbAuAGwg"
d="M1006 3170 c36 -204 100 -401 183 -569 l58 -116 6 -140 c6 -151 23 -249 63 -360 58 -161 180 -375 308 -539 89 -114 316 -331 435 -416 218 -155 561 -318 561 -265 0 74 -130 606 -154 631 -6 7 -47 23 -91 38 -120 40 -123 46 -22 46 50 0 87 4 87 10 0 37 -113 280 -157 338 -41 54 -97 88 -201 122 -115 38 -175 67 -167 80 8 13 117 13 189 -1 31 -5 62 -9 68 -7 14 5 -159 186 -235 246 -91 72 -194 131 -217 125 -15 -4 -19 -1 -15 9 10 26 -225 123 -271 112 -14 -4 -24 -2 -24 5 0 6 -7 11 -16 11 -35 0 324 -649 514 -929 97 -143 244 -342 267 -361 16 -13 39 -50 32 -50 -3 0 -60 60 -128 132 -262 283 -412 499 -600 863 -146 282 -232 502 -286 725 -27 113 -53 157 -148 250 l-45 45 6 -35z"
></path>
</g>
</g>
</svg>
</g>
</g>
</svg>
</div>
);
}
Loading
Loading