Adrien/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

affichage des prototypes

Browse source
This commit is contained in:
Didictateur 2025-11-27 11:19:40 +01:00
parent bbda663aa1
commit 310393fd4b
3 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
projets.html
View file

@ -49,7 +49,7 @@
</a>
</article>
<article class="project-card">
<article class="prototype-card">
<a class="card-link" href="" aria-label="Giant — ouvrir">
<img loading="lazy" class="project-thumb" src="projects/img/giant.png" alt="Giant — miniature">
<h3 data-i18n="project.giant.title">GiAnt</h3>

24
projets.json
View file

@ -1,24 +0,0 @@
[
{
"id": "riichi",
"title": "Riichi",
"description": "Simulateur et outils pour mahjong Riichi — moteurs, visualisations et tests.",
"tech": ["TypeScript","JS","Web"],
"image": "projects/img/riichi-tile.svg",
"repo": "https://github.com/decosse-adrien/riichi",
"live": "riichi/index.html",
"featured": true,
"date": "2024-03-12"
},
{
"id": "prototype-2",
"title": "Prototype 2",
"description": "Prototype en développement (ne pas encore mettre en avant).",
"tech": ["C","expérimental"],
"image": "projects/img/chess-pawn.svg",
"repo": "",
"live": "prototype2.html",
"featured": false,
"date": "2025-01-01"
}
]

37
style.css
View file

@ -212,15 +212,45 @@ a#easteregg:active{
/* Projects grid */
.projects-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:12px}
.projects-grid p{grid-column:1/-1}
.project-links{margin-top:10px; display:flex; gap:8px}
/* Project card */
.project-card{background:var(--card); border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(15,23,42,0.05); border:1px solid rgba(15,23,42,0.04)}
.project-card .project-thumb{width:100%; height:300px; object-fit:cover; border-radius:6px; display:block; margin-bottom:10px}
.project-card h3{margin:8px 0 6px; font-size:18px}
.project-card .excerpt{color:var(--muted); font-size:15px; margin:0}
.project-card .tech{margin-top:8px}
.project-card .tag{display:inline-block; background:rgba(15,23,42,0.04); padding:4px 8px; margin-right:6px; border-radius:6px; font-size:12px}
.project-links{margin-top:10px; display:flex; gap:8px}
.projects-grid p{grid-column:1/-1}
/* Prototype card */
.prototype-card{background:var(--card); border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(15,23,42,0.05); border:1px solid rgba(15,23,42,0.04); position:relative; overflow:hidden}
.prototype-card .project-thumb{width:100%; height:300px; object-fit:cover; border-radius:6px; display:block; margin-bottom:10px}
/* Ensure image stays below the badge but within card clipping */
.prototype-card .project-thumb{position:relative; z-index:1}
.prototype-card h3{margin:8px 0 6px; font-size:18px}
.prototype-card .excerpt{color:var(--muted); font-size:15px; margin:0}
.prototype-card .tech{margin-top:8px}
.prototype-card .tag{display:inline-block; background:rgba(15,23,42,0.04); padding:4px 8px; margin-right:6px; border-radius:6px; font-size:12px}
.prototype-card::before{
content:"PROTOTYPAGE";
position:absolute;
top:110px;
left:-30px;
width:210px;
height:34px;
line-height: 30px;
text-align: center;
background:#6e98f3;
border-radius:6px;
box-shadow:0 6px 18px rgba(37,99,235,0.12);
pointer-events:none;
z-index:2;
opacity:0.98;
transform-origin: left top;
transform: rotate(-40deg);
}
.lang-toggle{color:var(--muted); text-decoration:none; padding:4px 6px; border-radius:6px}
.lang-toggle.active{background:rgba(37,99,235,0.08); color:var(--accent);}
@ -229,10 +259,11 @@ a#easteregg:active{
@media (max-width:900px){
.projects-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px}
.project-card .project-thumb{height:220px}
.prototype-card .project-thumb{height:220px}
}
@media (max-width:600px){
.projects-grid{grid-template-columns:1fr}
.project-card .project-thumb{height:180px}
.prototype-card .project-thumb{height:180px}
}