Update team member component

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.git
+.gitignore
+*.md
+dist

.gitignore

@@ -9,3 +9,5 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .idea/
+.pnpm-store/
+

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build
+
+FROM base
+#COPY --from=prod-deps /app/node_modules /app/node_modules
+#COPY --from=build /app/dist /app/dist
+EXPOSE 8000
+#CMD [ "pnpm", "install" ]

docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  jscc-website:
+    container_name: jscc-website-dev
+    working_dir: /app
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+      - "6006:6006"
+      - "4173:4173"
+    volumes:
+      - ./:/app/
+    stdin_open: true
+    tty: true

package.json

@@ -6,7 +6,7 @@
 		"node": ">= 18.18.0"
 	},
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host --port=3000",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

participants/philip-saa.json

@@ -6,7 +6,7 @@
 		"hideFamilyNameOnWebsite": false
 	},
 	"githubAccountName": "cowglow",
-	"company": "Saab Deutschland GmbH",
+	"company": "Saab",
 	"when": {
 		"friday": true,
 		"saturday": true

src/routes/+layout.svelte

@@ -20,15 +20,25 @@
 	:root {
 		--footer-background-color: #000;
 		--footer-text-color: #fff;
-		--max-page-width: 66rem;
+		--max-page-width: 66vw;
+	}
+	@media screen and (max-width: 1280px) {
+		:root{
+			--max-page-width: 90vw;
+		}
 	}
 	:global(html, body) {
 		font-family: 'Source Sans Pro', sans-serif;
 		margin: 0;
 		height: 100vh;
 		padding: 0;
 	}
+	:global(p,span,li){
+		font-size: calc(1.25vw + 0.875rem);
+		line-height: clamp(2.25rem, 3.5vw, 4.85rem)
+	}
 	:global(h1, h2, h3, h4, h5, h6) {
+		font-size: calc(2.25vw * 0.8475rem);
 		font-family: 'Poppins', sans-serif;
 		font-weight: 700;
 		text-transform: uppercase;

src/routes/team/TeamMember.svelte

@@ -1,77 +1,85 @@
 <script lang="ts">
-	import Box from '$lib/layout/Box.svelte';
-	import linkedinLogo from '$lib/participants/linkedin.svg';
+    import Box from '$lib/layout/Box.svelte';
+    import linkedinLogo from '$lib/participants/linkedin.svg';
 
-	export let email: string = '';
-	export let linkedin: string | undefined = undefined;
-	export let image: string | undefined = undefined;
-	export let name: string;
+    export let email: string = '';
+    export let linkedin: string | undefined = undefined;
+    export let image: string | undefined = undefined;
+    export let name: string;
 </script>
 
 <Box>
-	<div class="member">
-		<div class="image">
-			{#if image}
-				<img src={image} alt={name} />
-			{:else}
-				<span>🧑‍💻</span>
-			{/if}
-		</div>
-		<div class="infos">
-			<strong class="name-with-logo">
-				{name}
-				{#if linkedin}
-					<a
-						href={linkedin}
-						rel="external"
-						class="linkedin-link"
-						title="Link to {name} on LinkedIn"
-					>
-						<img src={linkedinLogo} height="32" width="32" alt="Link to {name} on LinkedIn" />
-					</a>
-				{/if}
-			</strong>
-			{#if email}
-				<a href="mailto:{email}" title={email}>{email}</a>
-			{:else}
-				<span>-</span>
-			{/if}
-		</div>
-	</div>
+    <div class="member">
+        <div class="image">
+            {#if image}
+                <img src={image} alt={name}/>
+            {:else}
+                <span>🧑‍💻</span>
+            {/if}
+        </div>
+        <div class="infos">
+            <strong class="name-with-logo">
+                {name}
+                {#if linkedin}
+                    <a
+                            href={linkedin}
+                            rel="external"
+                            class="linkedin-link"
+                            title="Link to {name} on LinkedIn"
+                    >
+                        <img src={linkedinLogo} height="32" width="32" alt="Link to {name} on LinkedIn"/>
+                    </a>
+                {/if}
+            </strong>
+            {#if email}
+                <a href="mailto:{email}" title={email}>{email}</a>
+            {:else}
+                <span>&nbsp;</span>
+            {/if}
+        </div>
+    </div>
 </Box>
 
 <style>
-	.member {
-		display: flex;
-		flex-flow: column;
-		height: 100%;
-	}
-	.infos {
-		display: flex;
-		flex-flow: column;
-		padding: 1em;
-	}
-	.name-with-logo {
-		display: flex;
-		align-items: center;
-	}
-	.linkedin-link {
-		margin-left: 0.5em;
-	}
-	a {
-		max-width: 13em;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.image {
-		flex: 1;
-		display: grid;
-		place-items: center;
-		max-width: 15em;
-	}
-	img,
-	.image > span {
-		display: block;
-		max-width: 100%;
-	}
+    .member {
+        display: flex;
+        flex-flow: column;
+        height: 100%;
+    }
+
+    .infos {
+        display: flex;
+        flex-flow: column;
+        padding: 1em;
+    }
+
+    .name-with-logo {
+        display: flex;
+        align-items: center;
+    }
+
+    .linkedin-link {
+        margin-left: 0.5em;
+    }
+
+    a {
+        max-width: 13em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .image {
+        display: grid;
+        width: 15em;
+        height: 15em;
+        overflow: hidden;
+    }
+    .image:has(span){
+        place-content: center;
+    }
+    .image > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 </style>