Merge pull request #3 from brylie/backstage-and-other-content

Enhance website with new pages and improved content

Author: brylie

package-lock.json

@@ -9,14 +9,14 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.4",
-    "@astrojs/rss": "^4.0.12",
-    "@astrojs/sitemap": "^3.5.1",
+    "@astrojs/mdx": "^4.3.13",
+    "@astrojs/rss": "^4.0.14",
+    "@astrojs/sitemap": "^3.6.0",
     "@fontsource/atkinson-hyperlegible": "^5.2.7",
     "@iconify-json/material-symbols": "^1.2.34",
     "@iconify-json/mdi": "^1.2.3",
     "@tailwindcss/vite": "^4.1.13",
-    "astro": "^5.13.5",
+    "astro": "^5.16.6",
     "astro-icon": "^1.1.5",
     "markdown-it": "^14.1.0",
     "sanitize-html": "^2.17.0",

package.json

@@ -5,34 +5,65 @@ const today = new Date();
 
 <footer class="py-8 px-4 bg-gray-900 border-t border-gray-800 text-center">
   <div class="flex justify-center items-center space-x-4">
+    <a
+      href="https://freemusicarchive.org/music/Brylie_Christopher_Oxley/"
+      target="_blank" rel="noopener noreferrer"
+      class="text-gray-400 hover:text-blue-400 transition-colors p-2"
+      title="Free Music Archive"
+    >
+      <span class="sr-only">Download from Free Music Archive</span>
+      <Icon name="mdi:music-circle" size={28} />
+    </a>
     <a
       href="https://brylie.bandcamp.com"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       class="text-gray-400 hover:text-blue-400 transition-colors p-2"
+      title="Bandcamp"
     >
       <span class="sr-only">Listen on Bandcamp</span>
       <Icon name="mdi:bandcamp" size={28} />
     </a>
+    <a
+      href="https://open.spotify.com/artist/5QEaapYiiiIH65gfhBgsv7"
+      target="_blank" rel="noopener noreferrer"
+      class="text-gray-400 hover:text-blue-400 transition-colors p-2"
+      title="Spotify"
+    >
+      <span class="sr-only">Listen on Spotify</span>
+      <Icon name="mdi:spotify" size={28} />
+    </a>
+    <a
+      href="https://music.apple.com/fi/artist/brylie-christopher/1841347105"
+      target="_blank" rel="noopener noreferrer"
+      class="text-gray-400 hover:text-blue-400 transition-colors p-2"
+      title="Apple Music"
+    >
+      <span class="sr-only">Listen on Apple Music</span>
+      <Icon name="mdi:apple" size={28} />
+    </a>
     <a
       href="https://www.instagram.com/brylie.music"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       class="text-gray-400 hover:text-blue-400 transition-colors p-2"
+      title="Instagram"
     >
       <span class="sr-only">Follow on Instagram</span>
       <Icon name="mdi:instagram" size={28} />
     </a>
     <a
       href="https://soundcloud.com/brylie"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       class="text-gray-400 hover:text-blue-400 transition-colors p-2"
+      title="SoundCloud"
     >
       <span class="sr-only">Listen on SoundCloud</span>
       <Icon name="mdi:soundcloud" size={28} />
     </a>
     <a
       href="https://youtube.com/@brylie_music"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       class="text-gray-400 hover:text-blue-400 transition-colors p-2"
+      title="YouTube"
     >
       <span class="sr-only">Watch on YouTube</span>
       <Icon name="mdi:youtube" size={28} />

src/components/Footer.astro

@@ -19,6 +19,8 @@ import { Icon } from "astro-icon/components";
     <HeaderLink href="/">Home</HeaderLink>
     <!-- <HeaderLink href="/blog">Blog</HeaderLink> -->
     <HeaderLink href="/about">About</HeaderLink>
+    <HeaderLink href="/performances">Performances</HeaderLink>
+    <HeaderLink href="/licensing">Licensing</HeaderLink>
   </div>
 
   <!-- Mobile Menu Button -->
@@ -33,18 +35,45 @@ import { Icon } from "astro-icon/components";
 
   <!-- Social Links -->
   <div class="hidden md:flex items-center space-x-3">
+    <a
+      href="https://freemusicarchive.org/music/Brylie_Christopher_Oxley/"
+      target="_blank" rel="noopener noreferrer"
+      title="Free Music Archive"
+      class="text-gray-400 hover:text-blue-400 transition-colors p-1"
+    >
+      <span class="sr-only">Download from Free Music Archive</span>
+      <Icon name="mdi:music-circle" size={24} />
+    </a>
     <a
       href="https://brylie.bandcamp.com"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       title="Bandcamp"
       class="text-gray-400 hover:text-blue-400 transition-colors p-1"
     >
       <span class="sr-only">Listen on Bandcamp</span>
       <Icon name="mdi:bandcamp" size={24} />
     </a>
+    <a
+      href="https://open.spotify.com/artist/5QEaapYiiiIH65gfhBgsv7"
+      target="_blank" rel="noopener noreferrer"
+      title="Spotify"
+      class="text-gray-400 hover:text-blue-400 transition-colors p-1"
+    >
+      <span class="sr-only">Listen on Spotify</span>
+      <Icon name="mdi:spotify" size={24} />
+    </a>
+    <a
+      href="https://music.apple.com/fi/artist/brylie-christopher/1841347105"
+      target="_blank" rel="noopener noreferrer"
+      title="Apple Music"
+      class="text-gray-400 hover:text-blue-400 transition-colors p-1"
+    >
+      <span class="sr-only">Listen on Apple Music</span>
+      <Icon name="mdi:apple" size={24} />
+    </a>
     <a
       href="https://www.instagram.com/brylie.music"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       title="Instagram"
       class="text-gray-400 hover:text-blue-400 transition-colors p-1"
     >
@@ -53,7 +82,7 @@ import { Icon } from "astro-icon/components";
     </a>
     <a
       href="https://soundcloud.com/brylie"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       title="SoundCloud"
       class="text-gray-400 hover:text-blue-400 transition-colors p-1"
     >
@@ -62,7 +91,7 @@ import { Icon } from "astro-icon/components";
     </a>
     <a
       href="https://youtube.com/@brylie_music"
-      target="_blank"
+      target="_blank" rel="noopener noreferrer"
       title="YouTube"
       class="text-gray-400 hover:text-blue-400 transition-colors p-1"
     >
@@ -81,22 +110,53 @@ import { Icon } from "astro-icon/components";
     <HeaderLink href="/" class="block w-full">Home</HeaderLink>
     <!-- <HeaderLink href="/blog" class="block w-full">Blog</HeaderLink> -->
     <HeaderLink href="/about" class="block w-full">About</HeaderLink>
+    <HeaderLink href="/performances" class="block w-full"
+      >Performances</HeaderLink
+    >
+    <HeaderLink href="/licensing" class="block w-full">Licensing</HeaderLink>
 
     <div
       class="flex items-center justify-center space-x-4 pt-4 border-t border-gray-700"
     >
+      <a
+        href="https://freemusicarchive.org/music/Brylie_Christopher_Oxley/"
+        target="_blank" rel="noopener noreferrer"
+        title="Free Music Archive"
+        class="text-gray-400 hover:text-blue-400 transition-colors p-1"
+      >
+        <span class="sr-only">Download from Free Music Archive</span>
+        <Icon name="mdi:music-circle" size={24} />
+      </a>
       <a
         href="https://brylie.bandcamp.com"
-        target="_blank"
+        target="_blank" rel="noopener noreferrer"
         title="Bandcamp"
         class="text-gray-400 hover:text-blue-400 transition-colors p-1"
       >
         <span class="sr-only">Listen on Bandcamp</span>
         <Icon name="mdi:bandcamp" size={24} />
       </a>
+      <a
+        href="https://open.spotify.com/artist/5QEaapYiiiIH65gfhBgsv7"
+        target="_blank" rel="noopener noreferrer"
+        title="Spotify"
+        class="text-gray-400 hover:text-blue-400 transition-colors p-1"
+      >
+        <span class="sr-only">Listen on Spotify</span>
+        <Icon name="mdi:spotify" size={24} />
+      </a>
+      <a
+        href="https://music.apple.com/fi/artist/brylie-christopher/1841347105"
+        target="_blank" rel="noopener noreferrer"
+        title="Apple Music"
+        class="text-gray-400 hover:text-blue-400 transition-colors p-1"
+      >
+        <span class="sr-only">Listen on Apple Music</span>
+        <Icon name="mdi:apple" size={24} />
+      </a>
       <a
         href="https://www.instagram.com/brylie.music"
-        target="_blank"
+        target="_blank" rel="noopener noreferrer"
         title="Instagram"
         class="text-gray-400 hover:text-blue-400 transition-colors p-1"
       >
@@ -105,7 +165,7 @@ import { Icon } from "astro-icon/components";
       </a>
       <a
         href="https://soundcloud.com/brylie"
-        target="_blank"
+        target="_blank" rel="noopener noreferrer"
         title="SoundCloud"
         class="text-gray-400 hover:text-blue-400 transition-colors p-1"
       >
@@ -114,7 +174,7 @@ import { Icon } from "astro-icon/components";
       </a>
       <a
         href="https://youtube.com/@brylie_music"
-        target="_blank"
+        target="_blank" rel="noopener noreferrer"
         title="YouTube"
         class="text-gray-400 hover:text-blue-400 transition-colors p-1"
       >

src/components/NavigationMenu.astro

@@ -2,21 +2,119 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="About Me" description="Learn more about me and what I do">
+<Layout
+  title="About"
+  description="Finland-based musician creating piano improvisation and ambience for healing"
+>
   <div class="max-w-4xl mx-auto px-4 py-12">
     <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden">
       <div class="p-6 sm:p-8 lg:p-12">
         <h1 class="text-4xl font-bold text-white text-center mb-8">
-          About Brylie Christopher
+          Brylie Christopher
         </h1>
 
-        <div class="prose prose-lg prose-invert max-w-none space-y-6">
+        <p class="text-xl text-gray-300 text-center mb-12 italic">
+          Finland-based musician creating piano improvisation and ambience for
+          healing.
+        </p>
+
+        <div class="prose prose-lg prose-invert max-w-none">
           <p>
-            Brylie Christopher is a musician focused on solo-piano and ambient
-            music. He has released several albums and EPs, and his music has
-            been featured in various media. Brylie is passionate about creating
-            immersive soundscapes that evoke deep emotions.
+            I create music as a tool for healing and community connection.
+            Drawing inspiration from impressionistic composers and modern
+            ambient artists like Elija Fox, Nils Frahm, and Max Richter, I blend
+            acoustic piano with electronic textures to create immersive,
+            contemplative soundscapes.
           </p>
+
+          <section>
+            <h2 class="text-2xl font-bold text-white mb-4">My Sound</h2>
+            <p>My music combines:</p>
+            <ul class="list-disc pl-6 space-y-2">
+              <li>Piano-centric compositions and minimal improvisations</li>
+              <li>Ambient electronic textures and atmospheres</li>
+              <li>Blending of acoustic and electronic timbres</li>
+              <li>Modulating effects creating organic, evolving soundscapes</li>
+            </ul>
+            <p class="mt-4">
+              I work primarily in Bitwig for sound design and modulation, and
+              Logic for piano recording and final production. Each piano piece
+              begins as improvisation, then gets refined for a listener-friendly
+              experience. My Bitwig compositions utilize generative techniques
+              to keep the soundscapes fresh and evolving.
+            </p>
+          </section>
+
+          <section>
+            <h2 class="text-2xl font-bold text-white mb-4">
+              Creative Commons & Open Culture
+            </h2>
+            <p>
+              All my music is released under Creative Commons licensing, making
+              it freely available for:
+            </p>
+            <ul class="list-disc pl-6 space-y-2">
+              <li>Podcasts and radio shows</li>
+              <li>Video content and documentaries</li>
+              <li>Video games and interactive media</li>
+              <li>Personal and commercial projects</li>
+            </ul>
+            <p class="mt-4">
+              This approach aligns with my belief that music should be
+              accessible to everyone and that supporting independent creators
+              strengthens our creative communities.
+            </p>
+          </section>
+
+          <section>
+            <h2 class="text-2xl font-bold text-white mb-4">Musical Journey</h2>
+            <p>
+              My creative output spans a wide spectrum of electronic and
+              instrumental music, marked by atmospheric pieces that weave
+              together diverse instruments, timbres, and textures. My work has
+              been featured in podcasts including The Global Justice Now Podcast
+              (9 episodes), Heritage Radio Network, as well as in independent
+              video games and documentary films.
+            </p>
+            <p>
+              I've released several albums exploring themes of contemplation,
+              healing, and transformation, with recent work focusing
+              increasingly on solo piano and ambient compositions.
+            </p>
+          </section>
+
+          <section>
+            <h2 class="text-2xl font-bold text-white mb-4">
+              Community & Performance
+            </h2>
+            <p>
+              Music serves as more than artistic expression. It's also a tool
+              for healing and connection. I regularly volunteer as a pianist at
+              community spaces, where I accompany singing groups and provide
+              ambient improvisation during community gatherings.
+            </p>
+            <p>
+              These performances reflect my belief that music can create spaces
+              for reflection, connection, and wellbeing.
+            </p>
+          </section>
+
+          <section>
+            <h2 class="text-2xl font-bold text-white mb-4">
+              Contact & Licensing
+            </h2>
+            <p>
+              Interested in using my music or booking a performance? <a
+                href="https://freemusicarchive.org/music/Brylie_Christopher_Oxley/contact"
+                class="text-blue-400 hover:text-blue-300 underline"
+                >Contact me</a
+              >
+            </p>
+            <p>
+              All licensing inquiries are welcome. My music is free to use under
+              Creative Commons with simple attribution.
+            </p>
+          </section>
         </div>
       </div>
     </div>