1.3.0 footer

html/yandex-metrica.js

@@ -1,3 +1,31 @@
-const html = '<script type="text/javascript">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter46142643 = new Ya.Metrika({ id:46142643, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/46142643" style="position:absolute; left:-9999px;" alt="" /></div></noscript>';
+const html = `<!-- Yandex.Metrika counter -->
+<script type="text/javascript" >
+    (function (d, w, c) {
+        (w[c] = w[c] || []).push(function() {
+            try {
+                w.yaCounter48848744 = new Ya.Metrika({
+                    id:48848744,
+                    clickmap:true,
+                    trackLinks:true,
+                    accurateTrackBounce:true,
+                    webvisor:true
+                });
+            } catch(e) { }
+        });
+
+        var n = d.getElementsByTagName("script")[0],
+            s = d.createElement("script"),
+            f = function () { n.parentNode.insertBefore(s, n); };
+        s.type = "text/javascript";
+        s.async = true;
+        s.src = "https://mc.yandex.ru/metrika/watch.js";
+
+        if (w.opera == "[object Opera]") {
+            d.addEventListener("DOMContentLoaded", f, false);
+        } else { f(); }
+    })(document, window, "yandex_metrika_callbacks");
+</script>
+<noscript><div><img src="https://mc.yandex.ru/watch/48848744" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
+<!-- /Yandex.Metrika counter -->`;
 
 module.exports = process.env.NODE_ENV === 'production' ? html : '';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cv",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Kamil Mielnik's Curriculum Vitae",
   "main": "src/index.js",
   "engines": {
@@ -51,20 +51,20 @@
   },
   "homepage": "https://github.com/kamilmielnik/cv#readme",
   "dependencies": {
-    "classnames": "^2.2.5",
-    "normalize.css": "^7.0.0",
-    "prop-types": "^15.6.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
-    "sidebar": "git://github.com/kamilmielnik/sidebar.git"
+    "classnames": "2.2.5",
+    "normalize.css": "8.0.0",
+    "postcss-loader": "2.1.5",
+    "prop-types": "15.6.1",
+    "react": "16.3.2",
+    "react-dom": "16.3.2"
   },
   "devDependencies": {
-    "babel-eslint": "^8.0.2",
+    "babel-eslint": "8.2.3",
     "better-npm-run": "0.1.0",
-    "eslint": "^4.11.0",
-    "eslint-plugin-react": "^7.5.1",
-    "http-server": "^0.11.1",
-    "react-hot-loader": "^3.1.3",
-    "webpack-wizard": "0.0.9"
+    "eslint": "4.19.1",
+    "eslint-plugin-react": "7.8.2",
+    "http-server": "0.11.1",
+    "react-hot-loader": "4.1.3",
+    "webpack-wizard": "0.1.0-beta.22"
   }
 }

src/components/app.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { contactInfo, education, name, skills, workExperience } from 'data';
-import Sidebar from 'sidebar';
 import ContactInfo from 'components/contact-info';
 import Button from 'components/button';
+import Footer from 'components/footer';
 import Name from 'components/name';
 import Page from 'components/page';
 import Section from 'components/section';
 import Skills from 'components/skills';
 import Experience from 'components/experience';
-import { PdfIcon, PrintIcon } from 'components/icons';
 import styles from './styles.scss';
 
 const PDF_FILENAME = 'KamilMielnik.pdf';
@@ -17,8 +16,8 @@ const downloadPdf = () => window.open(window.location.href + PDF_FILENAME);
 
 const App = () => (
   <div className={styles.app}>
-    <Sidebar contentClassName={styles.sidebarContent}>
-      <Page className={styles.page}>
+    <div className={styles.content}>
+      <Page>
         <Name className={styles.name} name={name} />
 
         <Section title="Contact Info">
@@ -40,14 +39,16 @@ const App = () => (
 
       <div className={styles.buttons}>
         <Button className={styles.button} title="Print this page" onClick={print}>
-          <PrintIcon />
+          Print
         </Button>
 
-        <Button className={styles.button} title="Download a PDF" onClick={downloadPdf}>
-          <PdfIcon />
+        <Button className={styles.button} title="Download PDF" onClick={downloadPdf}>
+          Download PDF
         </Button>
       </div>
-    </Sidebar>
+
+      <Footer className={styles.footer} />
+    </div>
   </div>
 );
 

src/components/button/styles.scss

@@ -1,11 +1,10 @@
-$size: 46px;
-
 .button {
   @include clickable-effects();
 
-  width: $size;
-  height: $size;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 6px 20px;
+  text-transform: uppercase;
+  font-size: 18px;
 }

src/components/copyright/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './styles.scss';
+
+const getCurrentYear = () => new Date().getFullYear();
+const homepageUrl = 'http://kamilmielnik.com/';
+
+const Copyright = ({ className }) => (
+  <div className={classNames(styles.copyright, className)}>
+    Copyright © {getCurrentYear()}
+    &nbsp;
+    <a className={styles.link} href={homepageUrl}>
+      Kamil Mielnik
+    </a>
+  </div>
+);
+
+Copyright.propTypes = {
+  className: PropTypes.string
+};
+
+export default Copyright;

src/components/copyright/styles.scss

@@ -0,0 +1,3 @@
+.copyright {
+  text-align: center;
+}

src/components/footer/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Copyright from 'components/copyright';
+import styles from './styles.scss';
+
+const email = '[email protected]';
+
+const Footer = ({ className }) => (
+  <footer className={classNames(styles.footer, className)}>
+    <div className={styles.row}>
+      Design & Development
+    </div>
+
+    <Copyright className={styles.row} />
+
+    <div className={styles.row}>
+      <a className={styles.link} href={`mailto:${email}`}>
+        {email}
+      </a>
+    </div>
+  </footer>
+);
+
+Footer.propTypes = {
+  className: PropTypes.string
+};
+
+export default Footer;

src/components/footer/styles.scss

@@ -0,0 +1,19 @@
+.footer {
+  padding: 50px 0;
+  background-color: $black;
+  color: #aaa;
+  box-shadow: $box-shadow;
+}
+
+.row {
+  margin: 12px 0;
+  text-align: center;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

src/components/page/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import styles from './styles.scss';
 
-const Page = ({ children }) => (
-  <div className={styles.page}>
+const Page = ({ children, className }) => (
+  <div className={classNames(styles.page, className)}>
     <div className={styles.pageContent}>
       {children}
     </div>
   </div>
 );
 
 Page.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
 };
 
 export default Page;

src/components/page/styles.scss

@@ -4,7 +4,7 @@
   padding: 20mm;
   box-sizing: border-box;
   background: white;
-  box-shadow: 0px 0px 5px 2px grey;
+  box-shadow: $box-shadow;
 
   .page-content {
     position: relative;

src/components/styles.scss

@@ -7,19 +7,33 @@
   right: 0;
 }
 
-.sidebar-content {
+.content {
   display: flex;
-  justify-content: center;
-  padding: 20px 0;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 60px;
+
+  @media print {
+    padding-top: 20px;
+  }
 }
 
 .buttons {
-  position: fixed;
-  left: 20px;
-  top: 90px;
+  display: flex;
+  justify-content: flex-end;
+  width: 210mm;
+  margin: 80px 0;
 
   .button {
-    margin-bottom: 10px;
+    margin: 0 10px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   @media screen and (max-width: 988px) {
@@ -30,3 +44,11 @@
     display: none;
   }
 }
+
+.footer {
+  width: 100%;
+
+  @media print {
+    display: none;
+  }
+}

src/styles.scss

@@ -1,4 +1,4 @@
-@import 'normalize.css';
+@import '~normalize.css';
 
 *, *:after, *:before {
   box-sizing: border-box;

src/styles/globals.scss

@@ -13,23 +13,16 @@ $foreground: $shade-80;
 $foreground-hover: $white;
 
 $ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-
+$box-shadow: 0px 0px 5px 2px grey;
 $micro-animation-duration: 0.1s;
 
 @mixin clickable-effects() {
-  background-color: $primary;
-  color: $foreground;
+  background-color: $white;
+  color: $black;
   cursor: pointer;
-  transition:
-    background-color $micro-animation-duration,
-    color $micro-animation-duration;
-
-  &:hover {
-    background-color: $primary-hover;
-    color: $foreground-hover;
-  }
+  box-shadow: $box-shadow;
 
-  &:active {
-    background-color: $primary-active;
+  &:hover, &:active {
+    outline: 1px solid $black;
   }
 }

webpack-wizard.config.js

@@ -3,8 +3,7 @@ module.exports = (webpackWizard, { resolveCwdPath }) => ({
     favicon: resolveCwdPath('html/favicon-v2.ico'),
     html: resolveCwdPath('html/index.html'),
     modules: [
-      resolveCwdPath('src'),
-      resolveCwdPath('node_modules/sidebar')
+      resolveCwdPath('src')
     ]
   }
 });