Migration vers architecture Svelte + Kirby inspirée de design-to-pack
- Mise en place de Svelte 4 avec Vite pour le frontend (SPA) - Simplification des templates PHP (header/footer minimalistes) - Création de templates JSON pour API (home, about, expertise, portfolio, jouer, game, blog, article, project) - Ajout d'un controller de site pour définir genericData globalement - Structure des stores Svelte (page, navigation, locale, site) - Router avec navaid pour navigation SPA et interception des liens - Composants layout (Header, Footer, Cursor) et vues de base - Build Vite vers assets/dist/ (index.js/css) - Header PHP détecte assets/dist pour basculer dev/prod Architecture fonctionnelle de base établie, à améliorer et compléter. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
c4456d587c
commit
cbe89acb21
53 changed files with 3348 additions and 772 deletions
177
src/views/About.svelte
Normal file
177
src/views/About.svelte
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
|
||||
export let data
|
||||
|
||||
$: intro = data?.intro || {}
|
||||
$: mission = data?.mission || {}
|
||||
$: manifesto = data?.manifesto || {}
|
||||
$: team = data?.team || {}
|
||||
</script>
|
||||
|
||||
<div class="about" transition:fade>
|
||||
<section class="about__intro">
|
||||
<h1>{intro.title || data?.title}</h1>
|
||||
{#if intro.text}
|
||||
<p class="about__intro-text">{@html intro.text}</p>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#if mission.text}
|
||||
<section class="about__section">
|
||||
<h2>{mission.title}</h2>
|
||||
<div class="about__section-content">
|
||||
{@html mission.text}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if manifesto.text}
|
||||
<section class="about__section">
|
||||
<h2>{manifesto.title}</h2>
|
||||
<div class="about__section-content">
|
||||
{@html manifesto.text}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if team.members && team.members.length > 0}
|
||||
<section class="about__team">
|
||||
<h2>{team.title}</h2>
|
||||
|
||||
<div class="about__team-grid">
|
||||
{#each team.members as member}
|
||||
<article class="team-card">
|
||||
{#if member.photo}
|
||||
<div class="team-card__photo">
|
||||
<img src={member.photo} alt={member.name} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="team-card__info">
|
||||
<h3>{member.name}</h3>
|
||||
<p class="team-card__role">{member.role}</p>
|
||||
|
||||
{#if member.bio}
|
||||
<p class="team-card__bio">{member.bio}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.about__intro {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about__intro h1 {
|
||||
font-size: clamp(2.5rem, 6vw, 5rem);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about__intro-text {
|
||||
font-size: clamp(1.1rem, 2vw, 1.5rem);
|
||||
opacity: 0.9;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about__section {
|
||||
max-width: 1200px;
|
||||
margin: 4rem auto;
|
||||
}
|
||||
|
||||
.about__section h2 {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 2rem;
|
||||
color: #04fea0;
|
||||
}
|
||||
|
||||
.about__section-content {
|
||||
line-height: 1.8;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.about__team {
|
||||
max-width: 1400px;
|
||||
margin: 6rem auto 0;
|
||||
}
|
||||
|
||||
.about__team h2 {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
color: #04fea0;
|
||||
}
|
||||
|
||||
.about__team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: #04fea0;
|
||||
}
|
||||
|
||||
.team-card__photo {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.team-card__photo img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.team-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.team-card__role {
|
||||
color: #04fea0;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.team-card__bio {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about {
|
||||
padding: 6rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.about__team-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
24
src/views/Article.svelte
Normal file
24
src/views/Article.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="article" transition:fade>
|
||||
<div class="article__container">
|
||||
<h1>{data?.title || 'Article'}</h1>
|
||||
<p>Article view - To be implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.article {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.article__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
24
src/views/Blog.svelte
Normal file
24
src/views/Blog.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="blog" transition:fade>
|
||||
<div class="blog__container">
|
||||
<h1>{data?.title || 'Blog'}</h1>
|
||||
<p>Blog view - To be implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.blog {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
45
src/views/Default.svelte
Normal file
45
src/views/Default.svelte
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="default" transition:fade>
|
||||
<div class="default__container">
|
||||
<h1>{data?.title || 'Page'}</h1>
|
||||
{#if data?.body}
|
||||
<div class="default__content">
|
||||
{@html data.body}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.default {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
}
|
||||
|
||||
.default__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 4rem);
|
||||
margin-bottom: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.default__content {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.default {
|
||||
padding: 6rem 1rem 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
24
src/views/Expertise.svelte
Normal file
24
src/views/Expertise.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="expertise" transition:fade>
|
||||
<div class="expertise__container">
|
||||
<h1>{data?.title || 'Expertise'}</h1>
|
||||
<p>Expertise view - To be implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.expertise {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.expertise__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
24
src/views/Game.svelte
Normal file
24
src/views/Game.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="game" transition:fade>
|
||||
<div class="game__container">
|
||||
<h1>{data?.title || 'Game'}</h1>
|
||||
<p>Game view - To be implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.game {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.game__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
164
src/views/Home.svelte
Normal file
164
src/views/Home.svelte
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { fade } from 'svelte/transition'
|
||||
import VideoBackground from '@components/ui/VideoBackground.svelte'
|
||||
import Button from '@components/ui/Button.svelte'
|
||||
import { navigateTo } from '@lib/router'
|
||||
import { pageEnter } from '@lib/animations'
|
||||
|
||||
export let data
|
||||
|
||||
let contentElement
|
||||
|
||||
onMount(() => {
|
||||
if (contentElement) {
|
||||
pageEnter(contentElement)
|
||||
}
|
||||
})
|
||||
|
||||
function handleExplore() {
|
||||
navigateTo(data?.hero?.cta_link || '/portfolio')
|
||||
}
|
||||
|
||||
$: hero = data?.hero || {}
|
||||
$: backgroundVideo = data?.background_video
|
||||
$: floatingBubbles = data?.floating_bubbles || []
|
||||
</script>
|
||||
|
||||
<div class="home" transition:fade>
|
||||
{#if backgroundVideo}
|
||||
<VideoBackground src={backgroundVideo} />
|
||||
{/if}
|
||||
|
||||
<div class="home__content" bind:this={contentElement}>
|
||||
<h1 class="home__title">
|
||||
{@html hero.title || 'PLAY TO ENGAGE'}
|
||||
</h1>
|
||||
|
||||
{#if hero.subtitle}
|
||||
<p class="home__subtitle">
|
||||
{@html hero.subtitle}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if hero.cta_text}
|
||||
<Button on:click={handleExplore} variant="primary" size="large">
|
||||
{hero.cta_text}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if floatingBubbles.length > 0}
|
||||
<div class="home__bubbles">
|
||||
{#each floatingBubbles as bubble}
|
||||
<div class="bubble bubble--{bubble.position}">
|
||||
{bubble.text}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.home {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 6rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.home__content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.home__title {
|
||||
font-size: clamp(3rem, 8vw, 8rem);
|
||||
font-family: 'Danzza', sans-serif;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.home__title :global(.highlight) {
|
||||
color: #04fea0;
|
||||
}
|
||||
|
||||
.home__subtitle {
|
||||
font-size: clamp(1.2rem, 3vw, 2rem);
|
||||
margin: 0 0 3rem;
|
||||
opacity: 0.9;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.home__bubbles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: absolute;
|
||||
background: rgba(4, 254, 160, 0.1);
|
||||
border: 1px solid rgba(4, 254, 160, 0.3);
|
||||
border-radius: 50%;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: #04fea0;
|
||||
backdrop-filter: blur(10px);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.bubble--top-left {
|
||||
top: 15%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.bubble--top-right {
|
||||
top: 20%;
|
||||
right: 15%;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.bubble--bottom-left {
|
||||
bottom: 25%;
|
||||
left: 15%;
|
||||
animation-delay: -4s;
|
||||
}
|
||||
|
||||
.bubble--bottom-right {
|
||||
bottom: 20%;
|
||||
right: 10%;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
padding: 5rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
24
src/views/Jouer.svelte
Normal file
24
src/views/Jouer.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="jouer" transition:fade>
|
||||
<div class="jouer__container">
|
||||
<h1>{data?.title || 'Jouer'}</h1>
|
||||
<p>Jouer view - To be implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.jouer {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.jouer__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
24
src/views/Portfolio.svelte
Normal file
24
src/views/Portfolio.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="portfolio" transition:fade>
|
||||
<div class="portfolio__container">
|
||||
<h1>{data?.title || 'Portfolio'}</h1>
|
||||
<p>Portfolio view - To be implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.portfolio {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.portfolio__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
24
src/views/Project.svelte
Normal file
24
src/views/Project.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition'
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<div class="project" transition:fade>
|
||||
<div class="project__container">
|
||||
<h1>{data?.title || 'Project'}</h1>
|
||||
<p>Project view - To be implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.project {
|
||||
min-height: 100vh;
|
||||
padding: 8rem 2rem 4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.project__container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue