From aeda97325acf195aa9f63f856e02f55f062658d5 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Wed, 11 Sep 2024 20:03:12 +0200
Subject: [PATCH] about v1

---
 package.json          |   2 +-
 pages/about.vue       | 135 ++++++++++++++++++++++++++++++++++++++++++
 pages/index.vue       |  35 +++++++----
 public/youtube.svg    |  57 ++++++++++++++++++
 server/api/artists.ts |  22 +++----
 5 files changed, 227 insertions(+), 24 deletions(-)
 create mode 100644 pages/about.vue
 create mode 100644 public/youtube.svg

diff --git a/package.json b/package.json
index 2e3148a..48db45f 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000..0a384f7
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="bg-black text-white p-12 text-lg flex flex-col items-center">
+    <a href="/" class="mb-12">
+        <img class="logo" src="/logo.svg">
+      </a>
+    <div class="max-w-4xl">
+      <h1 class="text-esyellow text-6xl mb-8">About evilSpins ...</h1>
+      <pre>
+      "The idea of the name comes from Anton Newcombe, who defines music as something that must remain independent,
+      hence his quote "keep music evil", from which 'evil' and 'spins' refer to music as an object that turns (cassette,
+      vinyl, CD...), music is a living object in perpetual motion and it's 'evil' / independent / unmanageable because
+      it makes you dance, it takes the listener without even realizing it.
+    </pre>
+      <img src="https://files.erudi.fr/evilspins/ABOUT-1.jpg">
+      <pre>
+      Each compilation is the original soundtrack of a non-existent film. It must leave room for imagination and
+      reflection.
+      A compilation tries to produce the effect of a film, to provoke imagination.
+      It's an opportunity to decontextualize forgotten, outdated, or unconsciously caricatured musical genres
+      (bluegrass,
+      punk, folk, hip-hop...) or simply to discover new genres.
+      Approach music without thinking about the stylistic references of the piece, like in a film.
+    </pre>
+      <img src="https://files.erudi.fr/evilspins/ABOUT-2.jpg">
+      <pre>
+      A compilation can therefore offer several readings,
+      - a panel of characters,
+      - several versions (short, long like a director's cut, side A/B (side B could be a parallel version with the same
+      artists in the same order but with different titles very close))
+      - several possible reading modes (mode 1: only the mixed sound and artworks (only play/pause is available),
+      mode 2: portraits and names of the protagonists, anecdotes, quotes, and web links (possibility to go to the
+      next/previous track and to 'seek'))
+      - an artwork (square format (vinyl) or 16/9 + black band (cinema)) - vocal samples to make characters speak?
+      (samples of artists in interviews, for example)
+      - a mix must follow this order:
+      DISCLAIMER :
+      : list of quintessence sound :
+      5.2. accessible but instrumental
+      6.4. more researched and instrumental
+      7.6. more rhythmic instrumental
+      8. rhythmic sung
+      9. rhythmic instrumental
+      10.10. Instrumental
+      11.12. bluegrass final Evils spins from the idea that music needs the imagination of its listener.
+    </pre>
+      <img src="https://files.erudi.fr/evilspins/ABOUT-3.jpg">
+      <pre>
+      Design: timeline of the player like the itinerary of a journey on a map OR like a display board at a train
+      station/airport "A problem created cannot be solved by thinking in the same way it was created." "God only depends
+      on the imagination of men" Drawing situations where you meet someone you think you know well but who doesn't have
+      the same vision of things as you. Example: discussion about music and completely divergent points of view, (Nick
+      Waterhouse = completely inaccessible jazz) Going to see local labels inventing a religion and therefore a god, is
+      only a way to personify one's conscience. The projects converge on the concept of a "cyber residence of artists"
+      drawing a face to one's morality. Dreams are nightmares, nightmares are dreams. Starting from reflections on the
+      use
+      of new technologies; questioning one's use of the internet on one's computer, phone, etc., allows one to wonder
+      what? when? why do I need the internet, to watch a movie, to listen to music... In my case, the answers to these
+      questions propose a use that mixes tools and methods from different eras. TOOLS & METHODS FROM DIFFERENT
+      ERAS/CONTEXTS Just like in the film 'La fille du 14 juillet', it can be very interesting to play on the contrasts
+      between different eras by mixing them in the same visual and sound realization. Idea of realization graphic novel
+      or
+      comic book: Observation: with the revolution of the internet and new technologies, cinema has become a major art
+      that everyone masters more or less. The public's gaze is sharpened and everyone knows how to apprehend
+      cinematographic realization. The plans, camera movements, sound effects are a language that everyone knows how to
+      read (cinema is carried by all through downloading & streaming) ... and even write (I can make a film with my
+      phone,
+      reflex cameras have become affordable). How to draw cinema? Try to take key scenes from cinema, draw/paint them
+      and
+      animate them. fixed plan? traveling? zoom? panoramic? plunge? counter-plunge? wide-angle? long focal? work on the
+      Wikipedia of 'film noir' re-watch film noir link with the polar noir? film noir has a pretentious approach at
+      first
+      glance. so we need to find a technique (visual? sound?) to disarm this bad image. to do this we need to start by
+      isolating and understanding the possible pretentious aspect of film noir.
+    </pre>
+      <img src="https://files.erudi.fr/evilspins/ABOUT-4.jpg">
+      <pre>
+      The solitude of the character? The
+      voice-overs that narrate the thoughts? The appearance of the protagonist? The cliché (visual & script) of the
+      polar
+      noir too worn out? (the detective alone in his thoughts, in his apartment smoking a cigarette on the balcony) the
+      cigarette can still be a more powerful visual element than a cliché transition with animation of the cigarette?
+      cigarette = huge filmographic symbol == we find it in most films especially in the era of film noir == commercial
+      influence tool == influence of American culture (cowboy), == symbol of the ephemeral, like life, like the
+      characters
+      of a film, like a film. the 2 mega clichés: Nicholson/Polansky in Chinatown & Ridley Scott in Blade Runner How to
+      integrate the cigarette? = 3D animation? (often ugly, technically very difficult, aesthetically difficult) =
+      hand-drawn animation? (long... very long to do but good pretext to train) = vector-drawn animation? (technically
+      moderately difficult but aesthetically difficult) = film excerpts? (technically easy & aesthetically very easy BUT
+      not really creation (montage), and illegal... to check) = animation of the spin (film zoom in Cassette, CD, Vinyl,
+      the plates of a hard drive (joke -> why not make a montage effect), find an equivalent for digital (server bays,
+      server fan? (joke))) why not call the box to meet at Slift to turn it properly and start a collaboration?
+      otherwise,
+      a lot of material to Bellecours photo + ... Fnac? no, much more interesting to go through a collaboration. Take
+      out
+      the rushes of films.
+    </pre>
+      <img src="https://files.erudi.fr/evilspins/ABOUT-5.jpg">
+      <pre>
+
+      The thinking of Jack Nicholson in Chinatown No visual drawing during the reading of the piece,
+      only why not the log / cover / artwork of the album the reading should not look like a PowerPoint, the
+      counter-example is everywhere on YouTube. On the other hand, a drawn and animated artwork in parallax why not. See
+      3D js cover -> at the mouse movement: preview with animation -> At the click fade of the box zoom on the cover the
+      animation is no longer manual but automatic (linear movement? random?) after the cigarette... the smoke... too
+      cliché? possible but the smoke can make a transition between 2 listens / animations. the listening ends the smoke
+      arrives brings us to the cigarette which brings us to a protagonist who brings us to a film excerpt. why
+      evilspins?
+      The spin obviously refers to the movement of music both by its format (cassette, vinyl, CD) and by its effect
+      (membrane, air movement, dance) possible sound effect: end of the piece Purple Mercy - Purple -> the end of the
+      piece ends with an abrupt snare with a subtle reverb -> effect felt: conclusion on an impression of grand space ->
+      effect analyzed / symbolic: grandeur of the proposal but above all empty room -> no public -> therefore call to
+      the
+      public -> idea expressible: maybe too pretentious again. film noir has a pretentious image at first glance. we
+      need
+      to find a technique (visual? sound?) to disarm this bad image. to do this we need to start by isolating and
+      understanding the possible pretentious aspect of film noir. The solitude of the character? The voice-overs that
+      narrate the thoughts? The appearance of the protagonist? The cliché (visual & script) of the polar noir too worn
+      out? (the detective alone in his thoughts, in his apartment smoking a cigarette on the balcony)"
+    </pre>
+      <img src="https://files.erudi.fr/evilspins/ABOUT-6.jpg">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+img {
+  margin: 32px 0;
+}
+
+pre {
+  white-space: pre-line;
+  font-family: sans-serif;
+  @apply text-xl;
+}
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 1707982..dc9b8b8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="bg-black">
-    <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer">
+  <div>
+    <div class="w-full flex justify-center">
+      <nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50 bg-black">
+        <a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
+          <img src="/youtube.svg" alt="ho no" />
+        </a>
+        <a href="mailto:contact@evilspins.com">📬</a>
+        <a href="/about">❓</a>
+      </nav>
+    </div>
+    <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer()">
       <figure class="ui">
-        <!-- <ul>
-            <li>
-              <a href="mailto:contact@evilspins.com">contact</a>
-              <a href="/newsletter">newsletter</a>
-              <a href="/infos">?</a>
-            </li>
-          </ul> -->
         <img class="logo" src="/logo.svg">
         <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
           ↓
@@ -41,9 +43,18 @@
           <h4 class="text-xl text-slate-200">
             {{ currentCompilationName }}
           </h4>
-          <a :href="currentLink" class="block mt-10">
-            {{ currentLink }}
-          </a>
+
+          <p class="block mt-10">
+            see artist page:<br>
+            <a target="_blank" class="underline text-slate-400" :href="currentLink">
+              {{ currentArtist.url }}
+            </a><br>
+            purchace the track:<br>
+            <a target="_blank" class="underline text-slate-400" :href="currentLink">
+              {{ currentLink }}
+            </a><br>
+            <br>
+          </p>
         </article>
         <section class=" bg-black">
           <zero-a @click="play('ES00A')" class="w-40">
diff --git a/public/youtube.svg b/public/youtube.svg
new file mode 100644
index 0000000..ed0ab98
--- /dev/null
+++ b/public/youtube.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="youtube.svg"
+   width="25.177818"
+   height="17.624441"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="13.548512"
+     inkscape:cx="13.322496"
+     inkscape:cy="8.6725392"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <g
+     id="Page-1"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd"
+     style="fill:#ff0000"
+     transform="matrix(1.2588908,0,0,1.2588908,3.6299617e-6,-3.1302942e-5)">
+    <g
+       id="Dribbble-Light-Preview"
+       transform="translate(-300,-7442)"
+       fill="#000000"
+       style="fill:#ff0000">
+      <g
+         id="icons"
+         transform="translate(56,160)"
+         style="fill:#ff0000">
+        <path
+           d="m 251.98843,7291.5859 v -5.6117 c 1.99221,0.9375 3.53517,1.843 5.36003,2.8193 -1.50511,0.8347 -3.36782,1.7712 -5.36003,2.7924 m 11.10257,-8.403 c -0.34366,-0.4528 -0.92937,-0.8048 -1.55293,-0.9215 -1.83283,-0.348 -13.2671,-0.349 -15.09893,0 -0.50004,0.094 -0.9453,0.3201 -1.32781,0.6722 -1.61169,1.4959 -1.10667,9.5179 -0.71819,10.8174 0.16336,0.5624 0.37454,0.9683 0.6405,1.2346 0.34266,0.352 0.81182,0.5943 1.35071,0.703 1.5091,0.3122 9.28369,0.4867 15.12185,0.047 0.53789,-0.094 1.01403,-0.344 1.38956,-0.711 1.49017,-1.49 1.38857,-9.9628 0.19524,-11.8416"
+           id="youtube-[#168]"
+           style="fill:#ff0000" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/server/api/artists.ts b/server/api/artists.ts
index ed1d70b..fa4b158 100644
--- a/server/api/artists.ts
+++ b/server/api/artists.ts
@@ -3,67 +3,67 @@ export default eventHandler(() => {
     {
       id: 0,
       name: "L'efondras",
-      link: "https://leffondras.bandcamp.com/music",
+      url: "https://leffondras.bandcamp.com/music",
       style: [0, 1, 2]
     },
     {
       id: 1,
       name: "The kundalini genie",
-      link: "https://the-kundalini-genie.bandcamp.com",
+      url: "https://the-kundalini-genie.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 2,
       name: "Fontaines D.C.",
-      link: "https://fontainesdc.bandcamp.com",
+      url: "https://fontainesdc.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 3,
       name: "Fontanarosa",
-      link: "https://fontanarosa.bandcamp.com",
+      url: "https://fontanarosa.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 4,
       name: "Johnny mafia",
-      link: "https://johnnymafia.bandcamp.com",
+      url: "https://johnnymafia.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 5,
       name: "New candys",
-      link: "https://newcandys.bandcamp.com",
+      url: "https://newcandys.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 6,
       name: "Les jaguars",
-      link: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
+      url: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
       style: [0, 1, 2]
     },
     {
       id: 7,
       name: "Magic shoppe",
-      link: "https://magicshoppe.bandcamp.com",
+      url: "https://magicshoppe.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 8,
       name: "TRAAMS",
-      link: "https://traams.bandcamp.com",
+      url: "https://traams.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 9,
       name: "Blue orchid",
-      link: "https://blue-orchid.bandcamp.com",
+      url: "https://blue-orchid.bandcamp.com",
       style: [0, 1, 2]
     },
     {
       id: 10,
       name: "I love UFO",
-      link: "https://bruitblanc.bandcamp.com",
+      url: "https://bruitblanc.bandcamp.com",
       style: [0, 1, 2]
     }
   ]