Initial commit

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,29 @@
+# Build
+.nuxt
+.output
+dist
+
+# Cache
+.cache
+
+# Dependencies
+node_modules
+
+# Editor settings
+*.sublime-project
+*.sublime-workspace
+.vscode
+.idea
+
+# Logs
+*.log*
+
+# Nitro
+.nitro
+
+# System
+Icon
+.DS_Store
+
+# Environment variables
+.env

app.vue

@@ -0,0 +1,204 @@
+<template>
+
+    <div>
+        <NuxtPage />
+    </div>
+
+</template>
+
+<script setup>
+
+    // ----------------------------------------------------------------------------
+    // HEAD
+    // ----------------------------------------------------------------------------
+
+    const route = useRoute();
+    const pageTitle = route.meta.pageTitleChunk ? `Paul Nicoué | ${route.meta.pageTitleChunk}` : 'Paul Nicoué';
+    const pageUrl = `https://paulnicoue.com${route.path}`;
+
+    useHead({
+        title: pageTitle,
+        meta: [
+            /* Basic metadata */
+            {charset: 'utf-8'},
+            {name: 'viewport', content: 'width=device-width'},
+            /* Name */
+            {id: 'schema_name', itemprop: 'name', content: 'Paul Nicoué'},
+            /* Description */
+            {name: 'description', content: 'Intégrateur et développeur web.'},
+            {id: 'schema_description', itemprop: 'description', content: 'Intégrateur et développeur web.'},
+            /* Author */
+            {name: 'author', content: 'Paul Nicoué'},
+            /* Image */
+            {id: 'schema_image', itemprop: 'image', content: '#'},
+            /* Open Graph */
+            {property: 'og:title', content: pageTitle},
+            {property: 'og:description', content: 'Intégrateur et développeur web.'},
+            {property: 'og:image', content: '#'},
+            {property: 'og:image:width', content: '1200'},
+            {property: 'og:image:height', content: '675'},
+            {property: 'og:url', content: pageUrl},
+            {property: 'og:type', content: 'website'},
+            /* Twitter Card */
+            {name: 'twitter:card', content: 'summary_large_image'},
+            {name: 'twitter:title', content: 'Paul Nicoué'},
+            {name: 'twitter:description', content: 'Intégrateur et développeur web.'},
+            {name: 'twitter:image', content: '#'}
+        ],
+        link: [
+            /* Canonical URL */
+            {rel: 'canonical', href: pageUrl},
+            /* Favicon */
+            {rel: 'icon', sizes: 'any', href: '#'},
+            {rel: 'icon', type: 'image/svg+xml', href: '#'},
+            {rel: 'apple-touch-icon', href: '#'},
+            {rel: 'manifest', href: '#'}
+        ],
+        style: [
+            /* Schema */
+            {itemscope: true, itemtype: 'https://schema.org/WebSite', itemref: 'schema_name schema_description schema_image'}
+        ],
+        script: [
+            /* Matomo tracking code */
+            {children: `
+                var _paq = window._paq = window._paq || [];
+                _paq.push(["disableCookies"]);
+                _paq.push(['trackPageView']);
+                _paq.push(['enableLinkTracking']);
+                (function() {
+                    var u="https://matomo.paulnicoue.com/";
+                    _paq.push(['setTrackerUrl', u+'matomo.php']);
+                    _paq.push(['setSiteId', '4']);
+                    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+                })();
+            `}
+        ]
+    })
+    
+</script>
+
+<style lang="scss">
+
+    // ----------------------------------------------------------------------------
+    // MODULES
+    // ----------------------------------------------------------------------------
+
+    @use 'minireset.css';
+
+    // ----------------------------------------------------------------------------
+    // VARIABLES
+    // ----------------------------------------------------------------------------
+
+    :root {
+
+        // Fonts
+
+        --text-font-family: 'Nunito', Verdana, sans-serif;
+        --title-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
+        --regular-font-weight: 400;
+        --medium-font-weight: 500;
+        --semi-bold-font-weight: 600;
+        --bold-font-weight: 700;
+        --text-font-size: 1rem;
+        --text-line-height: calc(var(--text-font-size) * 1.2);
+        --caption-font-size: 0.9rem;
+        --caption-line-height: calc(var(--caption-font-size) * 1.2);
+        --footnote-font-size: 0.8rem;
+        --footnote-line-height: calc(var(--footnote-font-size) * 1.2);
+        --h1-font-size: 1.6rem;
+        --h1-line-height: calc(var(--h1-font-size) * 1.2);
+        --h2-font-size: 1.4rem;
+        --h2-line-height: calc(var(--h2-font-size) * 1.2);
+        --h3-font-size: 1.2rem;
+        --h3-line-height: calc(var(--h3-font-size) * 1.2);
+
+        // Dimensions
+
+        --icon-size: 2.5rem;
+
+        // Colors
+
+        --eerie-black: #212121;
+        --emerald: #72C080;
+        --granny-smith-apple: #A3F3B0;
+        --middle-green: #428F53;
+
+    }
+
+    // Media queries
+
+    $tablet-media-query: 48rem;
+    $desktop-media-query: 62rem;
+
+    @media screen and (min-width: $tablet-media-query) {
+
+        :root {
+
+        }
+    }
+
+    // ----------------------------------------------------------------------------
+    // GENERALITIES
+    // ----------------------------------------------------------------------------
+
+    // Fonts and colors
+
+    body {
+        font-family: var(--text-font-family);
+        font-size: var(--text-font-size);
+        line-height: var(--text-line-height);
+        color: white;
+        background-color: var(--eerie-black);
+    }
+
+    h1 {
+        font-family: var(--title-font-family);
+        font-size: var(--h1-font-size);
+        line-height: var(--h1-line-height);
+    }
+
+    h2 {
+        font-family: var(--text-font-family);
+        font-size: var(--h2-font-size);
+        line-height: var(--h2-line-height);
+        margin: 0 0 4rem 0;
+    }
+
+    h3 {
+        font-family: var(--text-font-family);
+        font-size: var(--h3-font-size);
+        line-height: var(--h3-line-height);
+        margin: 2rem 0 1rem 0;
+    }
+
+    strong {
+        font-weight: var(--bold-font-weight);
+    }
+
+    em {
+        font-style: italic;
+    }
+
+    // Link style
+
+    a {
+        color: white;
+        text-decoration: underline var(--emerald);
+        border-radius: 2px;
+        transition: color 200ms ease-in-out;
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: var(--emerald);
+        }
+
+        &:focus-visible {
+            outline: 1px dashed var(--emerald);
+            outline-offset: 2px;
+            animation: expand-outline 200ms ease-in-out;
+        }
+    }
+
+</style>

components/MainTitle.vue

@@ -0,0 +1,14 @@
+<template>
+
+    <h1>Paul Nicoué, intégrateur et développeur web</h1>
+
+</template>
+
+<style lang="scss">
+
+    h1 {
+        color: var(--emerald);
+        text-align: center;
+    }
+
+</style>

nuxt.config.ts

@@ -0,0 +1,8 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+    postcss: {
+        plugins: {
+            'autoprefixer': {}
+        }
+    }
+})

package.json

@@ -0,0 +1,22 @@
+{
+    "name": "Paul Nicoué",
+    "private": true,
+    "browserslist": [
+        "> 0.5%",
+        "last 4 versions",
+        "Firefox ESR",
+        "not dead"
+    ],
+    "devDependencies": {
+        "minireset.css": "^0.0.7",
+        "nuxt": "^3.0.0-rc.11"
+    },
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "start": "nuxt start"
+    }
+}

pages/index.vue

@@ -0,0 +1,19 @@
+<template>
+
+    <div>
+        <MainTitle></MainTitle>
+    </div>
+
+</template>
+
+<script setup>
+
+    // ----------------------------------------------------------------------------
+    // HEAD
+    // ----------------------------------------------------------------------------
+
+    definePageMeta({
+        pageTitleChunk: null
+    })
+
+</script>

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}