Initial commit
This commit is contained in:
Paul Nicoué
commit
820907c3c2
9 changed files with 13506 additions and 0 deletions
204
app.vue
Normal file
204
app.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue