Compare commits
No commits in common. "8f45b413f1adc6a81a550da0c56398a92a39d097" and "b9810798cd8d494e8713fbe8f05b9f295fd3ee6c" have entirely different histories.
8f45b413f1
...
b9810798cd
3 changed files with 0 additions and 4377 deletions
61
index.html
61
index.html
|
|
@ -2386,66 +2386,6 @@
|
|||
animation: fadeIn .6s ease .7s forwards
|
||||
}
|
||||
|
||||
.infra-btn {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 22px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
transition: all .25s ease;
|
||||
}
|
||||
[data-theme="cyberpunk"] .infra-btn {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
color: #00f5ff;
|
||||
border: 1px solid rgba(0,245,255,.35);
|
||||
background: rgba(0,245,255,.06);
|
||||
box-shadow: 0 0 20px rgba(0,245,255,.12);
|
||||
}
|
||||
[data-theme="cyberpunk"] .infra-btn:hover {
|
||||
background: rgba(0,245,255,.14);
|
||||
border-color: #00f5ff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
[data-theme="bd"] .infra-btn {
|
||||
font-family: 'Comic Neue', cursive;
|
||||
color: #1a1a1a;
|
||||
background: #FFE033;
|
||||
border: 3px solid #1a1a1a;
|
||||
box-shadow: 4px 4px 0 #1a1a1a;
|
||||
}
|
||||
[data-theme="bd"] .infra-btn:hover {
|
||||
transform: translate(-2px,-2px);
|
||||
box-shadow: 6px 6px 0 #1a1a1a;
|
||||
}
|
||||
[data-theme="itpro"] .infra-btn {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #1a56db;
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 30px;
|
||||
}
|
||||
[data-theme="itpro"] .infra-btn:hover {
|
||||
background: #1a56db;
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme="cgi"] .infra-btn {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #5236AB;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(82,54,171,.3);
|
||||
border-left: 4px solid #5236AB;
|
||||
}
|
||||
[data-theme="cgi"] .infra-btn:hover {
|
||||
background: #5236AB;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
|
@ -3072,7 +3012,6 @@
|
|||
${esc(id.nom)}<span class="hero-name-line2">${esc(id.prenom)}</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">${esc(id.accroche)}</p>
|
||||
<div style="margin-top:20px;display:inline-block"><a href="infrastructure.html" target="_blank" class="infra-btn">⚡ Voir mon infrastructure</a></div>
|
||||
<div class="hero-stats">
|
||||
${d.stats.map(s => `
|
||||
<div class="stat-box">
|
||||
|
|
|
|||
|
|
@ -1,980 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Mon Code · Mon Infrastructure · Ma Maîtrise</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #02060d;
|
||||
--panel: rgba(4, 10, 18, .88);
|
||||
--text: #f5fbff;
|
||||
--muted: #a9b6c7;
|
||||
--blue: #00a8ff;
|
||||
--purple: #b457ff;
|
||||
--green: #20ef67;
|
||||
--cyan: #56ffe3;
|
||||
--orange: #ff9c13;
|
||||
--line: rgba(255, 255, 255, .12);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 18% 28%, rgba(0, 168, 255, .22), transparent 28%),
|
||||
radial-gradient(circle at 52% 18%, rgba(180, 87, 255, .17), transparent 24%),
|
||||
radial-gradient(circle at 72% 45%, rgba(32, 239, 103, .18), transparent 28%),
|
||||
radial-gradient(circle at 86% 18%, rgba(255, 156, 19, .12), transparent 24%),
|
||||
linear-gradient(180deg, #03070d, #010309 65%, #000);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
mask-image: radial-gradient(circle at center, #000 0 45%, transparent 72%);
|
||||
}
|
||||
|
||||
.page {
|
||||
width: min(1880px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 10px 12px 14px;
|
||||
transform: scale(.82);
|
||||
transform-origin: top center;
|
||||
height: 122vh;
|
||||
}
|
||||
|
||||
.pipeline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(250px, 1fr));
|
||||
gap: 14px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
min-height: 620px;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 18px;
|
||||
padding: 16px 16px 14px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), var(--panel);
|
||||
box-shadow: 0 0 30px rgba(var(--rgb), .20), inset 0 0 24px rgba(var(--rgb), .08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -40%;
|
||||
background: radial-gradient(circle, rgba(var(--rgb), .16), transparent 42%);
|
||||
opacity: .9;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.blue {
|
||||
--accent: var(--blue);
|
||||
--rgb: 0, 168, 255;
|
||||
}
|
||||
|
||||
.purple {
|
||||
--accent: var(--purple);
|
||||
--rgb: 180, 87, 255;
|
||||
}
|
||||
|
||||
.green {
|
||||
--accent: var(--green);
|
||||
--rgb: 32, 239, 103;
|
||||
}
|
||||
|
||||
.orange {
|
||||
--accent: var(--orange);
|
||||
--rgb: 255, 156, 19;
|
||||
}
|
||||
|
||||
.step-head {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
color: #001018;
|
||||
font-weight: 900;
|
||||
font-size: 25px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 24px rgba(var(--rgb), .78);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--accent);
|
||||
font-size: clamp(18px, 1.35vw, 28px);
|
||||
letter-spacing: .03em;
|
||||
line-height: 1.05;
|
||||
text-transform: uppercase;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 7px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.icons-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18px;
|
||||
margin: 22px 0 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tool-icon,
|
||||
.big-icon {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin: 0 auto 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, .2);
|
||||
background: rgba(255, 255, 255, .05);
|
||||
font-size: 35px;
|
||||
filter: drop-shadow(0 0 10px rgba(var(--rgb), .4));
|
||||
}
|
||||
|
||||
.mini-label {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.code-window,
|
||||
.browser-window,
|
||||
.box {
|
||||
border: 1px solid rgba(var(--rgb), .75);
|
||||
border-radius: 12px;
|
||||
background: rgba(0, 0, 0, .46);
|
||||
box-shadow: inset 0 0 22px rgba(var(--rgb), .08), 0 0 22px rgba(var(--rgb), .12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.window-top {
|
||||
height: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
background: rgba(255, 255, 255, .04);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff5f56;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
background: #ffbd2e;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
background: #27c93f;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 14px 16px 20px;
|
||||
color: #8df5ff;
|
||||
font: 13px/1.6 "SFMono-Regular", Consolas, monospace;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.note,
|
||||
.feature-list,
|
||||
.status-card {
|
||||
margin-top: 18px;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(var(--rgb), .58);
|
||||
border-radius: 12px;
|
||||
background: rgba(var(--rgb), .055);
|
||||
color: #fff;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.note strong {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.forgejo {
|
||||
text-align: center;
|
||||
margin: 16px 0 20px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.repo {
|
||||
margin: 20px auto;
|
||||
width: 78%;
|
||||
padding: 12px 18px;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 10px;
|
||||
color: var(--accent);
|
||||
background: rgba(var(--rgb), .1);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.server-illustration {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
margin: 18px auto;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--accent);
|
||||
background:
|
||||
radial-gradient(circle at 50% 32%, var(--accent), transparent 8%),
|
||||
repeating-radial-gradient(circle, rgba(var(--rgb), .24) 0 2px, transparent 3px 22px),
|
||||
linear-gradient(180deg, rgba(var(--rgb), .35), rgba(0, 0, 0, .15));
|
||||
box-shadow: 0 0 35px rgba(var(--rgb), .5);
|
||||
}
|
||||
|
||||
.feature-list ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
margin: 8px 0;
|
||||
color: #e7f1ff;
|
||||
}
|
||||
|
||||
.feature-list li::before {
|
||||
content: "✓";
|
||||
color: var(--accent);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.radar {
|
||||
position: relative;
|
||||
width: 245px;
|
||||
height: 245px;
|
||||
margin: 18px auto 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(32, 239, 103, .75);
|
||||
background: repeating-radial-gradient(circle, rgba(32, 239, 103, .23) 0 1px, transparent 2px 24px), linear-gradient(90deg, transparent 49.5%, rgba(32, 239, 103, .55) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(32, 239, 103, .55) 50%, transparent 50.5%);
|
||||
box-shadow: 0 0 45px rgba(32, 239, 103, .35), inset 0 0 30px rgba(32, 239, 103, .15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.radar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: conic-gradient(from 0deg, rgba(32, 239, 103, .75), rgba(32, 239, 103, .25) 18deg, transparent 65deg);
|
||||
animation: scan 3s linear infinite;
|
||||
}
|
||||
|
||||
.radar::after {
|
||||
content: "C";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 70px;
|
||||
font-weight: 900;
|
||||
color: #8fffe0;
|
||||
text-shadow: 0 0 22px #20ef67;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.process-box {
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
margin: 12px 0;
|
||||
padding: 13px 15px;
|
||||
border: 1px solid rgba(32, 239, 103, .65);
|
||||
border-radius: 10px;
|
||||
background: rgba(32, 239, 103, .07);
|
||||
}
|
||||
|
||||
.process-box .icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.process-box h3 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.process-box p {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.url-box {
|
||||
display: grid;
|
||||
grid-template-columns: 54px 1fr;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
margin: 18px 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.url-box .globe {
|
||||
color: var(--orange);
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.url-box strong {
|
||||
color: #20ef67;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.server-box {
|
||||
display: grid;
|
||||
grid-template-columns: 58px 1fr;
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.server-box .nginx {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #099642;
|
||||
clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
|
||||
font-weight: 900;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.dynamic h3 {
|
||||
color: var(--orange);
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dynamic p {
|
||||
margin: 7px 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dynamic p::before {
|
||||
content: ">>";
|
||||
color: var(--orange);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.browser-window {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.browser-content {
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: grid;
|
||||
grid-template-columns: 70px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, .4);
|
||||
background: radial-gradient(circle at 50% 35%, #ffc29b, #1d4f72 46%, #06101d 70%);
|
||||
box-shadow: 0 0 22px rgba(86, 255, 227, .35);
|
||||
}
|
||||
|
||||
.profile h3 {
|
||||
font-size: 17px;
|
||||
line-height: 1.15;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.profile p {
|
||||
color: #d8e1ed;
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 6px;
|
||||
background: var(--green);
|
||||
color: #00220c;
|
||||
font-weight: 900;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
margin-top: 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.menu div {
|
||||
min-width: 0;
|
||||
padding: 8px 3px;
|
||||
border: 1px solid rgba(255, 255, 255, .14);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
line-height: 1.15;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.menu span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.status-card .status-icon {
|
||||
font-size: 38px;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.flow {
|
||||
margin: 12px 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, .16);
|
||||
border-radius: 14px;
|
||||
padding: 10px 14px 12px;
|
||||
background: rgba(255, 255, 255, .035);
|
||||
}
|
||||
|
||||
.flow h3 {
|
||||
text-align: center;
|
||||
letter-spacing: .05em;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.flow-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flow-ico {
|
||||
font-size: 38px;
|
||||
filter: drop-shadow(0 0 10px rgba(32, 239, 103, .55));
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: var(--accent, var(--green));
|
||||
font-size: 24px;
|
||||
text-shadow: 0 0 10px currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flow-item p {
|
||||
font-size: 12px;
|
||||
color: #f4f8ff;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.benefits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0;
|
||||
border: 1px solid rgba(255, 255, 255, .18);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, .035);
|
||||
}
|
||||
|
||||
.benefit {
|
||||
display: grid;
|
||||
grid-template-columns: 62px 1fr;
|
||||
gap: 14px;
|
||||
padding: 12px 14px;
|
||||
border-right: 1px solid rgba(255, 255, 255, .12);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.benefit:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.benefit .bico {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--green);
|
||||
font-size: 26px;
|
||||
color: var(--green);
|
||||
box-shadow: 0 0 18px rgba(32, 239, 103, .18);
|
||||
}
|
||||
|
||||
.benefit:nth-child(5) .bico {
|
||||
color: var(--orange);
|
||||
border-color: var(--orange);
|
||||
}
|
||||
|
||||
.benefit h4 {
|
||||
margin: 0 0 3px;
|
||||
letter-spacing: .06em;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.benefit p {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
width: min(880px, 100%);
|
||||
margin: 22px auto 0;
|
||||
padding: 11px 22px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--purple);
|
||||
border-radius: 11px;
|
||||
background: rgba(180, 87, 255, .08);
|
||||
box-shadow: 0 0 22px rgba(180, 87, 255, .18);
|
||||
}
|
||||
|
||||
.tagline h1 {
|
||||
font-size: 24px;
|
||||
letter-spacing: .28em;
|
||||
}
|
||||
|
||||
.tagline .blue-text {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.tagline .green-text {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.tagline .orange-text {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.tagline p {
|
||||
color: #dce6f2;
|
||||
letter-spacing: .08em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.pipeline {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.flow-row,
|
||||
.benefits {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transform: rotate(90deg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.benefit {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .12);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.page {
|
||||
transform: scale(.72);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
.page {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.pipeline {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.icons-row,
|
||||
.menu {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profile {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tagline h1 {
|
||||
font-size: 18px;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="tagline" style="margin: 0 auto 18px;">
|
||||
<h1><span class="blue-text">MON CODE.</span> <span class="green-text">MON INFRASTRUCTURE.</span> <span
|
||||
class="orange-text">MA MAÎTRISE.</span></h1>
|
||||
<p>Liberté, performance et sécurité au service de mon identité professionnelle.</p>
|
||||
</section>
|
||||
<section class="pipeline">
|
||||
<article class="card blue">
|
||||
<div class="step-head">
|
||||
<div class="badge">1</div>
|
||||
<div>
|
||||
<h2>Edition</h2>
|
||||
<p class="subtitle">Code en local</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons-row">
|
||||
<div>
|
||||
<div class="tool-icon">▲</div>
|
||||
<p class="mini-label">Antigravity</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-icon">✳</div>
|
||||
<p class="mini-label">Claude Code</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-icon">⬢</div>
|
||||
<p class="mini-label">Git</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align:center; margin-bottom:18px;">Je développe mon projet CV en local.</p>
|
||||
<div class="code-window">
|
||||
<div class="window-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
|
||||
style="margin-left:8px">index.html</span><span style="margin-left:auto;color:#20ef67">● sauvegardé</span>
|
||||
</div>
|
||||
<pre><!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Stéphane Liabeuf - CV</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Stéphane Liabeuf</h1>
|
||||
<p>25 ans d'expérience en SI</p>
|
||||
</header>
|
||||
</body>
|
||||
</html></pre>
|
||||
</div>
|
||||
<div class="note"><strong>J’utilise Antigravity, Claude Code et Git</strong> pour développer et versionner mon
|
||||
projet CV.</div>
|
||||
</article>
|
||||
|
||||
<article class="card purple">
|
||||
<div class="step-head">
|
||||
<div class="badge">2</div>
|
||||
<div>
|
||||
<h2>Dépôt</h2>
|
||||
<p class="subtitle">Forgejo Personnel</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="forgejo">
|
||||
<div class="brand"><span style="color:#55ff45">◖/>◗</span> Forgejo</div>
|
||||
<div class="repo">stephaneliabeuf / cv</div>
|
||||
<div class="server-illustration"></div>
|
||||
</div>
|
||||
<p style="text-align:center; line-height:1.6;">En transférant mon projet vers Forgejo, je centralise mon code
|
||||
sur mon propre serveur.<br><br>Forgejo agit comme la <strong>source de vérité</strong> qui conserve tout
|
||||
l’historique de mes versions.</p>
|
||||
<div class="feature-list">
|
||||
<ul>
|
||||
<li>Dépôt privé</li>
|
||||
<li>Historique complet des commits</li>
|
||||
<li>Branches & Tags</li>
|
||||
<li>Permissions & sécurité</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card green">
|
||||
<div class="step-head">
|
||||
<div class="badge">3</div>
|
||||
<div>
|
||||
<h2>Orchestrateur</h2>
|
||||
<p class="subtitle">Coolify</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand" style="justify-content:center; margin-top:8px;"><span style="color:#56ffe3">C</span> Coolify
|
||||
</div>
|
||||
<div class="radar"></div>
|
||||
<div class="process-box">
|
||||
<div class="icon">👁</div>
|
||||
<div>
|
||||
<h3>Surveillance du dépôt Forgejo</h3>
|
||||
<p>Détection d’un nouveau push</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-box">
|
||||
<div class="icon">⚙️</div>
|
||||
<div>
|
||||
<h3>Lancement automatique du déploiement</h3>
|
||||
<p>Récupération du code · Build · Préparation</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-box">
|
||||
<div class="icon">🚀</div>
|
||||
<div>
|
||||
<h3>Déploiement & mise à jour de l’instance</h3>
|
||||
<p>Rolling update sans interruption</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-list"><strong style="color:var(--green)">Mon serveur Coolify auto-hébergé</strong>
|
||||
<ul>
|
||||
<li>Connexion Forgejo via PAT</li>
|
||||
<li>Déploiements automatisés</li>
|
||||
<li>Environnements & variables</li>
|
||||
<li>Logs & monitoring</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card orange">
|
||||
<div class="step-head">
|
||||
<div class="badge">4</div>
|
||||
<div>
|
||||
<h2>Diffusion</h2>
|
||||
<p class="subtitle">Web Server</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box url-box">
|
||||
<div class="globe">◎</div>
|
||||
<div>https://cv.stephaneliabeuf.fr<strong>🔒 HTTPS (SSL/TLS)</strong></div>
|
||||
</div>
|
||||
<div style="text-align:center; color:var(--orange); font-size:36px;">↓</div>
|
||||
<div class="box server-box">
|
||||
<div class="nginx">N</div>
|
||||
<div>
|
||||
<h3>Conteneur Nginx</h3>
|
||||
<p style="color:#dbe5f0;margin-top:8px;">Fichiers du CV<br>(HTML, CSS, JS, JSON)</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align:center; line-height:1.55; margin:20px 0;">Coolify déploie une instance via un conteneur
|
||||
Nginx qui rend mon CV accessible sur <strong>cv.stephaneliabeuf.fr</strong>.<br><br>Il gère aussi le
|
||||
certificat SSL pour que mon site soit sécurisé.</p>
|
||||
<div class="note dynamic">
|
||||
<h3>Configuration dynamique<br>Source JSON paramétrable</h3>
|
||||
<p>Pointer sur différents fichiers JSON</p>
|
||||
<p>Contenu du CV externe et modulaire</p>
|
||||
<p>Mise à jour sans rebuild</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card green">
|
||||
<div class="step-head">
|
||||
<div class="badge">5</div>
|
||||
<div>
|
||||
<h2>En ligne !</h2>
|
||||
<p class="subtitle">Mon CV est accessible</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="browser-window">
|
||||
<div class="window-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
|
||||
style="margin-left:8px;color:#20ef67">🔒 https://cv.stephaneliabeuf.fr</span></div>
|
||||
<div class="browser-content">
|
||||
<div class="profile">
|
||||
<div class="avatar"></div>
|
||||
<div>
|
||||
<h3>Stéphane Liabeuf</h3>
|
||||
<p>25 ans d’expérience en SI</p>
|
||||
<p>DSI / UX / Digital</p><span class="btn">Télécharger mon CV</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div><span>▣</span>Expérience</div>
|
||||
<div><span>☼</span>Compétences</div>
|
||||
<div><span>✍</span>Missions</div>
|
||||
<div><span>◎</span>Contact</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-icon">⚙</div>
|
||||
<div><strong>Source JSON sélectionnée</strong><br><span
|
||||
style="font-size:14px;color:#dbe5f0">cv-data-limagrain.json</span></div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-icon">🔒</div>
|
||||
<div><strong>Sécurisé</strong><br>HTTPS / SSL</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-icon">✅</div>
|
||||
<div>Mon CV est en ligne,<br>sécurisé en HTTPS.</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="flow">
|
||||
<h3>LE FLUX EN ACTION</h3>
|
||||
<div class="flow-row">
|
||||
<div class="flow-item"><span class="flow-ico">💻</span>
|
||||
<p>Je code en local<br>Antigravity, Claude Code, Git</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="flow-item"><span class="flow-ico">⬢</span>
|
||||
<p>Je pousse<br>sur Forgejo</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="flow-item"><span class="flow-ico">◖/>◗</span>
|
||||
<p>Forgejo détecte<br>le push webhook</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="flow-item"><span class="flow-ico">C</span>
|
||||
<p>Coolify lance<br>le déploiement</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="flow-item"><span class="flow-ico">⬢</span>
|
||||
<p>Nginx sert<br>mon CV</p>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="flow-item"><span class="flow-ico">🛡</span>
|
||||
<p>Site sécurisé<br>et accessible</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="benefits">
|
||||
<div class="benefit">
|
||||
<div class="bico">🛡</div>
|
||||
<div>
|
||||
<h4>100% indépendant</h4>
|
||||
<p>Hébergé sur mes propres serveurs</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit">
|
||||
<div class="bico">⚡</div>
|
||||
<div>
|
||||
<h4>Zéro dépendance</h4>
|
||||
<p>Aucun service tiers pour l’hébergement</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit">
|
||||
<div class="bico">∞</div>
|
||||
<div>
|
||||
<h4>Déploiement automatisé</h4>
|
||||
<p>Chaque push met le site à jour</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit">
|
||||
<div class="bico">🔒</div>
|
||||
<div>
|
||||
<h4>Sécurisé</h4>
|
||||
<p>HTTPS natif, sauvegardes et contrôles d’accès</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit">
|
||||
<div class="bico">▥</div>
|
||||
<div>
|
||||
<h4>Maîtrisé & évolutif</h4>
|
||||
<p>Scalable, monitoré et entièrement sous contrôle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3336
preview.html
3336
preview.html
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue