github action🔧

.github/workflows/build-image.yml

@@ -0,0 +1,10 @@
+name: Build and push Docker images
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Build and push Docker images
+        uses: docker/build-push-action@v6.3.0

Dockerfile

@@ -0,0 +1,45 @@
+# Étape 1 : Construction de l'image de base
+FROM node:18 AS builder
+
+# Définir le répertoire de travail dans le conteneur
+WORKDIR /app
+
+# Copier les fichiers package.json et pnpm-lock.yaml
+COPY package.json pnpm-lock.yaml ./
+
+# Installer pnpm
+RUN npm install -g pnpm
+
+# Installer les dépendances du projet
+RUN pnpm install
+
+# Copier le reste des fichiers du projet
+COPY . .
+
+# Construire le projet Next.js
+RUN pnpm build
+
+# Étape 2 : Création de l'image finale
+FROM node:18-alpine
+
+# Définir le répertoire de travail dans le conteneur
+WORKDIR /app
+
+# Copier les dépendances de production depuis l'étape de build
+COPY --from=builder /app/node_modules ./node_modules
+
+# Copier les fichiers de build du projet
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/package.json ./
+
+# Copier les fichiers statiques du répertoire public
+COPY --from=builder /app/public ./public
+
+# Installer pnpm dans l'image finale
+RUN npm install -g pnpm
+
+# Exposer le port sur lequel l'application tourne
+EXPOSE 3000
+
+# Commande pour démarrer l'application
+CMD ["pnpm", "start"]

docker-compose.yml

@@ -1,8 +1,6 @@
-version: '3.8'
-
 services:
   nextjs:
-    image: docker.io/miicolas/nextjs-app-pnpm
+    build : .
     ports:
       - '3000:3000'
     environment:
@@ -13,12 +11,16 @@ services:
     depends_on:
       - mysql
 
+
+
   mysql:
     image: mysql:8.0
     ports:
       - '3306:3306'
     environment:
       MYSQL_ROOT_PASSWORD: d396d4de9f319ee165ce
       MYSQL_DATABASE: apps
+
+
 
 

src/app/page.tsx

@@ -1,18 +1,15 @@
-import React from "react";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import WordPullUp from "@/components/magicui/word-pull-up";
 import WorkExperienceCard from "@/components/cards/workExperienceCard";
 import { workExperiences } from "@/lib/utils";
 
-
-
 export default function Home() {
 
   return (
     <main className="flex flex-col min-h-[100dvh] space-y-10">
       <section className="flex flex-col items-center justify-center space-y-4">
         <div className="block lg:flex items-center gap-4">
-        <Avatar className="w-48 h-48 block lg:hidden mb-4 lg:mb-0">
+          <Avatar className="w-48 h-48 block lg:hidden mb-4 lg:mb-0">
             <AvatarImage src="/images/profil.webp" alt="Nicolas Becharat" />
           </Avatar>
           <div className="flex flex-col space-y-4">
@@ -61,4 +58,4 @@ export default function Home() {
       </section>
     </main>
   );
-}
+}

src/components/cards/workExperienceCard.tsx

@@ -19,6 +19,7 @@ export default function WorkExperienceCard({
   image,
 }: WorkExperienceCardProps) {
   return (
+    <>
     <div className="flex gap-4 lg:gap-10 py-4">
       <div className="h-full">
         <Avatar className="w-12 h-12">
@@ -47,5 +48,6 @@ export default function WorkExperienceCard({
       </div>
 
     </div>
+    </>
   );
 }

src/lib/utils.ts

@@ -10,15 +10,15 @@ export const { workExperiences } = {
   workExperiences: [
 
     {
-      image: "/images/iim.webp",
+      image: "/images/celest.webp",
       companyName: "ABR CELEST",
       jobTitle: "Creative Designer",
       startDate: new Date("2024-02"),
       endDate: new Date("2025-06"),
       description: "I was responsible for the design of social media posts and for the creation in the association ABR CELEST. I had the chance to work with clients and to understand their needs and to create a design that would meet the needs of the clients.",
     },
     {
-      image: "/images/iim.webp",
+      image: "/images/404_devinci.webp",
       companyName: "404 Devinci",
       jobTitle: "President",
       startDate: new Date("2024-06"),