diff --git a/README.md b/README.md index 2c62eda..facb8a6 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,6 @@ Site web officiel du club Conjure de l'École de Technologie Supérieure (ÉTS). -## À propos - -Laboratoire de médias interactifs - depuis 2009. Le Club Conjure offre formation, équipement et des opportunités de compétition aux développeurs de jeux vidéo et médias interactifs. - ## Technologies - **Framework**: [Astro](https://astro.build) - Framework web statique ultra-rapide @@ -25,120 +21,14 @@ Laboratoire de médias interactifs - depuis 2009. Le Club Conjure offre formatio npm install ``` -### Développement - -Démarrer le serveur de développement : - -```bash -npm run dev -``` - -Le site sera disponible à `http://localhost:3000` - -### Build - -Créer une version optimisée pour la production : - -```bash -npm run build -``` - -Les fichiers générés seront dans le répertoire `dist/` - -### Aperçu du Build - -Prévisualiser le build localement : - -```bash -npm run preview -``` - -## Structure du Projet - -``` -src/ -├── pages/ # Routes statiques -│ ├── index.astro # Page d'accueil (principal) -│ ├── 404.astro # Page d'erreur 404 -│ ├── 500.astro # Page d'erreur 500 -│ └── fr/ # Routes françaises -│ ├── index.astro -│ └── 404.astro -├── layouts/ # Layouts réutilisables -│ └── MainLayout.astro -├── components/ # Composants réutilisables -│ ├── Navigation.astro -│ └── Footer.astro -├── styles/ # Feuilles de style SCSS -│ ├── main.scss -│ └── _partials/ -│ ├── _general.scss -│ ├── _navigation.scss -│ └── _media.scss -├── scripts/ # Scripts JavaScript/TypeScript -│ └── app.ts # Logique d'application principale -└── env.d.ts # Déclarations TypeScript Astro -public/ # Fichiers statiques -├── img/ # Images -│ ├── icons/ -│ ├── competitions/ -│ └── sponsors/ -├── js/ # Scripts JS compilés -└── css/ # CSS minifiés -``` - -## Pages - -- **`/`** - Page d'accueil principale (français) -- **`/fr/`** - Page d'accueil francaise (alias) -- **`/404`** - Page d'erreur 404 -- **`/fr/404`** - Page d'erreur 404 (français) -- **`/500`** - Page d'erreur 500 - -## Fonctionnalités - -- ✨ Navigation responsive avec menu hamburger -- 📱 Design mobile-first avec Bulma -- 🎠 Carousel de compétitions -- ✏️ Animation de chiffres (année) -- 🎬 Sections d'activités interactives -- 🗺️ Carte intégrée Google Maps -- 📱 Routes bilingues (Français disponible) - ## Scripts | Commande | Description | -|----------|-------------| +| ---------- | ------------- | | `npm run dev` | Démarre le serveur de développement | | `npm run build` | Crée une version optimisée pour la production | | `npm run preview` | Prévisualise le build en local | -## Déploiement - -Le site Astro génère des fichiers HTML/CSS/JS statiques optimisés. Ces fichiers peuvent être déployés sur n'importe quel serveur web statique : - -- Netlify -- Vercel -- GitHub Pages -- AWS S3 -- Hébergement traditionnel - -Déployez simplement le contenu du répertoire `dist/` - -## Scripts Personnalisés - -### Carousel (`src/scripts/app.ts`) - -Initialise Bulma Carousel pour le slider de compétitions. - -### Animation de Chiffres - -Anime les années dans la section splash screen (2009 - année courante). - -### Activités Interactives - -Gère les clics sur les boutons d'activités pour afficher/masquer le contenu détaillé. - ## Ressources - [Documentation Astro](https://docs.astro.build) @@ -149,13 +39,9 @@ Gère les clics sur les boutons d'activités pour afficher/masquer le contenu d Club Conjure - ÉTS -## Licence - -ISC - ## Contactez-nous -- 📧 Email: conjure@ens.etsmtl.ca +- 📧 Email: - 📍 Adresse: 1219 William, Montréal, Local D-2020 - 📞 Téléphone: (514) 396-8800 poste #7713 - 📱 Instagram: [@conjure_ets](https://instagram.com/conjure_ets) diff --git a/package.json b/package.json index 82c379d..885d814 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "Conjure-Site", + "name": "conjure-site", "version": "1.0.0", "description": "Site web officiel du club Conjure de l'ÉTS", "type": "module", diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro new file mode 100644 index 0000000..5784179 --- /dev/null +++ b/src/components/AboutSection.astro @@ -0,0 +1,54 @@ +--- +import { aboutSections, contactInfo, memberInfo } from '../data/about'; + +interface Props { + showMaps?: boolean; +} + +const { showMaps = true } = Astro.props; +--- + +
+

Qui sommes-nous ?

+
+
+
+ { + aboutSections.map((section) => ( +
+ {section.title} +

{section.title}

+

{section.description}

+
+ )) + } +
+ +
+ {showMaps && ( +
+

Contactez-nous

+ +
+ {contactInfo.address} +
+ {contactInfo.room} +
+ {contactInfo.email} +
+
+
+ )} + +
+

Membres

+ {memberInfo.split('\n\n').map((paragraph) =>

{paragraph}

)} +
+
+
+
+
diff --git a/src/components/ActivityCard.astro b/src/components/ActivityCard.astro new file mode 100644 index 0000000..510a626 --- /dev/null +++ b/src/components/ActivityCard.astro @@ -0,0 +1,46 @@ +--- +interface Props { + id: string; + title: string; + image: string; + description?: string; + content?: string; + logo?: string; + cta?: string; + ctaLink?: string; + isInversed?: boolean; +} + +const { id, title, image, description, content, logo, cta, ctaLink, isInversed = false } = Astro.props; +--- + +
+ {!isInversed &&
} + + {!isInversed ? ( +
+

{title}

+

{description}

+ {cta && ctaLink && ( + + + + )} +
+ ) : ( + <> +
+
+
+

{title}

+

{description}

+ +
+
+
+ {logo && {`${title}} + {content &&

{content}

} +
+ + )} +
diff --git a/src/components/CompetitionsSection.astro b/src/components/CompetitionsSection.astro new file mode 100644 index 0000000..c3d09a4 --- /dev/null +++ b/src/components/CompetitionsSection.astro @@ -0,0 +1,28 @@ +--- +import { competitions } from '../data/competitions'; +--- + +
+

Compétitions

+
+
+
+ { + competitions.map((competition) => ( +
+ {`Logo +
+ )) + } +
+
+
+ + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index e2bf0e9..d3a1296 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -22,5 +22,8 @@ diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index 23375d2..2ed3bd4 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -1,5 +1,11 @@ --- -// Navigation component +import { menuItems, socialLinks } from '../data/links'; + +interface Props { + alwaysOpen?: number; +} + +const { alwaysOpen = 2 } = Astro.props; ---
@@ -13,35 +19,37 @@ - - À propos - À Propos - - - Activitiés - Activitiés / Compétitions - - - Partenaires - Partenaires - - -
- Instagram -
- - - LinkedIn - - - Itch.io - - -
- Linktree -
- - - Courriel - + + + { + menuItems.map((item) => ( + + {item.label} + {item.label} + + )) + } + + + { + socialLinks.map((link, index) => { + const isAlwaysOpen = index >= socialLinks.length - alwaysOpen; + return ( + + {link.class ? ( +
+ {link.name} +
+ ) : ( + {link.name} + )} + + ); + }) + } diff --git a/src/components/PartnersSection.astro b/src/components/PartnersSection.astro new file mode 100644 index 0000000..45a8c1d --- /dev/null +++ b/src/components/PartnersSection.astro @@ -0,0 +1,25 @@ +--- +import { partners } from '../data/partners'; +--- + +
+

Partenaires

+
+
+
+
+ { + partners.map((partner) => ( + + {`Logo + + )) + } +
+
+
+
diff --git a/src/components/SplashScreen.astro b/src/components/SplashScreen.astro new file mode 100644 index 0000000..6387689 --- /dev/null +++ b/src/components/SplashScreen.astro @@ -0,0 +1,22 @@ +--- +interface Props { + startYear?: number; + endYear?: 'current' | number; +} + +const { startYear = 2009, endYear = 'current' } = Astro.props; +const displayEndYear = endYear === 'current' ? new Date().getFullYear() : endYear; +--- + +
+
+
+

Laboratoire de médias interactifs

+
+

+ {String(startYear).padStart(4, '0')} + {' - '} + {String(displayEndYear).padStart(4, '0')} +

+
+
diff --git a/src/data/about.ts b/src/data/about.ts new file mode 100644 index 0000000..981f953 --- /dev/null +++ b/src/data/about.ts @@ -0,0 +1,26 @@ +export const aboutSections = [ + { + title: 'Apprendre', + icon: '/img/learn.png', + description: 'En plus d\'avoir des membres avec de l\'expérience dans l\'industrie, nous offrons à nos membres une multitude de formations sous différents langages et disciplines, dont une formation intégrale pour Unreal Engine et les conférences au MIGS.', + }, + { + title: 'Équipement', + icon: '/img/remote.png', + description: 'Le club offre aux membres tout l\'équipement nécessaire pour produire vos jeux. Cela inclut une installation complète de réalité virtuelle.', + }, + { + title: 'Compétitions', + icon: '/img/medal.png', + description: 'En tant que membres, vous serez accommodés pour les divers compétitions et événement que le club permet d\'assister. Cela donne accès à diverses opportunités de réseautage.', + }, +]; + +export const contactInfo = { + address: '1219 William, Montreal', + room: 'Local D-2020', + email: 'conjure@ens.etsmtl.ca', + phone: '(514) 396-8800 poste: #7713', +}; + +export const memberInfo = 'Vous êtes étudiant ou étudiante à l\'ÉTS et vous êtes intéressé au développement de médias interactifs / jeux vidéos ? Venez au local pour nous parler. On vous donnera un laboratoire de bienvenue qui vous donnera les outils nécessaires pour vous débrouiller dans le domaine. N\'hésitez pas à nous poser des questions. Une fois le laboratoire remis, vous aurez une formation nécessaire fournie par l\'école et vous serez membres à part entière. Vous aurez finalement accès à tous les avantages d\'être dans notre club.\n\nLes membres ont accès à des formations en ligne et d\'autres fournies par nos commanditaires. De plus, ils ont accès à notre équipement pour faire leurs différents projets. Une fois par année, on organise un événement servant à mettre en valeur le travail fourni par les membres où on invite les recruteurs des compagnies en jeux vidéos pour qu\'ils puissent vous connaitre ainsi que vous donner une chance de faire des contactes dans l\'industrie et de trouver des stages plus facilement.'; diff --git a/src/data/activities.ts b/src/data/activities.ts new file mode 100644 index 0000000..f32f895 --- /dev/null +++ b/src/data/activities.ts @@ -0,0 +1,20 @@ +export const activities = [ + { + id: 'gala', + title: 'Gala Conjure', + image: '/img/gala.jpg', + description: 'Le gala est une activité annuelle permettant aux membres du club de présenter sur quoi ils ont travaillé durant l\'année aux différentes compagnies du domaine. L\'événement se présente sous forme de 5 à 8 dans les alentours du début du mois d\'octobre. Tous les gens du domaine du jeu vidéo sont invités à venir voir les efforts mis par la relève.', + cta: 'En savoir plus, contactez-nous', + ctaLink: 'mailto:conjure@ens.etsmtl.ca', + ctaType: 'primary', + }, + { + id: 'mtlgj', + title: 'Montréal Game Jam', + image: '/img/mtlgj.jpg', + logo: '/img/MTLGJ-Logo.jpg', + shortDescription: 'Le Montréal Game Jam est le chapitre montréalais pour le Global Game Jam. Cet événement international donne comme défi aux participants de réaliser un prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.', + fullDescription: 'L\'organisation du Montreal Game Jam est constituée de l\'union de multiples universités et professionnels de Montréal dont le mandat commun est de promouvoir l\'industrie du jeu vidéo.\n\nNous rassemblons étudiants et professionnels pour stimuler la création et l\'expérimentation de nouvelles idées et concepts. Nous voulons renforcer la collaboration avec la communauté du jeu et ainsi offrir la possibilité de créer de nouveaux liens à travers cet événement. C\'est en supportant le développement de cette communauté que nous pourrons renforcer l\'expertise générale. Considérant la forte présence médiatique, nos partenaires pourront ainsi démontrer leur intérêt à promouvoir la culture du jeu. C\'est le temps de découvrir de nouveaux talents, de cultiver de nouvelles idées et de former de nouveaux liens.\n\nQue les participants soient à l\'université ou de l\'industrie, l\'événement offre la possibilité de briser cette barrière et ainsi collaborer. Nous voulons surtout que vous ayez du plaisir à accomplir ce défi et réaliser ce qui vous passionne!\n\nPlus d\'information sur le site du Montreal Game Jam', + ctaLink: 'http://mtlgj.org/lang/fr/index.html', + }, +]; diff --git a/src/data/competitions.ts b/src/data/competitions.ts new file mode 100644 index 0000000..60f3d1a --- /dev/null +++ b/src/data/competitions.ts @@ -0,0 +1,26 @@ +export const competitions = [ + { + name: 'Creative Jam', + image: '/img/competitions/CreativeJam.png', + }, + { + name: 'Concours Universitaire Ubisoft', + image: '/img/competitions/GamelabUbisoft.png', + }, + { + name: 'Ludum Dare', + image: '/img/competitions/LudumDare.png', + }, + { + name: 'McGill Game Jam', + image: '/img/competitions/McGameJam.png', + }, + { + name: 'Pixel Challenge Québec', + image: '/img/competitions/PixelChallenge.png', + }, + { + name: 'Game Jam Battle', + image: '/img/competitions/GameJamBattle.png', + }, +]; diff --git a/src/data/links.ts b/src/data/links.ts new file mode 100644 index 0000000..65295a5 --- /dev/null +++ b/src/data/links.ts @@ -0,0 +1,54 @@ +// Social links +export const socialLinks = [ + { + name: 'Instagram', + url: 'https://instagram.com/conjure_ets', + icon: '/img/icons/instagram.svg', + class: 'icon-32', + }, + { + name: 'LinkedIn', + url: 'https://linkedin.com/company/conjure-ets', + icon: '/img/icons/linkedin.svg', + }, + { + name: 'Itch.io', + url: 'https://conjure.itch.io', + icon: '/img/icons/itch-io.svg', + }, + { + name: 'Facebook', + url: 'https://facebook.com/conjure.ets', + icon: '/img/icons/facebook.png', + }, + { + name: 'Linktree', + url: 'https://linktr.ee/conjureetsmtl', + icon: '/img/icons/linktree.svg', + class: 'icon-32', + }, + { + name: 'Email', + url: 'mailto:conjure@ens.etsmtl.ca', + icon: '/img/icons/email.png', + }, +]; + +// Menu items +export const menuItems = [ + { + label: 'À propos', + href: '#apropos', + icon: '/img/icons/profile.png', + }, + { + label: 'Activitiés', + href: '#activites', + icon: '/img/icons/medal.png', + }, + { + label: 'Partenaires', + href: '#partenaires', + icon: '/img/icons/sponsor.png', + }, +]; diff --git a/src/data/partners.ts b/src/data/partners.ts new file mode 100644 index 0000000..d501164 --- /dev/null +++ b/src/data/partners.ts @@ -0,0 +1,17 @@ +export const partners = [ + { + name: 'École de technologie supérieure', + logo: '/img/sponsors/ETS-color.png', + url: 'https://www.etsmtl.ca', + }, + { + name: 'LanETS', + logo: '/img/sponsors/LanETS-black.png', + url: 'https://lanets.ca', + }, + { + name: 'AEETS', + logo: '/img/sponsors/AEETS-color.png', + url: 'https://www.aeets.com/', + }, +]; diff --git a/src/pages/index.astro b/src/pages/index.astro index 17c6112..c10c425 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,94 +2,19 @@ import MainLayout from '../layouts/MainLayout.astro'; import Navigation from '../components/Navigation.astro'; import Footer from '../components/Footer.astro'; +import SplashScreen from '../components/SplashScreen.astro'; +import AboutSection from '../components/AboutSection.astro'; +import CompetitionsSection from '../components/CompetitionsSection.astro'; +import PartnersSection from '../components/PartnersSection.astro'; ---
- -
-
-
-

Laboratoire de médias interactifs

-
-

- 0000 - {' - '} - 0000 -

-
-
+ - -
-

Qui sommes-nous ?

-
-
-
-
- Apprendre -

Apprendre

-

- En plus d'avoir des membres avec de l'expérience dans l'industrie, nous offrons à nos membres une - multitude de formations sous différents langages et disciplines, dont une formation intégrale pour - Unreal Engine et les conférences au MIGS. -

-
-
- Équipement -

Équipement

-

- Le club offre aux membres tout l'équipement nécessaire pour produire vos jeux. Cela inclut une - installation complète de réalité virtuelle. -

-
-
- Compétitions -

Compétitions

-

- En tant que membres, vous serez accommodés pour les divers compétitions et événement que le club - permet d'assister. Cela donne accès à diverses opportunités de réseautage. -

-
-
-
-
-

Contactez-nous

- -
- 1219 William, Montreal
- Local D-2020
- conjure@ens.etsmtl.ca
-
-
-
-

Membres

-

- Vous êtes étudiant ou étudiante à l'ÉTS et vous êtes intéressé au développement de médias - interactifs / jeux vidéos ? Venez au local pour nous parler. On vous donnera un laboratoire de - bienvenue qui vous donnera les outils nécessaires pour vous débrouiller dans le domaine. - N'hésitez pas à nous poser des questions. Une fois le laboratoire remis, vous aurez une formation - nécessaire fournie par l'école et vous serez membres à part entière. Vous aurez finalement accès à - tous les avantages d'être dans notre club. -

-

- Les membres ont accès à des formations en ligne et d'autres fournies par nos commanditaires. De - plus, ils ont accès à notre équipement pour faire leurs différents projets. Une fois par année, on - organise un événement servant à mettre en valeur le travail fourni par les membres où on invite les - recruteurs des compagnies en jeux vidéos pour qu'ils puissent vous connaitre ainsi que vous donner - une chance de faire des contactes dans l'industrie et de trouver des stages plus facilement. -

-
-
-
-
-
+
@@ -155,80 +80,19 @@ import Footer from '../components/Footer.astro';
- -
-

Compétitions

-
-
-
-
- Logo Creative Jam -
-
- Logo Concours Universitaire Ubisoft -
-
- Logo Ludum Dare -
-
- Logo McGill Game Jam -
-
- Logo Pixel Challenge Québec -
-
- Logo Creative Jam -
-
-
-
- - -
-

Partenaires

-
-
-
-
- Logo École de technologie supérieure - Logo LanETS - Logo AEETS-color -
-
-
-
+ +