Skip to content

Commit

Permalink
Merge pull request #97
Browse files Browse the repository at this point in the history
feature/no-ref/update-content
  • Loading branch information
botmaster authored Feb 22, 2024
2 parents cfc7a5a + b967625 commit c0b60a7
Show file tree
Hide file tree
Showing 12 changed files with 111 additions and 73 deletions.
6 changes: 5 additions & 1 deletion components/app/ScrobbleListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@ const trackImage = computed(() => {
}
}
&__content {
@apply pr-2;
}
&__meta {
@apply text-muted-text leading-tight;
Expand All @@ -112,7 +116,7 @@ const trackImage = computed(() => {
}
&__title {
@apply font-display leading-[1] mb-[0.1em];
@apply font-display leading-[1] mb-[0.1em] line-clamp-2;
}
&--small {
Expand Down
11 changes: 11 additions & 0 deletions components/content/FanList.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import { fanItems } from '~/data/fanItems';
</script>

<template>
<p>
<template v-for="(item, index) in fanItems" :key="item.label">
<a :href="item.url" rel="nofollow" target="_blank">{{ item.label }}</a><span v-if="index !== fanItems.length - 1">, </span>
</template>...
</p>
</template>
17 changes: 9 additions & 8 deletions content/en/about.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@ description: Pascal Achard, senior frontend developer, 20+ years of experience,
## The creative point

Responsive, mobile first.
Colors : déclinaison du thème [Nord](https://www.nordtheme.com/){target="_blank" rel="noopener"}
Typography : [Rubik](https://fonts.google.com/specimen/Rubik){target="_blank" rel="noopener"}
Colors: déclinaison du thème [Nord](https://www.nordtheme.com/){target="_blank" rel="noopener"}
Typography: [Rubik](https://fonts.google.com/specimen/Rubik){target="_blank" rel="noopener"} for headings, [System UI](https://github.com/system-fonts/modern-font-stacks){target="_blank" rel="noopener"} for body text.

## The technical point

Type : [JAMstack](https://jamstack.org/){target="_blank" rel="noopener"}
Language : [Typescript](https://www.typescriptlang.org/){target="_blank" rel="noopener"}
Framework js : [Nuxt.js](https://nuxtjs.org){target="_blank" rel="noopener"}
Framework css : [Tailwindcss](https://tailwindcss.com/){target="_blank" rel="noopener"}
Hosting : [Netlify](https://www.netlify.com/){target="_blank" rel="noopener"}
CMS : [NuxtContent](https://content.nuxtjs.org/){target="_blank" rel="noopener"}. `md` files.
Type : [Hybrid Rendering](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering){target="_blank" rel="noopener"}
Language: [Typescript](https://www.typescriptlang.org/){target="_blank" rel="noopener"}
Framework js: [Nuxt.js](https://nuxtjs.org){target="_blank" rel="noopener"} {{ nuxtVersion }}
Framework css: [Tailwindcss](https://tailwindcss.com/){target="_blank" rel="noopener"}
Hosting: [Netlify](https://www.netlify.com/){target="_blank" rel="noopener"}
CMS: [NuxtContent](https://content.nuxtjs.org/){target="_blank" rel="noopener"}. `md` files.
APIs : [Notion API](https://developers.notion.com/){target="_blank" rel="noopener"} for data on the "Readings" page, [Last.fm Music Discovery API](https://www.last.fm/api){target="_blank" rel="noopener"} for data on the "Lab" page.

### The complete list of dependencies

Expand Down
26 changes: 7 additions & 19 deletions content/en/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,8 @@ Senior frontend software engineer at <img loading="lazy" src="/images/content/js
::

::Sheetelevation
### At the moment, I am a fan of:

[Vue.js](https://vuejs.org/){target="_blank" rel="noopener"}, [Nuxt.js](https://nuxt.com/){target="_blank" rel="noopener"}, [Pinia](https://pinia.vuejs.org/){target="_blank" rel="noopener"}, [TypeScript](https://www.typescriptlang.org/){target="_blank" rel="noopener"}, [Craftcms](https://craftcms.com/){target="_blank" rel="noopener"}, [Twig](https://twig.symfony.com/){target="_blank" rel="noopener"}, [Tailwindcss](https://tailwindcss.com/){target="_blank" rel="noopener"}, [Docker](https://www.docker.com/){target="_blank" rel="noopener"}, [Node.js](https://nodejs.org/){target="_blank" rel="noopener"}, [Webpack](https://webpack.js.org/){target="_blank" rel="noopener"}, [Vite](https://vitejs.dev/){target="_blank" rel="noopener"}, [Prettier](https://prettier.io/){target="_blank" rel="noopener"}, [Notion](https://www.notion.so){target="_blank" rel="noopener"}, [Netlify](https://www.netlify.com/){target="_blank" rel="noopener"}, [render](https://www.render.com/){target="_blank" rel="noopener"}...
### I'm currently a fan of:
:::FanList
::

::Sheetelevation
Expand All @@ -61,12 +60,16 @@ Senior frontend software engineer at <img loading="lazy" src="/images/content/js

![Image site 'Zégut PG'](/images/content/zégut-pg.webp){width="1024" height="620" loading="lazy"}

Zégut PG is a web application that allows me to create Spotify playlists from the podcast episodes of the {link} show presented by Francis Zégut & Marjorie Hache. It's also an excuse for me to play around with Vue.js and the Spotify API 🤓. I talk about it [here](https://www.linkedin.com/pulse/z%25C3%25A9gut-pg-cr%25C3%25A9ez-des-playlists-spotify-%25C3%25A0-partir-de-l%25C3%25A9mission-achard).
Zégut PG is a web application that allows me to create Spotify playlists from the podcast episodes of the RTL2 Pop-Rock Station show presented by Francis Zégut & Marjorie Hache. It's also an excuse for me to play around with Vue.js and the Spotify API 🤓. I talk about it [here](https://www.linkedin.com/pulse/z%25C3%25A9gut-pg-cr%25C3%25A9ez-des-playlists-spotify-%25C3%25A0-partir-de-l%25C3%25A9mission-achard).

#### Pascal is listening

[https://pascal-is-listening.onrender.com/](https://pascal-is-listening.onrender.com/){target="_blank" rel="noopener" loading="lazy"}

> <span class="mr-2">👉</span> <span class="font-rubik-medium font-medium text-primary">Please note</span>
>
> This application is a technical test. The Redis server may be in standby mode. You may have to wait a few seconds for the application to wake up.
![Image 'pascal is listening'](/images/content/pascal-is-listening.webp){width="1024" height="620" loading="lazy"}

Web application that displays the titles of the songs I'm listening to on Spotify.
Expand All @@ -75,18 +78,3 @@ Project built using Node.js and npm ecosystems, Github to store the code, Render

This project allowed me to put into practice Redis of which I only knew the theory. The Spotify API is very well done and particularly well documented. Nuxt.js allowed me to capitalize on my Vue.js knowledge and to quickly build a server-side rendered application. The Render platform is very useful and easy to use. It is very similar to Netlify but richer.
::

::Sheetelevation
### Favourite projects

> <span class="mr-2">ℹ️</span> <span class="font-rubik-medium font-medium text-primary">Info</span>
>
> The current online version of the antidiscriminations.fr website is no longer the one I am talking about here 😕.
[antidiscriminations.fr](https://www.antidiscriminations.fr/){target="_blank" rel="noopener"}

![Image 'antidiscriminations.fr'](/images/content/antidiscriminations.fr.webp){width="1024" height="620" loading="lazy"}

Acting against discrimination, a project like no other. I talk about it [here](https://www.linkedin.com/pulse/un-projet-pas-comme-les-autres-pascal-achard/){target="_blank" rel="
noopener"}.
::
5 changes: 4 additions & 1 deletion content/en/lab.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ description: Pascal Achard, senior frontend developer. Lab. I'm testing the Last

## Listening <Icon class='text-primary' name="brandico:lastfm"></Icon>

Some stats on the music I listen to.
> <span class="mr-2">💡</span> <span class="font-rubik-medium font-medium text-primary">Info</span>
>
> Here, I'm testing the Last.fm API to retrieve the latest tracks I've listened to.
> There's a [bug](https://www.last.fm/tag/duplicate+scrobbles+bug/shoutbox){target="_blank" rel="noopener"} going around at Last.fm. Some tracks are duplicated.

9 changes: 5 additions & 4 deletions content/fr/about.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,17 @@ description: Pascal Achard, développeur frontend senior. À propos de moi.

Responsive, mobile first.
Couleurs : déclinaison du thème [Nord](https://www.nordtheme.com/){target="_blank" rel="noopener"}
Typographie : [Rubik](https://fonts.google.com/specimen/Rubik){target="_blank" rel="noopener"}
Typographie : [Rubik](https://fonts.google.com/specimen/Rubik){target="_blank" rel="noopener"} pour les titres, [System UI](https://github.com/system-fonts/modern-font-stacks){target="_blank" rel="noopener"} pour le corps du texte.

## Le point technique

Type : [JAMstack](https://jamstack.org/){target="_blank" rel="noopener"}
Type : [Hybrid Rendering](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering){target="_blank" rel="noopener"}
Langage : [Typescript](https://www.typescriptlang.org/){target="_blank" rel="noopener"}
Framework js : [Nuxt.js](https://nuxtjs.org){target="_blank" rel="noopener"}
Framework js : [Nuxt.js](https://nuxtjs.org){target="_blank" rel="noopener"} {{ nuxtVersion }}
Framework css : [Tailwindcss](https://tailwindcss.com/){target="_blank" rel="noopener"}
Hébergement : [Netlify](https://www.netlify.com/){target="_blank" rel="noopener"}
CMS : [NuxtContent](https://content.nuxtjs.org/){target="_blank" rel="noopener"}. Contenu sous forme de fichiers `.md`.
CMS : [NuxtContent](https://content.nuxtjs.org/){target="_blank" rel="noopener"}. Contenu sous forme de fichiers `.md`.
APIs : [Notion API](https://developers.notion.com/){target="_blank" rel="noopener"} pour les données de la page "Readings", [Last.fm Music Discovery API](https://www.last.fm/api){target="_blank" rel="noopener"} pour les données de la page "Lab".

### La liste complète des dépendances

Expand Down
21 changes: 5 additions & 16 deletions content/fr/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,7 @@ Software engineer frontend sénior chez <img loading="lazy" src="/images/content

::Sheetelevation
### En ce moment, je suis fan de :

[Vue.js](https://vuejs.org/){target="_blank" rel="noopener"}, [Nuxt.js](https://nuxt.com/){target="_blank" rel="noopener"}, [Pinia](https://pinia.vuejs.org/){target="_blank" rel="noopener"}, [TypeScript](https://www.typescriptlang.org/){target="_blank" rel="noopener"}, [Craftcms](https://craftcms.com/){target="_blank" rel="noopener"}, [Twig](https://twig.symfony.com/){target="_blank" rel="noopener"}, [Tailwindcss](https://tailwindcss.com/){target="_blank" rel="noopener"}, [Docker](https://www.docker.com/){target="_blank" rel="noopener"}, [Node.js](https://nodejs.org/){target="_blank" rel="noopener"}, [Webpack](https://webpack.js.org/){target="_blank" rel="noopener"}, [Vite](https://vitejs.dev/){target="_blank" rel="noopener"}, [Prettier](https://prettier.io/){target="_blank" rel="noopener"}, [Notion](https://www.notion.so){target="_blank" rel="noopener"}, [Netlify](https://www.netlify.com/){target="_blank" rel="noopener"}, [render](https://www.render.com/){target="_blank" rel="noopener"}...
:::FanList
::

::Sheetelevation
Expand All @@ -72,6 +71,10 @@ Zégut PG est une application web qui me permet de créer des playlists Spotify

[https://pascal-is-listening.onrender.com/](https://pascal-is-listening.onrender.com/){target="_blank" rel="noopener"}

> <span class="mr-2">👉</span> <span class="font-rubik-medium font-medium text-primary">À noter</span>
>
> Cette application est un test technique. Le serveur Redis peut être en veille. Il faut parfois attendre quelques secondes pour que l'application se réveille.
![Image site 'pascal is listening'](/images/content/pascal-is-listening.webp){width="1024" height="620" loading="lazy"}

Application web qui affiche les titres des chansons que je suis en train d'écouter sur Spotify.
Expand All @@ -87,18 +90,4 @@ rapidement une application rendue côté serveur. La plateforme Render est très
beaucoup à Netlify en plus riche.
::

::Sheetelevation
### Projets coup de cœur

> <span class="mr-2">ℹ️</span> <span class="font-rubik-medium font-medium text-primary">Info</span>
>
> La version actuellement en ligne du site antidiscriminations.fr n'est plus celle dont je parle ici 😕.
[antidiscriminations.fr](https://www.antidiscriminations.fr/){target="_blank" rel="noopener"}

![Image site 'antidiscriminations.fr'](/images/content/antidiscriminations.fr.webp){width="1024" height="620" loading="lazy"}

Agir contre les discriminations, un projet pas comme les autres. J'en
parle [ici](https://www.linkedin.com/pulse/un-projet-pas-comme-les-autres-pascal-achard/){target="_blank" rel="
noopener"}.
::
5 changes: 4 additions & 1 deletion content/fr/lab.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@ description: Pascal Achard, développeur frontend senior. Lab. Je teste l'api de

## Listening <Icon title='Last.fm' class='text-primary' name="brandico:lastfm"></Icon>

Quelques stats sur la musique que j'écoute.
> <span class="mr-2">💡</span> <span class="font-rubik-medium font-medium text-primary">Info</span>
>
> Ici, je teste l'API de Last.fm pour récupérer les derniers morceaux que j'ai écoutés.
> Il y a un [bug](https://www.last.fm/tag/duplicate+scrobbles+bug/shoutbox){target="_blank" rel="noopener"} en cours chez Last.fm. Certains titres sont dupliqués.
52 changes: 52 additions & 0 deletions data/fanItems.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import type { IFanItem } from '~/types/types';

export const fanItems: IFanItem[] = [
{
label: 'Vue.js',
url: 'https://vuejs.org/',
},
{
label: 'Nuxt.js',
url: 'https://nuxt.com/',
},
{
label: 'Pinia',
url: 'https://pinia.vuejs.org/',
},
{
label: 'TypeScript',
url: 'https://www.typescriptlang.org/',
},
{
label: 'GSAP',
url: 'https://gsap.com/',
},
{
label: 'Tailwind CSS',
url: 'https://tailwindcss.com/',
},
{
label: 'CraftCMS',
url: 'https://craftcms.com/',
},
{
label: 'Twig',
url: 'https://twig.symfony.com/',
},
{
label: 'Docker',
url: 'https://www.docker.com/',
},
{
label: 'Node.js',
url: 'https://nodejs.org/',
},
{
label: 'Vite',
url: 'https://vitejs.dev/',
},
{
label: 'Notion',
url: 'https://www.notion.so/',
},
];
15 changes: 1 addition & 14 deletions pages/about.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const { data } = await useAsyncData(`about-${currentLocale.value}`, () =>
.then((data) => {
data.pkg = pkg;
data.subtitle = pkg.description;
data.nuxtVersion = pkg.devDependencies.nuxt;
return data;
}));
Expand Down Expand Up @@ -86,20 +87,6 @@ if (process.client) {
<template>
<main>
<NuxtLayout v-if="data" name="content">
<template #heroBackground>
<!-- <img
sizes="(max-width: 2170px) 100vw, 2170px"
srcset="
@/assets/images/infos/hero_rsbr7p_c_scale_w_768.jpg 768w,
@/assets/images/infos/hero_rsbr7p_c_scale_w_1773.jpg 1773w,
@/assets/images/infos/hero_rsbr7p_c_scale_w_2170.jpg 2170w
"
src="@/assets/images/infos/hero_rsbr7p_c_scale_w_2170.jpg"
width="2170"
height="1074"
alt=""
> -->
</template>
<template #heroContent>
<h1 class="dark:text-white">
{{ data.coverTitle }}
Expand Down
11 changes: 2 additions & 9 deletions pages/lab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,6 @@ function scrollListToTop() {
<template>
<main>
<NuxtLayout name="content">
<!-- <template #heroBackground>
<img
src="~/assets/images/lab/hero-bg.jpg"
width="2170"
height="1074"
alt=""
>
</template> -->
<template #heroContent>
<p class="h3">
🧪
Expand Down Expand Up @@ -152,8 +144,9 @@ function scrollListToTop() {
<ul
v-else-if="trackList?.length"
ref="playlistListRef"
class="-ml-4 mt-2 grid max-h-[50vh] gap-6 overflow-y-auto pl-4"
class="-ml-4 mt-6 grid max-h-[50vh] gap-6 overflow-y-auto pl-4 transition-opacity duration-300 ease-in-out xl:grid-cols-2"
data-lenis-prevent
:class="{ 'opacity-20': pending }"
>
<ScrobbleListItem v-for="track in trackList" :key="track.id" :track="track" tag="li" title-tag="p" />
</ul>
Expand Down
6 changes: 6 additions & 0 deletions types/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ export interface ISocialLink {
}
}

// Fan items
export interface IFanItem {
label: string
url: string
}

/**
* Readings
*/
Expand Down

0 comments on commit c0b60a7

Please sign in to comment.