PC styles nearly done

.idea/workspace.xml

@@ -2,21 +2,31 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/static/cv/andras_schmelczer_cv_2020_01.pdf" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/icons/at.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/content/en.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/custom.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/custom.d.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/content/hu.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/framework/page-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-element.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/page-event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-event.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/framework/page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.html.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/style/elements.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/style/page.scss" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/test.html" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -49,23 +59,24 @@
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="ignore_missing_gitignore" value="true" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/static/icons" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/static" />
     <property name="nodejs_package_manager_path" value="npm" />
     <property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
     <property name="settings.editor.selected.configurable" value="watcher.settings" />
     <property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
   </component>
   <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static" />
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
+      <recent name="$PROJECT_DIR$" />
+    </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
       <recent name="C:\Projects\portfolio\CompiledCV\src" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\page\timeline" />
-      <recent name="C:\Projects\portfolio\CompiledCV\src\page" />
-      <recent name="C:\Projects\portfolio\CompiledCV\src\page\main" />
-    </key>
-    <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
-      <recent name="$PROJECT_DIR$" />
     </key>
   </component>
   <component name="RunDashboard">
@@ -104,7 +115,8 @@
       <workItem from="1577040021962" duration="1657000" />
       <workItem from="1577088438195" duration="19038000" />
       <workItem from="1577271824791" duration="7691000" />
-      <workItem from="1577282613892" duration="10464000" />
+      <workItem from="1577282613892" duration="11050000" />
+      <workItem from="1577348003642" duration="4876000" />
     </task>
     <servers />
   </component>

custom.d.ts

@@ -27,3 +27,8 @@ declare module "*.mp4" {
   const content: string;
   export default content;
 }
+
+declare module "*.pdf" {
+  const content: string;
+  export default content;
+}

src/framework/page-element.ts

@@ -13,16 +13,16 @@ export abstract class PageElement {
     this.element = value;
   }
 
-  protected eventGenerator: PageElement;
+  protected eventBroadcaster: PageElement;
 
   protected constructor(private children: Array<PageElement> = []) {}
 
-  public giveEvent(event: PageEvent, parent: PageElement = null) {
+  public broadcastEvent(event: PageEvent, parent: PageElement = null) {
-    if (event.type === PageEventType.eventGeneratorChanged) {
+    if (event.type === PageEventType.eventBroadcasterChanged) {
-      this.eventGenerator = event.data;
+      this.eventBroadcaster = event.data;
     }
     this.handleEvent(event, parent);
-    this.children.forEach(c => c.giveEvent(event, this));
+    this.children.forEach(c => c.broadcastEvent(event, this));
   }
 
   protected query(query: string): HTMLElement | null {

src/framework/page-event.ts

@@ -6,5 +6,5 @@ export class PageEvent {
 export enum PageEventType {
   onLoad,
   onBodyDimensionsChanged,
-  eventGeneratorChanged
+  eventBroadcasterChanged
 }

src/framework/page.ts

@@ -8,11 +8,11 @@ export class Page extends PageElement {
   ) {
     super(children);
     this.setElement(rootElement);
-    this.giveEvent(
+    this.broadcastEvent(
-      { type: PageEventType.eventGeneratorChanged, data: this },
+      { type: PageEventType.eventBroadcasterChanged, data: this },
       this
     );
     rootElement.append(...children.map(e => e.getElement()).filter(e => e));
-    this.giveEvent({ type: PageEventType.onLoad }, this);
+    this.broadcastEvent({ type: PageEventType.onLoad }, this);
   }
 }

src/model/portfolio.ts

@@ -12,8 +12,6 @@ export interface Config {
   showMore: string;
   showLess: string;
   aPictureOf: string;
-  cvName: string;
-  lastEdit: Date;
 }
 
 export interface Header {
@@ -32,6 +30,12 @@ export interface TimelineElement {
 }
 
 export interface Footer {
+  title: string;
   email: string;
   cv: url;
+  cvName: string;
+  githubLinkName: string;
+  githubLink: url;
+  lastEditName: string;
+  lastEdit: Date;
 }

src/page/about/about.scss

@@ -2,7 +2,8 @@
 @import "../../style/vars";
 
 #about {
-  margin-top: $normal-margin;
+  margin-top: $normal-margin - $small-margin;
+  padding: $small-margin;
 
   header {
     @include center-children();

src/page/background/background.scss

@@ -14,6 +14,6 @@
     position: absolute;
     left: 0;
     top: 0;
-    width: 100px;
+    width: 160px;
   }
 }

src/page/background/background.ts

@@ -62,9 +62,9 @@ export class PageBackground extends PageElement {
         generate(
           count,
           () => choose(this.colors, random),
-          () => randomInInterval(150, 750, random),
+          () => randomInInterval(160, 750, random),
           () => {
-            const z = randomInInterval(-5, -15, random);
+            const z = randomInInterval(-12, -25, random);
             return `
               translateX(${randomWithKnownZ(-z, width)}px)
               translateY(${randomWithKnownZ(-z, height)}px)

src/page/footer/footer.html.ts

@@ -1,10 +1,34 @@
 import { Footer } from "../../model/portfolio";
-import { html } from "../../model/misc";
+import { html, url } from "../../model/misc";
-import "./footer.scss";
 
-export const generate = ({ email, cv }: Footer, cvName: string): html => `
+import "./footer.scss";
+import cvIcon from "../../static/icons/cv.svg";
+import emailIcon from "../../static/icons/at.svg";
+
+export const generate = ({
+  title,
+  email,
+  cv,
+  cvName,
+  lastEditName,
+  lastEdit,
+  githubLinkName,
+  githubLink
+}: Footer): html => `
     <footer id="page-footer">
-        <a id="email" href="mailto:${email}">${email}</a>
+        <h2>${title}</h2>
-        <a id="cv" href="mailto:${cv}">${cvName}</a>
+        <ul>
+            <li>
+                <img src="${cvIcon}" alt="CV" />
+                <a id="cv" target="_blank">${cvName}</a>
+            </li>
+            <li>
+                <img src="${emailIcon}" alt="email" />
+                <a id="email" href="mailto:${email}">${email}</a>
+            </li>
+        </ul>
+        <aside class="other">
+           <h6>${lastEditName} ${lastEdit.toLocaleDateString()}</h6>
+        </aside>
     </footer>
 `;

src/page/footer/footer.scss

@@ -2,7 +2,50 @@
 @import "../../style/vars";
 
 footer#page-footer {
-  @include card();
+  text-align: center;
-  @include center-children();
+
-  margin: $normal-margin auto;
+  margin: $small-margin auto 0 auto;
+  padding: $normal-margin $normal-margin $line-height $normal-margin;
+  width: 100%;
+  backdrop-filter: blur(5px);
+
+  h2 {
+    @include title-font();
+  }
+
+  ul {
+    list-style: none;
+    display: inline-block;
+    margin-top: $normal-margin;
+    text-align: left;
+
+    li {
+      @include center-children();
+      justify-content: flex-start;
+
+      &:not(:first-child) {
+        padding-top: $line-height;
+      }
+
+      img {
+        @include max-square($icon-size);
+        margin-right: $small-margin;
+      }
+
+      a {
+        font-size: 1.4rem;
+      }
+    }
+  }
+
+  aside.other {
+    @include center-children();
+    margin: $normal-margin auto 0 auto;
+    width: $body-width;
+
+    h6 {
+      @include insignificant-font();
+      opacity: 0.4;
+    }
+  }
 }

src/page/footer/footer.ts

@@ -5,8 +5,8 @@ import { generate } from "./footer.html";
 import { createElement } from "../../framework/helper";
 
 export class PageFooter extends PageElement {
-  constructor(footer: Footer, cvName: string) {
+  constructor(footer: Footer) {
     super();
-    this.setElement(createElement(generate(footer, cvName)));
+    this.setElement(createElement(generate(footer)));
   }
 }

src/page/image-viewer/image-viewer.html.ts

@@ -3,7 +3,7 @@ import cancel from "../../static/icons/cancel.svg";
 import "./image-viewer.scss";
 
 export const generate = (): html => `
-    <section class="photo-viewer">
+    <section id="image-viewer">
         <img id="photo" alt="currently opened photo"/>
         <img id="cancel" src="${cancel}" alt="cancel"/>
     </section>

src/page/image-viewer/image-viewer.scss

@@ -1,7 +1,7 @@
 @import "../../style/vars";
 @import "../../style/mixins";
 
-.photo-viewer {
+#image-viewer {
   @include center-children();
   display: none;
 

src/page/index.ts

@@ -14,7 +14,7 @@ export const create = ({ config, header, timeline, footer }: Portfolio) => {
       new PageBackground(),
       new PageHeader(header, config.aPictureOf),
       new PageTimeline(timeline, config.showMore, config.showLess),
-      new PageFooter(footer, config.cvName),
+      new PageFooter(footer),
       new PageImageViewer()
     ],
     document.body.querySelector("main")

src/page/timeline/timeline-element/timeline-element.ts

@@ -44,7 +44,7 @@ export class PageTimelineElement extends PageElement {
     }
 
     this.isOpen = !this.isOpen;
-    this.eventGenerator?.giveEvent({
+    this.eventBroadcaster?.broadcastEvent({
       type: PageEventType.onBodyDimensionsChanged
     });
   }

src/portfolio.ts

@@ -10,15 +10,14 @@ import color from "./static/media/color.jpg";
 import platform from "./static/media/platform.png";
 import photos from "./static/media/photos.jpg";
 import led from "./static/media/led.jpg";
+import cv from "./static/cv/andras_schmelczer_cv_2020_01.pdf";
 import ledVideo from "./static/media/led720.mp4";
 
 export const portfolio: Portfolio = {
   config: {
     showMore: `Show details`,
     showLess: `Show less`,
-    aPictureOf: `a picture of`,
+    aPictureOf: `a picture of`
-    cvName: `Curriculum vitae`,
-    lastEdit: new Date(2019, 12, 22)
   },
   header: {
     name: `András Schmelczer`,
@@ -160,7 +159,13 @@ export const portfolio: Portfolio = {
     }
   ],
   footer: {
-    email: `andras.schmelczer@schdesign.hu`,
+    title: `Learn more`,
-    cv: `/static/media/andras_schmelczer_cv.pdf`
+    cv,
+    email: `andras@schmelczer.dev`,
+    cvName: `Curriculum vitae`,
+    githubLinkName: `view source`,
+    githubLink: `https://github.com/schmelczerandras/timeline`,
+    lastEditName: `Last modified on `,
+    lastEdit: new Date(2019, 11, 27) // months are 0 indexed
   }
 };

src/static/icons/at.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00018 512" width="512px"><g><path d="m401.738281 442.710938c6.046875 9.242187 3.453125 21.636718-5.792969 27.683593-41.585937 27.195313-89.9375 41.582031-139.824218 41.605469-.039063 0-.082032 0-.121094 0-68.097656.003906-132.101562-26.234375-180.253906-73.890625-48.183594-47.683594-75.078125-111.46875-75.7343752-179.597656-.6601568-68.558594 25.4453122-133.210938 73.5039062-182.054688 48.066406-48.851562 112.265625-76 180.773437-76.45312475.5625 0 1.136719-.00390625 1.699219-.00390625 53.46875 0 104.816407 16.546875 148.613281 47.90625 43.277344 30.988281 75.519532 73.652344 93.238282 123.378906 3.707031 10.40625-1.722656 21.847656-12.125 25.554688-10.40625 3.707031-21.84375-1.722656-25.554688-12.125-30.898437-86.707032-112.84375-144.714844-204.195312-144.714844-.476563 0-.9375 0-1.414063.003906-57.796875.378906-111.964843 23.289063-152.523437 64.507813-40.546875 41.210937-62.570313 95.765625-62.015625 153.613281 1.132812 117.949219 98.019531 213.875 215.992187 213.875h.097656c42.097657-.019531 82.886719-12.148438 117.953126-35.082031 9.242187-6.046875 21.636718-3.453125 27.683593 5.792969zm110.261719-165.710938c0 50.179688-40.820312 91-91 91-32.0625 0-60.304688-16.667969-76.519531-41.796875-20.71875 26.058594-52.679688 42.796875-88.480469 42.796875-62.308594 0-113-50.691406-113-113s50.691406-113 113-113c28.277344 0 54.160156 10.441406 74 27.667969v-3.535157c0-11.042968 8.953125-20 20-20s20 8.957032 20 20v109.867188c0 28.121094 22.878906 51 51 51s51-22.878906 51-51c0-11.046875 8.953125-20 20-20s20 8.953125 20 20zm-183-21c0-40.25-32.746094-73-73-73-40.25 0-73 32.75-73 73 0 40.253906 32.75 73 73 73 40.253906 0 73-32.746094 73-73zm0 0" class="active-path" fill="#31343F"/></g>
+</svg>

src/style/a.scss

@@ -0,0 +1,48 @@
+@import "vars";
+@import "mixins";
+
+a {
+  @include insignificant-font();
+  text-decoration: none;
+  position: relative;
+  cursor: pointer;
+  color: $accent-color;
+  display: inline-block;
+  overflow: hidden;
+
+  $border-shift: 10px;
+
+  transition: transform $slow-transition-time;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: $line-width;
+    bottom: 0;
+    z-index: 1;
+    background: linear-gradient(
+      90deg,
+      $card-color 0,
+      transparentize($card-color, 1) 4px,
+      transparentize($card-color, 1) calc(100% - 4px),
+      $card-color 100%
+    );
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    width: calc(100% + #{$border-shift});
+    z-index: 0;
+    border-bottom: $line-width dotted $accent-color;
+    transition: transform $slow-transition-time;
+  }
+
+  &:hover {
+    &:after {
+      transform: translateX(-$border-shift);
+    }
+  }
+}

src/style/elements.scss

@@ -1,18 +0,0 @@
-#photo-viewer {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: var(--photo-viewer-color);
-  z-index: -3;
-  opacity: 0;
-  transition: opacity var(--transition-time);
-}
-
-/* #photo */
-#photo-viewer > img {
-  max-width: 80vw;
-  max-height: 80vh;
-}
-/**/

src/style/mixins.scss

@@ -29,6 +29,11 @@
   height: $size;
 }
 
+@mixin max-square($size) {
+  max-width: $size;
+  max-height: $size;
+}
+
 @mixin title-font() {
   font: 400 3.33rem "Raleway", serif;
 }

src/style/page.scss

@@ -1,84 +0,0 @@
-header,
-footer,
-#timeline,
-#about > p:first-of-type,
-#timeline > section:not(:first-of-type) > .card {
-  margin-top: var(--margin);
-}
-
-#about > p {
-}
-
-#timeline > section {
-  display: flex;
-}
-
-.card {
-  flex: 1;
-}
-
-#about > p,
-.card > *:not(:first-child):not(:last-child),
-.collapsed > *:not(:first-child) {
-  margin-top: var(--line-height);
-}
-
-img {
-  user-select: none;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-}
-
-.description {
-  font-style: italic;
-  margin-bottom: var(--smaller-margin);
-}
-
-.collapsed > p {
-  text-align: left;
-}
-
-.collapsed {
-  height: 0;
-  overflow: hidden;
-  transition: height var(--transition-time);
-}
-.collapsed > *:last-child {
-  margin-bottom: var(--smaller-margin);
-}
-
-footer {
-  margin-bottom: var(--margin);
-}
-
-@media (max-width: 900px) {
-  body {
-    font-size: 0.85em;
-  }
-
-  #photo {
-    max-width: 94vw;
-  }
-
-  .card {
-    font-size: 0.9em;
-  }
-
-  header {
-    flex-direction: column;
-  }
-
-  h1,
-  #header-pic {
-    font-size: 3em;
-  }
-
-  #header-pic {
-    height: 5.5ch;
-    margin: 0.75ex 0 0.5ex 0;
-  }
-
-  #about > p {
-    text-align: left;
-  }
-}

src/styles.scss

@@ -1,8 +1,10 @@
 @import "style/vars";
 @import "style/mixins";
+@import "style/a";
 
 * {
   margin: 0;
+  padding: 0;
   box-sizing: border-box;
   color: $normal-text-color;
   hyphens: auto;
@@ -32,23 +34,23 @@ body {
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-
     perspective: 5px;
+
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      width: 12px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: $accent-color;
+      border-radius: $border-radius;
+    }
+
     & > * {
       width: $body-width;
       margin: auto;
     }
   }
-
-  &::-webkit-scrollbar-track,
-  &::-webkit-scrollbar {
-    background-color: transparent;
-    width: 12px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: $accent-color;
-    border-radius: $border-radius;
-  }
 }
 
 img,
@@ -58,50 +60,3 @@ video {
   object-fit: contain;
   border-radius: $border-radius;
 }
-
-a {
-  @include insignificant-font();
-  text-decoration: none;
-  position: relative;
-  cursor: pointer;
-  color: $accent-color;
-  display: inline-block;
-  overflow: hidden;
-
-  $border-shift: 10px;
-
-  transition: transform $slow-transition-time;
-
-  &:before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: $line-width;
-    bottom: 0;
-    z-index: 1;
-    background: linear-gradient(
-      90deg,
-      $card-color 0,
-      transparentize($card-color, 1) 4px,
-      transparentize($card-color, 1) calc(100% - 4px),
-      $card-color 100%
-    );
-  }
-
-  &:after {
-    content: "";
-    display: block;
-    width: calc(100% + #{$border-shift});
-    height: 100%;
-    z-index: 0;
-    border-bottom: $line-width dotted $accent-color;
-    transition: transform $slow-transition-time;
-  }
-
-  &:hover {
-    &:after {
-      transform: translateX(-$border-shift);
-    }
-  }
-}

webpack.config.js

@@ -28,6 +28,16 @@ module.exports = {
           }
         }
       },
+      {
+        test: /\.(pdf)$/i,
+        use: {
+          loader: "file-loader",
+          query: {
+            outputPath: "static/",
+            name: "[name].[ext]"
+          }
+        }
+      },
       {
         test: /\.ico$/i,
         use: {