💄 new fonts + new music page!

igolopolosov · Mar 4, 2021 · b4e9915 · b4e9915
1 parent b881990
commit b4e9915
Show file tree

Hide file tree

Showing 13 changed files with 1,101 additions and 567 deletions.
diff --git a/index.ejs b/index.ejs
@@ -5,7 +5,8 @@
         <meta name="viewport" content="width=device-width initial-scale=1">
         <meta name="Description" content="Homepage of Igor Golopolosov">
         <link rel="shortcut icon" href="/favicon.png?">
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Lato&family=Oswald&display=swap" rel="stylesheet">
     </head>
     <body>
         <div id='entry-point'></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@babel/polyfill": "7.8.7",
-    "@babel/runtime-corejs2": "7.12.13",
-    "date-fns": "2.17.0",
+    "@babel/runtime-corejs2": "7.13.9",
+    "date-fns": "2.18.0",
     "prop-types": "15.7.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
@@ -29,54 +29,54 @@
     "redux-promise": "0.6.0"
   },
   "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/plugin-proposal-class-properties": "7.12.13",
-    "@babel/plugin-proposal-decorators": "7.12.13",
+    "@babel/core": "7.13.8",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-proposal-decorators": "7.13.5",
     "@babel/plugin-proposal-do-expressions": "7.12.13",
     "@babel/plugin-proposal-export-default-from": "7.12.13",
     "@babel/plugin-proposal-export-namespace-from": "7.12.13",
     "@babel/plugin-proposal-function-bind": "7.12.13",
     "@babel/plugin-proposal-function-sent": "7.12.13",
-    "@babel/plugin-proposal-json-strings": "7.12.13",
-    "@babel/plugin-proposal-logical-assignment-operators": "7.12.13",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.13",
+    "@babel/plugin-proposal-json-strings": "7.13.8",
+    "@babel/plugin-proposal-logical-assignment-operators": "7.13.8",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.13.8",
     "@babel/plugin-proposal-numeric-separator": "7.12.13",
-    "@babel/plugin-proposal-optional-chaining": "7.12.16",
+    "@babel/plugin-proposal-optional-chaining": "7.13.8",
     "@babel/plugin-proposal-pipeline-operator": "7.12.13",
     "@babel/plugin-proposal-throw-expressions": "7.12.13",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/preset-env": "7.12.16",
+    "@babel/preset-env": "7.13.9",
     "@babel/preset-react": "7.12.13",
     "@types/jest": "26.0.20",
-    "@types/node": "14.14.27",
+    "@types/node": "14.14.31",
     "@types/react": "17.0.2",
     "@types/react-redux": "7.1.16",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
-    "css-loader": "5.0.2",
-    "eslint": "7.20.0",
+    "css-loader": "5.1.1",
+    "eslint": "7.21.0",
     "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "7.2.0",
+    "eslint-config-prettier": "8.1.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.22.0",
     "file-loader": "6.2.0",
-    "html-webpack-plugin": "5.1.0",
+    "html-webpack-plugin": "5.2.0",
     "jest-cli": "26.6.3",
     "less": "4.1.1",
     "less-loader": "8.0.0",
-    "mini-css-extract-plugin": "1.3.6",
+    "mini-css-extract-plugin": "1.3.9",
     "prettier": "2.2.1",
     "prettier-eslint": "12.0.0",
     "style-loader": "2.0.0",
-    "ts-jest": "26.5.1",
+    "ts-jest": "26.5.3",
     "ts-loader": "8.0.17",
-    "typescript": "4.1.5",
-    "webpack": "5.21.2",
+    "typescript": "4.2.2",
+    "webpack": "5.24.3",
     "webpack-cli": "4.5.0",
     "webpack-dev-server": "^3.11.2"
   }

diff --git a/scripts/components/blocks/Link.less b/scripts/components/blocks/Link.less
@@ -12,7 +12,7 @@ a,
 
 a:hover,
 .link:hover {
-  border-bottom: @sizeXS solid var(--fgLightAccent);
+  border-bottom: @sizeXS solid var(--fgMediumAccent);
 }
 
 .actionLink {

diff --git a/scripts/components/blocks/Navigation.less b/scripts/components/blocks/Navigation.less
@@ -2,6 +2,7 @@
 
 .container > * {
   margin-right: @sizeM;
+  font-size: @sizeML;
 
   &:last-child {
     margin-right: 0;

diff --git a/scripts/components/pages/home/Home.js b/scripts/components/pages/home/Home.js
@@ -10,6 +10,6 @@ export const Home = () => (
     <div className={styles.intro}>
       <b>Igor Golopolosov.</b> Shipping software at <Monito />
     </div>
-    <h3>Find out more details about me on:</h3>
+    <h4>Find out more details about me on:</h4>
   </>
 );
diff --git a/scripts/components/pages/home/Monito.less b/scripts/components/pages/home/Monito.less
@@ -2,6 +2,6 @@
 
 .monitoLogo {
   margin-left: @sizeXS;
-  transform: translateY(@sizeM);
-  height: @sizeXXL;
+  transform: translateY(@sizeS);
+  height: @sizeXL;
 }
diff --git a/scripts/components/pages/music/Music.js b/scripts/components/pages/music/Music.js
@@ -6,8 +6,11 @@ import styles from "./music.less";
 export const Music = () => (
   <div className={styles.container}>
     {artists.map(([artist, ...albums]) => (
-      <div className={styles.artist} key={artist.band}>
-        <div className={styles.artistName}>{artist.band}</div>
+      <div className={styles.artist} key={artist.title}>
+        <div className={styles.artistHeading}>
+          <span className={styles.artistTitle}>{artist.title}</span>
+          <span className={styles.artistStyle}>{artist.style}</span>
+        </div>
         <div className={styles.albums}>
           {albums.map(album => (
             <Album {...album} key={album.album} />

diff --git a/scripts/components/pages/music/artists.js b/scripts/components/pages/music/artists.js
@@ -1,6 +1,7 @@
 const StackDo = [
   {
-    band: "Stack Do"
+    title: "Stack Do",
+    style: "Electroical Beats",
   },
   {
     band: "Stack Do",
@@ -60,7 +61,8 @@ const StackDo = [
 
 const FourteenthOfMaySaturday = [
   {
-    band: "14th of May, Saturday"
+    title: "14th of May, Saturday",
+    style: "3/4 Yamaha Acoustic Hardcore"
   },
   {
     band: "14th of May, Saturday",
@@ -91,9 +93,10 @@ const FourteenthOfMaySaturday = [
   }
 ];
 
-const Randoms = [
+const Palekh = [
   {
-    band: "Randoms"
+    title: "North Palekh Records",
+    style: "Homemade Acoustic"
   },
   {
     band: "Бублики",
@@ -132,7 +135,7 @@ const Randoms = [
       "04 - Run, Baby, Run!",
       "05 - Мотылёк"
     ],
-    tags: ["Acoustic Punk", "Ivanovo", "IzP"],
+    tags: ["Acoustic Punk", "Ivanovo", "Palekh", "IzP"],
     info: `
       Блюзовые ритмы, акустический панк и нежная лирика от Саши(vk.com/iz__p) и Гоши(vk.com/htkmsc)
 
@@ -177,6 +180,13 @@ const Randoms = [
       yadi.sk/d/_SxerQh3wFvap
       vk.com/htkmsc
     `
+  }
+];
+
+const Ivanovo = [
+  {
+    title: "Ivanovo",
+    style: "Rock'n'roll",
   },
   {
     band: "Nothing Personal",
@@ -197,12 +207,6 @@ const Randoms = [
       vk.com/club14492586
       soundcloud.com/hotkeymusic/sets/nothing-personal-nothing-wasted
     `
-  }
-];
-
-const TwoAM = [
-  {
-    band: "2 a.m."
   },
   {
     band: "2 a.m.",
@@ -234,4 +238,4 @@ const TwoAM = [
   }
 ];
 
-export const artists = [StackDo, FourteenthOfMaySaturday, Randoms, TwoAM];
+export const artists = [StackDo, FourteenthOfMaySaturday, Palekh, Ivanovo];
diff --git a/scripts/components/pages/music/music.less b/scripts/components/pages/music/music.less
@@ -15,13 +15,24 @@
   flex-direction: column;
 }
 
-.artistName {
+.artistHeading {
+  display: flex;
+  flex-direction: column;
   margin-bottom: @sizeM;
   padding: @sizeS;
   text-align: left;
   border-bottom: @sizeXS solid @neutral;
 }
 
+.artistTitle {
+  font-weight: 900;
+  font-size: @sizeL;
+}
+
+.artistStyle {
+  font-size: @sizeM;
+}
+
 .albums {
   flex: 1;
   display: flex;

diff --git a/styles/global.less b/styles/global.less
@@ -19,7 +19,7 @@ body,
 button,
 input,
 textarea {
-  font-family: "Open Sans", sans-serif;
+  font-family: "Lato", sans-serif;
   letter-spacing: 0.1em;
 }
 

diff --git a/styles/size.less b/styles/size.less
@@ -2,6 +2,7 @@
 @sizeXS: 0.25rem;
 @sizeS: 0.5rem;
 @sizeM: 1rem;
+@sizeML: 1.2rem;
 @sizeL: 1.5rem;
 @sizeXL: 2rem;
 @sizeXXL: 3rem;

diff --git a/webpack.config.js b/webpack.config.js
@@ -65,7 +65,9 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              modules: true
+              modules: {
+                localIdentName: '[name]__[local]',
+              }
             }
           },
           { loader: 'less-loader' },