deploy

Dockerfile

@@ -1,20 +1,9 @@
-# build stage
+FROM node:lts-alpine as builder
-FROM node:lts-hydrogen AS build-stage
+
 WORKDIR /app
-COPY package*.json ./
+COPY . ./
-# Omitting --ignore-script here, because they may be needed for dependencies to build well
+RUN npm install && npm run build
-# => a regular audit of our dependencies should be made, to notice and address any vulnerabilities
-RUN npm install
-# This copies all files from the current directory to the WORKDIR in the image
-# It is only safe if the .dockerignore file is properly configured to avoid copying
-# sensitive or useless files to the image
-COPY . .
 
-RUN npm run build
+FROM nginx:alpine
 
-# production stage
+COPY --from=builder /app/dist /usr/share/nginx/html
-# FIXME? The nginx image runs with root as the default user. Make sure it is safe here
-FROM nginx:stable-alpine AS production-stage
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build-stage /app/dist /usr/share/nginx/html
-CMD ["nginx", "-g", "daemon off;"]

src/App.vue

@@ -205,7 +205,7 @@ onUnmounted(() => {
     </div>
     <div class="flex h-50 w-full"/>
   </div>
-    <div class="flex h-300 w-full relative z-10 top-0 magic-showcase" :style="{ height: projects.length * 100 + 'vh'}">
+    <div class="flex h-300 w-full relative z-10 top-0 magic-showcase width-container" :style="{ height: projects.length * 100 + 'vh'}">
       <div class="absolute h-full w-full">
         <div class="sticky top-0 grid min-h-screen w-full grid-cols-1 lg:grid-cols-2">
           <div class="h-[30vh] bg-black lg:h-auto"></div>
@@ -225,6 +225,11 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+
+.width-container{
+  width:calc( v-bind('projects.length') * 100 )"vh";
+}
+
 .sticky {
   position: -webkit-sticky;
   position: sticky;