Add music section (#7)

diff --git a/src/components/AlbumCard.jsx b/src/components/AlbumCard.jsx
new file mode 100644 (file)
index 0000000..13a1b32
--- /dev/null
+++ b/src/components/AlbumCard.jsx
@@ -0,0 +1,20 @@
+const React = require('react');
+
+module.exports = ({ song, artist, album, link }) => {
+  return (
+    <a className="AlbumCard" href={link}>
+      <div
+        className="AlbumCard-Art"
+        style={{
+          backgroundImage: `url('./images/${album.replace(/\s/g, '-')}.jpg')`,
+        }}
+      />
+      <div className="AlbumCard-Details">
+        <span className="AlbumCard-SongName">{song}</span>
+        <span className="AlbumCard-ArtistAndAlbum">
+          {artist} - {album}
+        </span>
+      </div>
+    </a>
+  );
+};

diff --git a/src/components/HorizontalScroller.jsx b/src/components/HorizontalScroller.jsx
new file mode 100644 (file)
index 0000000..6bcf0eb
--- /dev/null
+++ b/src/components/HorizontalScroller.jsx
@@ -0,0 +1,13 @@
+const React = require('react');
+
+module.exports = (props) => {
+  return (
+    <div className="HorizontalScroller">
+      <ul>
+        {props.children.map((item, i) => (
+          <li key={i}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};

diff --git a/src/components/MusicalInterests.jsx b/src/components/MusicalInterests.jsx
new file mode 100644 (file)
index 0000000..a37979b
--- /dev/null
+++ b/src/components/MusicalInterests.jsx
@@ -0,0 +1,38 @@
+const React = require('react');
+
+const HorizontalScroller = require('./HorizontalScroller');
+const AlbumCard = require('./AlbumCard');
+
+module.exports = (props) => {
+  return (
+    <div className="MusicalInterests">
+      <h2>Music I like</h2>
+      <HorizontalScroller>
+        <AlbumCard
+          song="Gepetto / Pinokkio"
+          artist="Trio Dhoore"
+          album="Momentum"
+          link="https://triodhoore.com/momentum"
+        />
+        <AlbumCard
+          song="The Offbeat Jig / Keep Dreaming"
+          artist="Trio Dhoore"
+          album="Parachute"
+          link="https://triodhoore.com/parachute"
+        />
+        <AlbumCard
+          song="Impossible"
+          artist="Two Steps From Hell"
+          album="Unleashed"
+          link="https://music.apple.com/us/album/unleashed/1287310003"
+        />
+        <AlbumCard
+          song="NOW That's What I Call Polka!"
+          artist={'"Weird Al" Yankovic'}
+          album="Mandatory Fun"
+          link="https://www.weirdal.com/catalog/mandatory-fun/"
+        />
+      </HorizontalScroller>
+    </div>
+  );
+};

diff --git a/src/components/albumCard.css b/src/components/albumCard.css
new file mode 100644 (file)
index 0000000..a5d7779
--- /dev/null
+++ b/src/components/albumCard.css
@@ -0,0 +1,31 @@
+.AlbumCard {
+  display: block;
+  color: inherit;
+  background-color: #eee;
+  box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.2);
+  border-radius: 0.5em;
+  width: 15em;
+  margin-right: 2em;
+}
+
+.AlbumCard-Art {
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 15em;
+  border-radius: 0.5em 0.5em 0 0;
+}
+
+.AlbumCard-Details {
+  font-size: 0.8em;
+  padding: 0.6em 0;
+}
+
+.AlbumCard-SongName {
+  display: block;
+  padding-bottom: 0.2em;
+}
+
+.AlbumCard-ArtistAndAlbum {
+  font-weight: 400;
+}

diff --git a/src/components/hero.css b/src/components/hero.css
index d8b3cd2588e2c6b3dd7be543467aace926a9749b..297286e9d8c2ff843f82d78505386ca97fe4e519 100644 (file)
--- a/src/components/hero.css
+++ b/src/components/hero.css
@@ -13,6 +13,7 @@ header {
 header h1 {
   font-size: var(--Hero-headerSize);
   padding-bottom: 1em;
+  font-weight: 900;
 }
 
 header p {
@@ -30,7 +31,7 @@ header p {
     padding: 2em;
   }
 
-  h1 {
+  header h1 {
     width: 0;
   }
 }

diff --git a/src/components/horizontalScroller.css b/src/components/horizontalScroller.css
new file mode 100644 (file)
index 0000000..513b2e8
--- /dev/null
+++ b/src/components/horizontalScroller.css
@@ -0,0 +1,13 @@
+.HorizontalScroller {
+  width: 100%;
+}
+
+.HorizontalScroller ul {
+  list-style-type: none;
+  white-space: nowrap;
+  overflow-x: scroll;
+}
+
+.HorizontalScroller li {
+  display: inline-block;
+}

diff --git a/src/components/menu.css b/src/components/menu.css
index be1ec6ad6291ce46ff6dad607fb97da6e42076a7..72f47e75a04bf0f76a2c31af2cd79f447785f76b 100644 (file)
--- a/src/components/menu.css
+++ b/src/components/menu.css
@@ -1,4 +1,5 @@
 .Menu {
+  color: #333;
   width: 20em;
   height: 100vh;
   max-width: 100%;
@@ -43,6 +44,12 @@
   border-radius: 1em 0 0 1em;
   padding: 2em;
   background-color: #fff;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.2s;
+}
+
+.isNavOpen .Menu-Body {
+  box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
 }
 
 .Menu h3 {
@@ -60,6 +67,10 @@
   margin: 1em 0;
 }
 
+.Menu a:hover {
+  box-shadow: 0 3px;
+}
+
 @media (max-width: 25em) {
   .Menu {
     width: 100%;

diff --git a/src/components/musicalInterests.css b/src/components/musicalInterests.css
new file mode 100644 (file)
index 0000000..5af7f5a
--- /dev/null
+++ b/src/components/musicalInterests.css
@@ -0,0 +1,24 @@
+@import url('./horizontalScroller.css');
+@import url('./albumCard.css');
+
+.MusicalInterests {
+  background: #ddd;
+  padding: 4em 0;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.MusicalInterests h2 {
+  font-size: 1.5em;
+  padding-bottom: 1em;
+}
+
+.MusicalInterests .HorizontalScroller ul {
+  padding: 1em 4em;
+}
+
+@media (max-width: 40em) {
+  .MusicalInterests .HorizontalScroller ul {
+    padding: 1em 2em;
+  }
+}

diff --git a/src/images/Mandatory-Fun.jpg b/src/images/Mandatory-Fun.jpg
new file mode 100644 (file)
index 0000000..3ccae0e
Binary files /dev/null and b/src/images/Mandatory-Fun.jpg differ

diff --git a/src/images/Momentum.jpg b/src/images/Momentum.jpg
new file mode 100644 (file)
index 0000000..280c3c5
Binary files /dev/null and b/src/images/Momentum.jpg differ

diff --git a/src/images/Parachute.jpg b/src/images/Parachute.jpg
new file mode 100644 (file)
index 0000000..c986621
Binary files /dev/null and b/src/images/Parachute.jpg differ

diff --git a/src/images/Unleashed.jpg b/src/images/Unleashed.jpg
new file mode 100644 (file)
index 0000000..3961a9c
Binary files /dev/null and b/src/images/Unleashed.jpg differ

diff --git a/src/index.jsx b/src/index.jsx
index 6bd5230e84a24b8835a97e3bfeac4957ac886765..8cce53a3eaf2934e15abdb1f1c1925d7dc120b07 100644 (file)
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,6 +3,7 @@ const ReactDom = require('react-dom');
 
 const Hero = require('./components/Hero');
 const Menu = require('./components/Menu');
+const MusicalInterests = require('./components/MusicalInterests');
 
 ReactDom.render(
   <>
@@ -26,6 +27,7 @@ ReactDom.render(
         '\u2606 Living in Nashville, TN',
       ]}
     />
+    <MusicalInterests />
   </>,
   document.querySelector('#app')
 );

diff --git a/src/main.css b/src/main.css
index a96fa07f4a9ba2fd46dfc150383bee2b71433522..54c075807b4ac6f7202d91f61ce2805829fdb1bc 100644 (file)
--- a/src/main.css
+++ b/src/main.css
@@ -1,6 +1,7 @@
 @import url('https://fonts.larson.zone/inter/index.css');
 @import url('./components/hero.css');
 @import url('./components/menu.css');
+@import url('./components/musicalInterests.css');
 
 * {
   font-family: inherit;
@@ -12,8 +13,6 @@ body {
   font-family: inter, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
   font-weight: bold;
   font-size: 1.5em;
-  background: #ddd;
-  color: #333;
 }
 
 a {
@@ -21,10 +20,6 @@ a {
   color: #46f;
 }
 
-a:hover {
-  box-shadow: 0 3px;
-}
-
 @media (max-width: 45em) {
   body {
     font-size: 1em;