]> git.neb.cc Git - xyz.git/commitdiff
projects / xyz.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: bfcce00)
Refactor (#11)
authorBen Larson <[email protected]>
Fri, 11 Sep 2020 01:38:24 +0000 (20:38 -0500)
committerGitHub <[email protected]>
Fri, 11 Sep 2020 01:38:24 +0000 (20:38 -0500)
src/components/Interest.jsx [new file with mode: 0644] patch | blob
src/components/Menu.jsx patch | blob | blame | history
src/components/MusicalInterests.jsx [deleted file] patch | blob | blame | history
src/components/interest.css [moved from src/components/musicalInterests.css with 100% similarity] patch | blob | blame | history
src/index.html patch | blob | blame | history
src/index.jsx patch | blob | blame | history
src/interests.json [new file with mode: 0644] patch | blob
src/main.css patch | blob | blame | history

diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx
new file mode 100644 (file)
index 0000000..1ca6ac8
--- /dev/null
+++ b/src/components/Interest.jsx
@@ -0,0 +1,19 @@
+const React = require('react');
+
+const HorizontalScroller = require('./HorizontalScroller');
+
+module.exports = ({ title, list, Card }) => {
+  return (
+    <div
+      className="MusicalInterests"
+      id={title.toLowerCase().replace(/\s/g, '-')}
+    >
+      <h2>{title}</h2>
+      <HorizontalScroller>
+        {list.map((item, i) => (
+          <Card key={i} {...item} />
+        ))}
+      </HorizontalScroller>
+    </div>
+  );
+};
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index b6f93f6d06d95d4b71ad00e43bb406a36fa6fbef..c84f1118c99e2f28ecab0b8c51e0d508ce4d3043 100644 (file)
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -1,6 +1,6 @@
 const React = require('react');
 
-module.exports = ({ links, externalLinks }) => {
+module.exports = ({ sections, links }) => {
   const navActions = {
     open: () => document.body.classList.add('isNavOpen'),
     close: () => document.body.classList.remove('isNavOpen'),
@@ -23,23 +23,22 @@ module.exports = ({ links, externalLinks }) => {
       <div className="Menu-Body">
         <h3>Menu</h3>
         <ul>
-          {links.map((link, i) => (
+          {sections.map((section, i) => (
             <li key={i}>
               <a
-                href={link.url}
+                href={'#' + section.toLowerCase().replace(/\s/g, '-')}
                 onClick={navActions.close}
                 style={{ color: 'inherit' }}
-              >
-                {link.text}
-              </a>
+                children={section}
+              />
             </li>
           ))}
         </ul>
         <hr />
         <ul>
-          {externalLinks.map((link, i) => (
+          {links.map((link, i) => (
             <li key={i}>
-              <a href={link.url}>{link.text}</a>
+              <a href={'https://' + link.url}>{link.text + ' \u2197'} </a>
             </li>
           ))}
         </ul>
diff --git a/src/components/MusicalInterests.jsx b/src/components/MusicalInterests.jsx
deleted file mode 100644 (file)
index 1a21ce8..0000000
--- a/src/components/MusicalInterests.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-const React = require('react');
-
-const HorizontalScroller = require('./HorizontalScroller');
-const AlbumCard = require('./AlbumCard');
-
-module.exports = (props) => {
-  return (
-    <div className="MusicalInterests" id="music-i-like">
-      <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/index.html b/src/index.html
index 8a54e3fa51a03388711ba9b8493148382c98f5c2..bb8424eb5c69287408cfc0adc7c480b65b6a48f5 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
     <title>Ben Larson</title>
     <style>
       @import url('./main.css');
diff --git a/src/index.jsx b/src/index.jsx
index 9aab1875f9ae3153e4c1cee36e80818242138b60..b3d26ab716b126f9e436cf993cfbb230887c3cc6 100644 (file)
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,30 +3,20 @@ const ReactDom = require('react-dom');
 
 const Hero = require('./components/Hero');
 const Menu = require('./components/Menu');
-const MusicalInterests = require('./components/MusicalInterests');
+const Interest = require('./components/Interest');
+const AlbumCard = require('./components/AlbumCard');
+
+const interests = require('./interests.json');
 
 ReactDom.render(
   <>
     <Menu
+      sections={['Music I like']}
       links={[
-        {
-          url: '#',
-          text: 'Top \u2191',
-        },
-        {
-          url: '#music-i-like',
-          text: 'Music I like',
-        },
-      ]}
-      externalLinks={[
-        {
-          url: 'https://github.com/ben-larson/',
-          text: 'Check out my GitHub \u2197',
-        },
-        {
-          url: 'https://www.linkedin.com/in/ben-larson-dev/',
-          text: 'Connect on LinkedIn \u2197',
-        },
+        { url: 'github.com/ben-larson', text: 'GitHub' },
+        { url: 'stackoverflow.com/users/10377586/', text: 'Stack Overflow' },
+        { url: 'www.linkedin.com/in/ben-larson-dev', text: 'LinkedIn' },
+        { url: 'music.apple.com/profile/benthedev', text: 'Apple Music' },
       ]}
     />
     <Hero
@@ -37,7 +27,11 @@ ReactDom.render(
         '\u2606 Living in Nashville, TN',
       ]}
     />
-    <MusicalInterests />
+    <Interest
+      title="Music I like"
+      list={interests.music}
+      Card={AlbumCard}
+    ></Interest>
   </>,
   document.querySelector('#app')
 );
diff --git a/src/interests.json b/src/interests.json
new file mode 100644 (file)
index 0000000..a607c2b
--- /dev/null
+++ b/src/interests.json
@@ -0,0 +1,28 @@
+{
+  "music": [
+    {
+      "song": "Gepetto / Pinokkio",
+      "artist": "Trio Dhoore",
+      "album": "Momentum",
+      "link": "https://triodhoore.com/momentum"
+    },
+    {
+      "song": "The Offbeat Jig / Keep Dreaming",
+      "artist": "Trio Dhoore",
+      "album": "Parachute",
+      "link": "https://triodhoore.com/parachute"
+    },
+    {
+      "song": "Impossible",
+      "artist": "Two Steps From Hell",
+      "album": "Unleashed",
+      "link": "https://music.apple.com/us/album/unleashed/1287310003"
+    },
+    {
+      "song": "NOW That's What I Call Polka!",
+      "artist": "\"Weird Al\" Yankovic",
+      "album": "Mandatory Fun",
+      "link": "https://www.weirdal.com/catalog/mandatory-fun/"
+    }
+  ]
+}
diff --git a/src/main.css b/src/main.css
index dac03eef92280b203968064bc9fc8663a30c1c43..b6813373c238cae003a8aafadc5c5f2690c7cec9 100644 (file)
--- a/src/main.css
+++ b/src/main.css
@@ -1,7 +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');
+@import url('./components/interest.css');
 
 * {
   font-family: inherit;
Unnamed repository; edit this file 'description' to name the repository.