feat: add dark theme

.npmrc

@@ -1,2 +1,4 @@
 strict-peer-dependencies=false
 auto-install-peers=true
+ignore-workspace-root-check=true
+save-exact=true

apps/website/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    extends: ['@hrwg/eslint-config'],
+    plugins: ['qwik'],
+};

apps/website/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:20-alpine AS node-pnpm
+
+RUN npm i -g pnpm
+
+FROM node-pnpm AS hrwg-base
+
+ARG ORIGIN
+ENV ORIGIN ${ORIGIN}
+
+WORKDIR /app
+EXPOSE 4200
+
+RUN mkdir -p var/cache var/logs var/data
+COPY ./dist/apps/website .
+COPY ./package.json .
+COPY ./pnpm-lock.yaml .
+
+RUN pnpm install --production --frozen-lockfile --ignore-scripts
+
+CMD ["node", "server/entry.express.mjs"]

apps/website/adapters/express/vite.config.ts

@@ -0,0 +1,16 @@
+import { nodeServerAdapter } from '@builder.io/qwik-city/adapters/node-server/vite';
+import { extendConfig } from '@builder.io/qwik-city/vite';
+
+import baseConfig from '../../vite.config';
+
+export default extendConfig(baseConfig, () => {
+    return {
+        build: {
+            ssr: true,
+            rollupOptions: {
+                input: ['apps/website/src/entry.express.tsx', '@qwik-city-plan'],
+            },
+        },
+        plugins: [nodeServerAdapter({ name: 'express' })],
+    };
+});

apps/website/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "@hrwg/website",
+    "private": true,
+    "scripts": {
+        "qwik": "qwik"
+    }
+}

apps/website/project.json

@@ -13,7 +13,8 @@
                 "outputPath": "dist/apps/website"
             },
             "configurations": {
-                "preview": {}
+                "preview": {},
+                "production": {}
             }
         },
         "build.client": {
@@ -25,21 +26,32 @@
         },
         "build.ssr": {
             "executor": "@nx/vite:build",
-            "defaultConfiguration": "preview",
+            "defaultConfiguration": "production",
             "options": {
                 "outputPath": "dist/apps/website"
             },
             "configurations": {
                 "preview": {
                     "ssr": "src/entry.preview.tsx",
                     "mode": "production"
+                },
+                "production": {
+                    "configFile": "apps/website/adapters/express/vite.config.ts",
+                    "mode": "production"
                 }
             }
         },
+        "locales.extract": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "qwik-speak-extract --supportedLangs=de-DE,en-US --assetsPath=src/locales",
+                "cwd": "apps/website"
+            }
+        },
         "preview": {
             "executor": "@nx/vite:preview-server",
             "options": {
-                "buildTarget": "website:build",
+                "buildTarget": "website:build:preview",
                 "port": 4300
             }
         },

apps/website/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#7e22ce</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

apps/website/public/keys/rherwig.pub

@@ -0,0 +1 @@
+ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIN30bd6C7jHqmu7l39eQ+oIAxDlk93t3T1fpqgUB/6H5 [email protected]

apps/website/public/manifest.json

@@ -1,9 +1,29 @@
 {
-  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-  "name": "qwik-project-name",
-  "short_name": "Welcome to Qwik",
-  "start_url": ".",
-  "display": "standalone",
-  "background_color": "#fff",
-  "description": "A Qwik project app."
+    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+    "name": "hrwg",
+    "short_name": "hrwg",
+    "start_url": ".",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512-maskable.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "orientation": "portrait",
+    "display": "standalone",
+    "description": "Personal website of Rico Herwig"
 }

apps/website/public/robots.txt

@@ -1,2 +1,2 @@
 User-agent: *
-Disallow:
+Allow: /

apps/website/src/assets/scss/_tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/website/src/assets/scss/_typography.scss

@@ -0,0 +1,11 @@
+@use '@fontsource-variable/alegreya';
+@use '@fontsource-variable/source-sans-3';
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @apply font-serif font-bold;
+}

apps/website/src/assets/scss/main.scss

@@ -0,0 +1,9 @@
+@use './tailwind';
+@use './typography';
+
+html,
+body {
+    @apply w-full h-full;
+    @apply font-sans antialiased;
+    @apply bg-background-dark text-primary-50;
+}

apps/website/src/components/cv/the-address.tsx

@@ -0,0 +1,58 @@
+import { component$ } from '@builder.io/qwik';
+import { useTranslate } from 'qwik-speak';
+
+export default component$(() => {
+    const t = useTranslate();
+    const isPrivateMode = true;
+
+    return (
+        <div class="grid w-full grid-cols-2 text-left leading-[3rem] print:max-w-xs md:leading-loose print:text-black">
+            <div class="pr-10 font-bold uppercase">{t('experience.address.address')}</div>
+
+            {!isPrivateMode ? (
+                <div>
+                    <div>Rosenberger Str. 9</div>
+                    <div>28790 Schwanewede</div>
+                    <div>{t('experience.address.country')}</div>
+                </div>
+            ) : (
+                <div>{t('experience.restricted')}</div>
+            )}
+
+            <div class="pr-10 font-bold uppercase">{t('experience.address.phone')}</div>
+
+            {!isPrivateMode ? (
+                <div>
+                    <a
+                        href="#"
+                        class="block underline transition-all hover:translate-x-1"
+                    >
+                        +49 (0) 151 / 12 297 144
+                    </a>
+                </div>
+            ) : (
+                <div>{t('experience.restricted')}</div>
+            )}
+
+            <div class="pr-10 font-bold uppercase">{t('experience.address.mail')}</div>
+            <div>
+                <a
+                    href="mailto:[email protected]"
+                    class="block underline transition-all hover:translate-x-1"
+                >
+                    [email protected]
+                </a>
+            </div>
+
+            <div class="pr-10 font-bold uppercase">{t('experience.address.website')}</div>
+            <div>
+                <a
+                    href="https://hrwg.de"
+                    class="block underline transition-all hover:translate-x-1"
+                >
+                    hrwg.de
+                </a>
+            </div>
+        </div>
+    );
+});

apps/website/src/components/cv/the-facts.tsx

@@ -0,0 +1,47 @@
+import { component$ } from '@builder.io/qwik';
+import { useTranslate } from 'qwik-speak';
+
+import TheAddress from './the-address';
+import TheSocialLinks from './the-social-links';
+import TheSkills from './the-skills';
+import TheLanguages from './the-languages';
+
+export default component$(() => {
+    const t = useTranslate();
+
+    return (
+        <div class="mt-20 print:text-center">
+            <section class="print:flex flex-col items-center mb-20">
+                <h2 class="text-2xl leading-6 font-bold uppercase mb-8">
+                    {t('experience.facts.info')}
+                </h2>
+
+                <TheAddress />
+            </section>
+
+            <section class="print:flex flex-col items-center mb-20 print:break-after-page">
+                <h2 class="text-2xl leading-6 font-bold uppercase mb-8">
+                    {t('experience.facts.social')}
+                </h2>
+
+                <TheSocialLinks />
+            </section>
+
+            <section class="print:flex flex-col items-center mb-20 print:mt-20">
+                <h2 class="text-2xl leading-6 font-bold uppercase mb-8">
+                    {t('experience.facts.skills')}
+                </h2>
+
+                <TheSkills />
+            </section>
+
+            <section class="print:flex flex-col items-center print:break-after-page">
+                <h2 class="text-2xl leading-6 font-bold uppercase mb-8">
+                    {t('experience.facts.languages')}
+                </h2>
+
+                <TheLanguages />
+            </section>
+        </div>
+    );
+});

apps/website/src/components/cv/the-hero-unit.tsx

@@ -0,0 +1,27 @@
+import { component$ } from '@builder.io/qwik';
+
+import ProfileImage from '../../assets/images/profile/rico.webp?jsx';
+
+export default component$(() => {
+    return (
+        <section class="mb-6 flex print:text-black">
+            <div class="flex flex-1 flex-col items-center justify-center">
+                <div class="flex items-center justify-center">
+                    <div class="mb-8 flex aspect-square w-[220px] items-center justify-center rounded-full bg-gradient-to-b from-accent-main to-accent-400">
+                        <ProfileImage
+                            alt="Bild von Rico Herwig"
+                            placeholder="blur"
+                            class="aspect-square w-[200px] rounded-full object-cover"
+                        />
+                    </div>
+                </div>
+
+                <h1 class={`text-center text-6xl font-bold uppercase`}>Rico Herwig</h1>
+
+                <h2 class={`text-center text-2xl text-accent-main font-sans`}>
+                    Frontend Developer
+                </h2>
+            </div>
+        </section>
+    );
+});