updated dependencies

Small style update
Updated favicon
2022-07-12 15:20:06 +02:00 · 2022-02-22 19:10:32 +01:00 · 2022-02-22 19:10:05 +01:00 · 2022-02-18 09:55:31 +01:00 · 2022-02-17 22:57:17 +01:00 · 2022-02-16 13:21:35 +01:00
30 changed files with 9661 additions and 19260 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,3 @@
 VUE_APP_TITLE=kamilcraft.com
-BASE_URL=http://127.0.0.1
+VUE_APP_BASE_URL=http://127.0.0.1
+VUE_APP_API_URL=https://api.kamilcraft.com
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,12 +4,9 @@ module.exports = {
    node: true
  },
  extends: [
-    'plugin:vue/essential',
-    '@vue/standard'
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended'
  ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,35 +8,40 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "bootstrap": "^5.0.2",
-    "core-js": "^3.15.2",
-    "jquery": "^3.6.0",
-    "popper.js": "^1.16.1",
-    "vue": "^2.6.14",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.37",
    "vue-meta": "^2.4.0",
-    "vue-router": "^3.5.2",
-    "vuex": "^3.6.2"
+    "vue-router": "^4.1.2",
+    "vuex": "^4.0.2"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "^3.1.1",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= VUE_APP_BASE_URL %>/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
    <title>KamilCraft.com</title>
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -1,3 +1,108 @@
-@mixin btn($revese: false) {
+@import "colors";

+$default-color: transparent !default;
+$dark-gray: #4f4f4f !default;
+$navy-blue: #436da7 !default;
+$white: white !default;
+
+$btn-colors: (
+  border: $dark-gray,
+  bg: $default-color,
+  font: $dark-gray,
+  hover: (
+    bg: $dark-gray,
+    font: $white
+  )
+);
+
+.btn {
+  display: block;
+  min-width: 270px;
+  padding: 8px 10px;
+
+  border-radius: 3px;
+  border-width: 3px;
+  border-style: solid;
+  border-color: $default-color;
+
+  background-color: map-get($btn-colors, bg);
+}
+
+@mixin btn($colors: $btn-colors) {
+  border-color: map-get($colors, border);
+  background-color: map-get($colors, bg);
+
+  font-size: 1.05em;
+  color: map-get($colors, font);
+
+  &:hover {
+    $hovers: map-get($colors, hover);
+    background-color: map-get($hovers, bg);
+    color: map-get($hovers, font);
+  }
+
+  @content;
+}
+
+@mixin btn-reverse($leading-color: $dark-gray) {
+  $colors: (
+    border: $leading-color,
+    bg: $leading-color,
+    font: $white,
+    hover: (
+      bg: $default-color,
+      font: $leading-color
+    )
+  );
+  @include btn($colors);
+}
+
+@mixin button($reverse: false, $has-icon: false) {
+  @if not $reverse {
+    @include btn()
+  } @else {
+    @include btn-reverse($navy-blue);
+  }
+  @if $has-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      margin-right: 10px;
+      font-size: 1.3em;
+    }
+  }
+  @content;
+}
+
+@mixin ghost-button($has-icon: false) {
+  @include button($has-icon: $has-icon);
+
+  position: relative;
+  font-size: 1.2em;
+  border: unset;
+
+  &:hover {
+    background-color: $default-color;
+    color: $dark-gray;
+
+    &::after {
+      width: 98%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    width: 30%;
+    height: 2px;
+    background-color: $dark-gray;
+    transform: translateY(2px);
+    transition: width .3s linear;
+  }
 }
--- a/scss/_colors.scss
+++ b/scss/_colors.scss
@@ -1,7 +1,10 @@
 // default colors
 $gray: #fafafa;
 $dark-gray: #4f4f4f;
+$navy-blue: #436da7 !default;

 // default colors for style
 $text-color: #2c3e50;
 $bg-color: white;
+
+$white: white;
--- a/scss/_media.scss
+++ b/scss/_media.scss
@@ -0,0 +1,34 @@
+@mixin media($min-max, $reverse: false) {
+  $type: max-width;
+  @if $reverse {
+    $type: min-width;
+    $min-max: $min-max + 1;
+  }
+  @media screen and ($type: $min-max) {
+    @content
+  }
+}
+
+@mixin media-mobile($reverse: false) {
+  @include media(480px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-tablet($reverse: false) {
+  @include media(768px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-small($reverse: false) {
+  @include media(1024px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-large($reverse: false) {
+  @include media(1200px, $reverse) {
+    @content
+  }
+}
--- a/scss/default.scss
+++ b/scss/default.scss
@@ -1,28 +1,42 @@
+@import "media";
@import "root";
@import "all";

 a {
  text-decoration: none;
 }
+
 h2 {
  font-size: 1.8em;
  margin-bottom: 10px;
 }
+
 p {
  font-size: 1.1em;
  line-height: 1.4em;
+
  &:not(&:last-of-type) {
    padding-bottom: 10px;
  }
 }
+
 .container {
  max-width: 1200px;
  margin: 0 auto;
-}
-.loading {
-  height: 300px;

-  .loading-animation {
+  @include media-large {
+    padding: 0 10px;
+  }
+
+  @include media-small {
+    padding: 0 20px;
+  }
+}
+
+.loading {
+  height: 200px;
+
+  .loading_animation {
    margin: 20px auto;
    width: 50px;
    height: 50px;
@@ -32,8 +46,3 @@ p {
    animation: loading-animation 1s linear infinite;
  }
 }
-@media screen and (max-width: 1200px) {
-  .container {
-    padding: 0 20px;
-  }
-}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <div id="app">
+  <main rel="main" id="app">
    <SiteHeader />
    <router-view />
    <Footer />
-  </div>
+  </main>
 </template>

 <style lang="scss">
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="btn" :class="{ reverse: isReverse }">
+  <button class="btn" :class="{ 'btn-reverse': isReverse }">
    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
    <span><slot></slot></span>
  </button>
@@ -17,40 +17,13 @@ export default {
 </script>

 <style lang="scss" scoped>
-$btn-blue-color: #436DA7;
-$btn-gray-color: #4f4f4f;
-$hover-btn-color: white;
+@import "scss/_btn";

 .btn {
-  display: flex;
-  min-width: 270px;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 10px;
-  border: 3px solid $btn-gray-color;
-  background-color: transparent;
-  color: $btn-gray-color;
-  border-radius: 3px;
-  font-size: 1.05em;
-
-  .icon {
-    margin-right: 10px;
-    font-size: 1.3em;
-  }
-
-  &:hover {
-    background-color: $btn-gray-color;
-    color: $hover-btn-color;
-  }
+  @include button($has-icon: true);
 }
-.reverse {
-  background-color: $btn-blue-color;
-  border-color: $btn-blue-color;
-  color: $hover-btn-color;

-  &:hover {
-    background-color: transparent;
-    color: $btn-blue-color;
-  }
+.btn-reverse {
+  @include button(true, true);
 }
 </style>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,17 +1,19 @@
 <template>
  <footer class="footer">
-    <div class="footer-container">
-      <div class="logo">Kamil<span class="logo-element">Craft</span></div>
-      <ul class="social-media">
-        <li class="social-link"
+    <div class="footer_container">
+      <div class="container_logo">Kamil<span class="logo_element">Craft</span></div>
+      <ul class="socials">
+        <li class="social_link"
            v-for="link in socialLinks"
            :key="link.title.slug">
          <a class="link"
             :href="link.link"
             :title="link.title"
-             target="_blank">
+             target="_blank"
+             rel="noopener nofollow noreferrer">
            <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
-            <span class="title">{{ link.title }}</span>
+            <span class="social_title">{{ link.title }}</span>
+            <span class="social_shortcut">{{ link.shortcut }}</span>
          </a>
        </li>
      </ul>
@@ -27,30 +29,31 @@
  background-color: #323232;
  padding: 35px 0;

-  &-container {
+  &_container {
    @extend .container;
    display: flex;
    align-items: center;
    justify-content: space-between;

-    .logo {
+    .container_logo {
      padding: 14px 20px 14px 40px;
      font-family: 'Thasadith', sans-serif;
      font-size: 2.5em;
      color: #D4D4D4;
      background-color: #5B5B5B;

-      .logo-element {
+      .logo_element {
        color: #A2CF00;
      }
    }

-    .social-media {
+    .socials {
      display: flex;
      list-style: none;

-      .social-link {
+      .social_link {
        margin-right: 25px;
+        padding-right: 15px;
        font-size: 1.1em;

        a {
@@ -60,28 +63,43 @@
            margin-right: 5px;
          }

-          @media screen and (max-width: 790px) {
-            .title {
+          .social_shortcut {
+            display: none;
+          }
+
+          @include media-tablet {
+            .social_title {
+              display: none;
+            }
+
+            .social_shortcut {
+              display: inline-block;
+            }
+          }
+
+          @include media-mobile {
+            .social_shortcut {
              display: none;
            }
          }
        }

+        @include media-mobile {
+          padding-right: 0;
+        }
+
        &:last-child {
          margin-right: 0;
        }
      }
+    }

-      @media screen and (max-width: 500px) {
-        padding-right: 15px;
-      }
-    }
-    @media screen and (max-width: 500px) {
+    @include media-tablet {
      padding: 0;
    }
  }

-  @media screen and (max-width: 500px) {
+  @include media-mobile {
    padding: 15px 0;
  }
 }
@@ -93,8 +111,8 @@ export default {
  data () {
    return {
      socialLinks: [
-        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube' },
-        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku' }
+        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
+        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
      ]
    }
  }
--- a/src/components/GhostButton.vue
+++ b/src/components/GhostButton.vue
@@ -19,42 +19,9 @@ export default {
 </script>

 <style lang="scss" scoped>
-$btn-gray-color: #4f4f4f;
+@import "scss/btn";

 .btn {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 10px;
-  background-color: transparent;
-  color: $btn-gray-color;
-  font-size: 1.2em;
-  border: unset;
-
-  .icon {
-    margin-right: 10px;
-    font-size: 1.3em;
-  }
-
-  &:hover {
-    &::after {
-      width: 98%;
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0 auto;
-    width: 30%;
-    height: 2px;
-    background-color: $btn-gray-color;
-    transform: translateY(2px);
-    transition: width .3s linear;
-  }
+  @include ghost-button();
 }
 </style>
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -18,6 +18,8 @@
 </template>

 <style lang="scss" scoped>
+@import "scss/media";
+
 .sub-page > .container .nav-btn,
 .sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
  color: #8D8D8D;
@@ -89,10 +91,13 @@
      }
    }
  }
-  @media screen and (max-width: 600px) {
+  @include media-tablet {
+    margin-left: 0;
+
    .nav-btn {
      display: block;
    }
+
    .site-menu {
      display: none;
      width: 100%;
@@ -110,12 +115,13 @@
        line-height: 2em;
      }
    }
+
    .menu-clicked {
      display: block;
    }
  }
 }
-@media screen and (max-width: 600px) {
+@include media-tablet {
  .container {
    justify-content: space-between;
  }
@@ -166,7 +172,7 @@ export default {
        }
      ],
      clicked: false,
-      publicPath: process.env.BASE_URL
+      publicPath: process.env.VUE_APP_BASE_URL + '/'
    }
  },
  computed: {
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -5,13 +5,12 @@
      <div class="project"
           v-for="project in projects"
           :key="project.title.slug">
-        <img class="project-image" :src="project.image" :alt="project.title" />
-        <div class="project-content">
-          <h3 class="title">{{ project.title }}</h3>
-          <div class="release">{{ project.version }}</div>
-          <div class="description">
-            <p>{{ project.short_description }}</p>
-          </div>
+        <img v-if="project.images.small" class="project_image" :src="project.images.small" :alt="project.title" />
+        <img v-else-if="project.images.large" class="project_image" :src="project.images.large" :alt="project.title" />
+        <div class="project_content">
+          <h3 class="project_title">{{ project.title }}</h3>
+          <div class="project_release">{{ project.version }}</div>
+          <div class="project_description" v-html="markdownToText(project)"></div>
        </div>
        <div class="more-button">
          <base-btn has-icon
@@ -26,6 +25,8 @@
 </template>

 <style lang="scss">
+@import "scss/media";
+
 .projects {
  padding-top: 45px;
  padding-bottom: 45px;
@@ -48,27 +49,28 @@
      border-radius: 5px;
      animation: load-project 2s forwards;

-      .project-image {
+      .project_image {
        grid-area: image;
        width: 200px;
        height: 200px;
        object-fit: cover;
+        object-position: top center;
      }

-      .project-content {
+      .project_content {
        grid-area: content;
        padding: 10px 15px;
        height: 200px;
        overflow-y: hidden;
        position: relative;

-        .title {
+        .project_title {
          font-size: 1.3em;
          font-weight: normal;
          line-height: 1.5em;
        }

-        .release {
+        .project_release {
          font-size: .9em;
          font-weight: bold;
          padding: 5px 0;
@@ -90,7 +92,7 @@
      }
    }

-    @media screen and (min-width: 900px) {
+    @include media-tablet(true) {
      .project {
        .more-button {
          display: flex;
@@ -109,6 +111,7 @@
          &:hover {
            background: rgba(0, 0, 0, .3);
            border-radius: 5px;
+
            .btn {
              display: flex;
              color: white;
@@ -122,18 +125,17 @@
      }
    }

-    @media screen and (max-width: 900px) {
+    @include media-small {
      .project {
        display: block;

-        .project-image {
+        .project_image {
          width: 100%;
          height: 250px;
        }

-        .project-content {
-          height: auto;
-          max-height: 250px;
+        .project_content {
+          height: 125px;
        }

        .more-button {
@@ -143,6 +145,7 @@
          height: auto;
          left: unset;
          top: unset;
+
          .btn {
            display: flex;
            width: 100%;
@@ -166,7 +169,7 @@
  }
 }

-@media screen and (max-width: 600px) {
+@include media-tablet {
  .projects .container {
    grid-template-columns: 1fr;
    padding: 25px;
@@ -178,6 +181,7 @@

 <script>
 import BaseButton from './BaseButton'
+import { marked } from 'marked'

 export default {
  name: 'SelectedProjects',
@@ -188,12 +192,19 @@ export default {
    const header = {
      title: this.$route.meta.title,
      description: [
-        'Witam Państwa na podstronie z moimi projektami!',
-        'Lista i treść jest niekompletna! (BETA)'
+        'Witam Państwa na podstronie z moimi projektami!'
      ]
    }
    this.$store.commit('setHeader', header)
  },
+  methods: {
+    markdownToText (project) {
+      const projectText = marked.parse(project.description)
+      const nodeElement = document.createElement('div')
+      nodeElement.innerHTML = projectText
+      return nodeElement.querySelector('p').innerText.substr(0, 350)
+    }
+  },
  props: {
    projects: {
      type: Array
--- a/src/components/sections/About.vue
+++ b/src/components/sections/About.vue
@@ -28,6 +28,8 @@
 </template>

 <style lang="scss">
+@import "scss/media";
+
 .about {
  background-color: var(--gray-color) !important;

@@ -66,7 +68,7 @@
             margin-right: 0;
           }

-           @media screen and (max-width: 600px) {
+           @include media-tablet {
             margin: 0 auto 15px;

             &:last-child {
@@ -75,18 +77,18 @@
           }
         }

-         @media screen and (max-width: 900px) {
+         @include media-small {
           justify-content: center;
           margin-bottom: 25px;
         }

-         @media screen and (max-width: 600px) {
+         @include media-tablet {
           display: block;
           margin-bottom: 25px;
         }
       }

-       @media screen and (max-width: 400px) {
+       @include media-mobile() {
         .buttons .btn,
         .buttons a {
           min-width: unset;
@@ -110,7 +112,7 @@
       }
     }
  }
-  @media (max-width: 900px) {
+  @include media-small {
    #grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
@@ -126,7 +128,7 @@ import BaseButton from '../BaseButton'
 export default {
  data () {
    return {
-      publicPath: process.env.BASE_URL
+      publicPath: process.env.VUE_APP_BASE_URL + '/'
    }
  },
  methods: {
--- a/src/components/sections/Experiences.vue
+++ b/src/components/sections/Experiences.vue
@@ -159,6 +159,8 @@ export default {
 </script>

 <style lang="scss">
+@import "scss/media";
+
 .experiences {
  .container {
    padding-top: 45px;
@@ -212,13 +214,13 @@ export default {
        }
      }

-      @media screen and (max-width: 1100px) {
+      @include media-small {
        grid-template-columns: repeat(3, 1fr);
      }
-      @media screen and (max-width: 800px) {
+      @include media-tablet {
        grid-template-columns: repeat(2, 1fr);
      }
-      @media screen and (max-width: 550px) {
+      @include media-mobile {
        grid-template-columns: repeat(1, 1fr);
      }
    }
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -8,7 +8,7 @@
    </projects>
    <div class="more-button">
      <GhostButton @click.native="$router.push('projects')">
-        RESZTA PROJEKTÓW
+        ZOBACZ WIĘCEJ
      </GhostButton>
    </div>
  </section>
@@ -22,7 +22,7 @@ export default {
  name: 'FavoriteProjects',
  data () {
    return {
-      publicPath: process.env.BASE_URL,
+      publicPath: process.env.VUE_APP_BASE_URL + '/',
      select_projects: []
    }
  },
@@ -31,7 +31,7 @@ export default {
  },
  methods: {
    loadProjectList () {
-      fetch('https://api.kamilcraft.com/projects/category/selected')
+      fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
        .then(response => response.json())
        .then(data => {
          this.select_projects = data
@@ -57,12 +57,12 @@ export default {
    .btn {
      margin: 0 auto;

-      @media screen and (max-width: 600px) {
+      @include media-tablet {
        width: 100%;
      }
    }

-    @media screen and (max-width: 600px) {
+    @include media-tablet {
      padding: 0 25px;
    }
  }
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="contact-container" style="flex-basis: 500px;">
-    <div class="message-status"></div>
-    <header class="head">Formularz kontaktowy:</header>
+  <div class="contact_container">
+    <div class="message"></div>
+    <header class="container_head">Formularz kontaktowy:</header>
    <form id="form-point" @submit="formSubmit">
-      <input v-model="emailValue" class="contact-input" type="text" name="email" placeholder="Twój adres e-mail." />
-      <textarea v-model="messageValue" class="contact-input" name="message" placeholder="Twoja wiadomość."></textarea>
-      <input v-model="senderValue" class="contact-input" type="text" name="sender" placeholder="Twój podpis." />
-      <input :disabled="buttonDisabled" class="contact-input" type="submit" value="Wyślij"/>
+      <input v-model="emailValue" class="contact_input" type="text" name="email" placeholder="Twój adres e-mail." />
+      <textarea v-model="messageValue" class="contact_input" name="message" placeholder="Twoja wiadomość."></textarea>
+      <input v-model="senderValue" class="contact_input" type="text" name="sender" placeholder="Twój podpis." />
+      <base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn>
    </form>
  </div>
 </template>

 <script>
+import BaseButton from '../../BaseButton'
+
 function emailValidate (mailObj) {
  const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
  return !!mailObj.value.match(mailFormat)
@@ -43,41 +45,44 @@ export default {
      senderValue: ''
    }
  },
+  components: {
+    'base-btn': BaseButton
+  },
  watch: {
    emailValue (value) {
      if (this.statusError > 0 && emailValidate(this.email)) {
-        this.email.classList.remove('error')
+        this.email.classList.remove('contact_input-error')
      }
    },
    messageValue (value) {
      if (this.statusError > 0 && value !== '') {
-        this.message.classList.remove('error')
+        this.message.classList.remove('contact_input-error')
      }
    },
    senderValue (value) {
      if (this.statusError > 0 && value !== '') {
-        this.sender.classList.remove('error')
+        this.sender.classList.remove('contact_input-error')
      }
    }
  },
  methods: {
    clearErrors () {
      this.statusError = 0
-      this.email.classList.remove('error')
-      this.message.classList.remove('error')
-      this.sender.classList.remove('error')
+      this.email.classList.remove('contact_input-error')
+      this.message.classList.remove('contact_input-error')
+      this.sender.classList.remove('contact_input-error')
    },
    checkForm () {
      if (!emailValidate(this.email)) {
-        this.email.classList.add('error')
+        this.email.classList.add('contact_input-error')
        this.statusError++
      }
      if (this.message.value === '') {
-        this.message.classList.add('error')
+        this.message.classList.add('contact_input-error')
        this.statusError++
      }
      if (this.sender.value === '') {
-        this.sender.classList.add('error')
+        this.sender.classList.add('contact_input-error')
        this.statusError++
      }
    },
@@ -91,8 +96,8 @@ export default {
      this.clearErrors()
      this.checkForm()

-      const messageElement = document.querySelector('.message-status')
-      messageElement.classList.remove('message-status__ok', 'message-status__error')
+      const messageElement = document.querySelector('.message')
+      messageElement.classList.remove('message_ok', 'message_error')

      if (this.statusError === 0) {
        this.buttonDisabled = true
@@ -102,7 +107,7 @@ export default {
          sender: this.senderValue
        }).then(result => {
          messageElement.classList.add(
-            result.error ? 'message-status__error' : 'message-status__ok'
+            result.error ? 'message_error' : 'message_ok'
          )

          messageElement.textContent = result.message
@@ -113,7 +118,7 @@ export default {
          }
          this.buttonDisabled = false
        }).catch(() => {
-          messageElement.classList.add('message-status__error')
+          messageElement.classList.add('message_error')
          messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
          this.buttonDisabled = false
        })
@@ -124,29 +129,33 @@ export default {
 </script>

 <style lang="scss" scoped>
-.contact-container {
-  margin: 10px;
-  max-width: 500px;
-  background-color: #eaeaea;
-  border: 2px solid #dadada;
-  border-radius: 2px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+@import "scss/media";

-  header.head {
-    padding: 10px;
-    line-height: 1.6em;
-    font-size: 1.3em;
-    font-weight: bold;
-  }
+.contact_container {
+  flex-basis: 500px;

-  form#form-point {
+  #form-point {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
-}
-.contact-container input, .contact-container textarea {
+
+  .btn {
    width: 97%;
+    margin: 0 20px 5px;
+  }
+}
+
+.container_head {
+  padding: 10px;
+  line-height: 1.6em;
+  font-size: 1.3em;
+  font-weight: bold;
+}
+
+.contact_container input, .contact_container textarea {
+  width: 97%;
+  max-width: 97%;
  border: 0;
  border-bottom: 2px solid #c9c9c9;
  padding: 10px 10px 8px;
@@ -156,64 +165,54 @@ export default {
  margin-bottom: 10px;
  border-radius: 5px;
 }
-input.contact-input:focus, textarea.contact-input:focus {
+
+.contact_input:focus, .contact_input:focus {
  outline: none;
  border-color: black;
 }
-textarea.contact-input {
+
+textarea.contact_input {
  max-width: 97%;
  min-width: 97%;
  min-height: 150px;
 }
-input.error, textarea.error {
+
+.contact_input-error, .contact_input-error {
  background-color: #ffc3b0;
  border-color: #ff865f;
  color: #c90000;
 }
-input.error::placeholder, textarea.error::placeholder {
+
+.contact_input-error::placeholder, .contact_input-error::placeholder {
  color: #c9000094;
 }
-input[type="submit"].contact-input {
-  appearance: unset;
-  color: white;
-  background-color: #4CAF50;
-  border-bottom: 2px solid #387d3b;
-}
-input[type="submit"].contact-input:hover {
-  box-shadow: 0 0 8px rgba(0,0,0,.4);
-}
-input[disabled].contact-input {
+
+input[disabled].contact_input {
  background-color: #cdcdcd;
  border-color: gray;
  color: black;
 }
-.message-status {
+
+.message {
  display: none;
  margin: 5px;
  padding: 8px;
  border-radius: 5px;
 }
-.message-status__ok, .message-status__error {
+
+.message_ok, .message_error {
  display: block;
 }
-.message-status__ok {
+
+.message_ok {
  background-color: #4CAF50;
  border: 1px solid #387d3b;
  color: white;
 }
-.message-status__error {
+
+.message_error {
  background-color: #ffc3b0;
  border: 1px solid #ff865f;
  color: #c90000;
 }
-@media screen and (max-width: 800px) {
-  .contact-elements {
-    display: block;
-    width: auto;
-  }
-  #instagram, #facebook, #twitter, #email, #gg {
-    font-size: 1em;
-    line-height: 1.2em;
-  }
-}
 </style>
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,25 +1,43 @@
 <template>
-  <div class="contact-container" style="flex-basis: 410px">
-    <header class="head">Inne formy kontaktu:</header>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/instagram.jpg" />
-      <span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span>
+  <div class="contact_info">
+    <header class="info_head">Inne formy kontaktu:</header>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/instagram.jpg" />
+      <span id="instagram" class="contact_element_text">
+        <a href="https://www.instagram.com/nikcamii/"
+           target="_blank"
+           rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a>
+      </span>
    </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/facebook.jpg" />
-      <span id="facebook"><a href="https://www.facebook.com/nikcamii/" target="_blank">Facebook: @NiKCamii</a></span>
+    <div class="contact_element">
+      <img class="contact_element_icon" src="/assets/img/facebook.jpg" />
+      <span id="facebook" class="contact_element_text">
+        <a href="https://www.facebook.com/nikcamii/"
+           target="_blank"
+           rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a>
+      </span>
    </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/twitter.jpg" />
-      <span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/twitter.jpg" />
+      <span id="twitter" class="contact_element_text">
+        <a href="https://twitter.com/nikcamii"
+           target="_blank"
+           rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a>
+      </span>
    </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/gg.png" />
-      <span id="gg">GG: 38429969</span>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/gg.png" />
+      <span id="gg" class="contact_element_text">GG: 38429969</span>
    </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/user.jpg" />
-      <span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/user.jpg" />
+      <span id="email" class="contact_element_text">
+        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
+      </span>
    </div>
  </div>
 </template>
@@ -31,28 +49,20 @@ export default {
 </script>

 <style lang="scss" scoped>
-.contact-container {
-  margin: 10px;
-  max-width: 500px;
-  background-color: #eaeaea;
-  border: 2px solid #dadada;
-  border-radius: 2px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+@import "scss/media";

-  header.head {
+.contact_info {
+  flex-basis: 410px;
+}
+
+.info_head {
  padding: 10px;
  line-height: 1.6em;
  font-size: 1.3em;
  font-weight: bold;
-  }
-
-  form#form-point {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
 }
-.contact-element {
+
+.contact_element {
  display: flex;
  align-items: center;
  padding: 5px;
@@ -71,22 +81,22 @@ export default {
      text-decoration: underline;
    }
  }
-}

-.contact-element-icon {
+  &_icon {
    border-radius: 50%;
    border: 1px solid #e2e2e2;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    object-fit: contain;
-}
+  }

-#instagram, #facebook, #twitter, #email, #gg {
+  &_text{
    padding-top: 2px;
    line-height: 1.6em;
    font-size: 1.1em;
    font-weight: bold;
+  }
 }

 #instagram {
@@ -110,4 +120,11 @@ export default {
 #gg {
  color: #ffa214;
 }
+
+@include media-tablet {
+  #instagram, #facebook, #twitter, #email, #gg {
+    font-size: 1em;
+    line-height: 1.2em;
+  }
+}
 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -64,13 +64,16 @@ const routes = [
  {
    path: '*',
    name: '404',
+    meta: {
+      title: 'Błąd 404'
+    },
    component: NotFound
  }
 ]

 const router = new VueRouter({
  mode: 'history',
-  base: process.env.BASE_URL ?? '/',
+  base: '/',
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -25,7 +25,7 @@ const moduleSettings = {
  },
  actions: {
    fetchProjects (store) {
-      return fetch('https://api.kamilcraft.com/projects')
+      return fetch(process.env.VUE_APP_API_URL + '/projects')
        .then(response => response.json())
        .then(data => {
          store.commit('setProjects', data)
@@ -33,7 +33,7 @@ const moduleSettings = {
        })
    },
    fetchCategories (store) {
-      return fetch('https://api.kamilcraft.com/categories')
+      return fetch(process.env.VUE_APP_API_URL + '/categories')
        .then(response => response.json())
        .then(data => {
          store.commit('setCategories', data)
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -15,7 +15,10 @@
      </p>
      <h3>Kursy</h3>
      <p>W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
-        <a :href="publicPath + 'download/certyfikat-laravel.pdf'"><strong>Architektura aplikacji internetowych opartych o framework Laravel</strong></a>.</p>
+        <strong><a :href="publicPath + 'download/certyfikat-laravel.pdf'"
+                   target="_blank"
+                   rel="noopener nofollow noreferrer">
+          Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.</p>
      <p>Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
        wiedzy o nowe doświadczenia.</p>
      <h2>Moje zainteresowania</h2>
@@ -60,7 +63,7 @@ export default {
  name: 'About',
  data () {
    return {
-      publicPath: process.env.BASE_URL
+      publicPath: process.env.VUE_APP_BASE_URL + '/'
    }
  },
  mounted () {
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -28,7 +28,9 @@ export default {
 </script>

 <style lang="scss">
-  .contact {
+@import "scss/media";
+
+.contact {
  padding: 25px 0;

  .container {
@@ -37,12 +39,21 @@ export default {
    justify-content: center;
  }

-    @media screen and (max-width: 940px) {
+  .contact_container, .contact_info {
+    margin: 10px;
+    max-width: 500px;
+    background-color: #eaeaea;
+    border: 2px solid #dadada;
+    border-radius: 2px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+  }
+
+  @include media-tablet {
    .container {
      display: block;
      margin: 0 auto;

-        .contact-container {
+      .contact_container, .contact_info {
        margin: 0 auto 25px;
        &:last-child {
          margin-bottom: 0;
@@ -50,14 +61,14 @@ export default {
      }
    }
  }
-    @media screen and (max-width: 640px) {
+  @include media-mobile {
    .container {
      padding: 0 10px;

-        .contact-container {
+      .contact_container {
        max-width: unset;
      }
    }
  }
-  }
+}
 </style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -15,7 +15,7 @@ export default {
  name: 'Home',
  data () {
    return {
-      publicPath: process.env.BASE_URL,
+      publicPath: process.env.VUE_APP_BASE_URL + '/',
      select_projects: []
    }
  },
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,35 +1,37 @@
 <template>
  <section class="project" v-if="project">
-    <header class="project-header">
+    <header class="project_header">
      <h1>{{ project.title }}</h1>
-      <ul class="project-info">
-        <li class="info-text">
+      <ul class="project_info">
+        <li class="info_text">
          <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
-          <span>{{ project.release_data }}</span>
+          <span>{{ project.release_date }}</span>
        </li>
-        <li class="info-text">
+        <li class="info_text">
          <font-awesome-icon class="icon" :icon="['far', 'user']"/>
          <span>{{ project.author }}</span>
        </li>
-        <li class="info-text">
+        <li class="info_text">
          <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
          <span>{{ getCategoryName(project.categories)[0] }}</span>
        </li>
-        <li class="info-text">
+        <li class="info_text">
          <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
-          <span>{{ project.version }}</span>
+          <span>{{ project.project_version }}</span>
+        </li>
+        <li class="info_text" v-if="project.project_url">
+          <font-awesome-icon class="icon" :icon="['fas', 'link']"/>
+          <span><a :href="project.project_url"
+                  target="_blank"
+                  rel="noopener nofollow noreferrer">Link</a></span>
        </li>
      </ul>
    </header>
    <div class="container">
      <component :is="`figure`" class="project-photo">
-        <img :src="`${publicPath}${project.image}`" :alt="project.title">
+        <img :src="`${project.images.large}`" :alt="project.title">
      </component>
-      <div class="content">
-        <p v-for="(description, key) in project.description.split('\n')" :key="key">
-          {{ description }}
-        </p>
-      </div>
+      <div class="content" v-html="markdownToHtml"></div>
    </div>
  </section>
  <div v-else class="loading">
@@ -38,6 +40,8 @@
 </template>

 <script>
+import { marked } from 'marked'
+
 export default {
  name: 'Project',
  data () {
@@ -55,6 +59,9 @@ export default {
  computed: {
    getCategories () {
      return this.$store.getters.getCategories
+    },
+    markdownToHtml () {
+      return marked.parse(this.project.description)
    }
  },
  methods: {
@@ -69,7 +76,7 @@ export default {
      return categoriesText
    },
    loadProject (id) {
-      fetch('https://api.kamilcraft.com/projects/' + id)
+      fetch(process.env.VUE_APP_API_URL + '/project/' + id)
        .then(response => response.json())
        .then(data => {
          this.project = data
@@ -79,11 +86,11 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
@import "scss/default";

 .project {
-  .project-header {
+  .project_header {
    @extend .container;
    text-align: center;
    margin-bottom: 25px;
@@ -94,12 +101,12 @@ export default {
      line-height: 2.4em;
    }

-    .project-info {
+    .project_info {
      display: flex;
      list-style: none;
      justify-content: center;

-      .info-text {
+      .info_text {
        display: flex;
        align-items: center;

@@ -109,13 +116,14 @@ export default {

        span {
          font-weight: lighter;
+          white-space: nowrap;
        }

        &:not(&:last-child) {
          margin-right: 15px;
        }
      }
-      @media screen and (max-width: 560px) {
+      @include media-tablet {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 15px;
@@ -147,16 +155,72 @@ export default {
    .content {
      margin: 35px 0;

-      p {
-        text-align: justify;
-        text-indent: 1.5em;
-        line-height: 1.8em;
+      a {
+        color: #8D8D8D;

-        @media screen and (max-width: 600px) {
-          font-size: 1em;
+        &:hover {
+          color: #A2CF00;
+        }
+      }
+
+      h2, h3 {
+        margin-top: 15px;
+        margin-bottom: 5px;
+      }
+
+      h2:first-of-type {
+        margin-top: 0;
+      }
+
+      h2 {
+        font-size: 1.6em;
+      }
+
+      h3 {
+        font-size: 1.4em;
+      }
+
+      p, ol li, ul li {
+        line-height: 1.8em;
+        font-size: 1.1em;
+
+        @include media-tablet {
+          font-size: 1.2em;
          line-height: 1.5em;
        }
      }
+
+      p + ol, p + ul, p + blockquote {
+        margin-top: -10px;
+      }
+
+      ol, ul {
+        margin-bottom: 10px;
+        padding-inline-start: 2.1em;
+
+        li img {
+          display: block;
+          width: 100%;
+          padding: 0 5px 5px;
+          margin-top: .9em;
+        }
+      }
+
+      p {
+        margin-bottom: 10px;
+        text-align: justify;
+        /* text-indent: 1.5em; */
+      }
+
+      blockquote {
+        padding-left: 25px;
+        margin-left: 1.3em;
+        border-left: 1px solid rgb(116, 116, 116);
+
+        p {
+          text-indent: unset;
+        }
+      }
    }
  }
 }
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,11 +1,11 @@
 <template>
  <div>
-    <div class="category-menu">
+    <div class="project_categories">
      <ul class="categories">
-        <li class="category"
+        <li class="categories_element"
            v-for="category in getCategories"
            :key="category.slug"
-            :class="{ 'category-active': categories.active === category.slug }"
+            :class="{ 'categories_element-active': categories.active === category.slug }"
            @click="changeCategory(category.slug)">
          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
        </li>
@@ -13,13 +13,15 @@
    </div>
    <projects :projects="projects" />
    <div v-if="projects.length === 0" class="loading">
-      <div class="loading-animation"></div>
+      <div class="loading_animation"></div>
    </div>
  </div>
 </template>

 <style lang="scss">
-.category-menu {
+@import "scss/media";
+
+.project_categories {
  padding-top: 45px;

  .categories {
@@ -27,7 +29,7 @@
    justify-content: center;
    list-style: none;

-    .category {
+    .categories_element {
      position: relative;
      cursor: pointer;
      margin-right: 25px;
@@ -59,7 +61,7 @@
        }
      }

-      @media screen and (max-width: 450px) {
+      @include media-mobile {
        margin-right: 15px;
      }
    }
@@ -100,7 +102,7 @@ export default {
      categories: {
        active: 'all'
      },
-      publicPath: process.env.BASE_URL,
+      publicPath: process.env.VUE_APP_BASE_URL + '/',
      projects: []
    }
  },
@@ -120,9 +122,9 @@ export default {
    async loadAllData () {
      await this.$store.dispatch('fetchCategories')
      await this.$store.dispatch('fetchProjects').then(projects => {
-        projects.sort((firstProduct, secondProduct) => {
+        /* projects.sort((firstProduct, secondProduct) => {
          return secondProduct.id - firstProduct.id
-        })
+        }) */
        this.projects = projects
      }).catch(error => {
        console.log(error)
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,6 @@
 module.exports = {
-  publicPath: process.env.NODE_ENV === 'production'
-    ? '/beta/'
-    : '/'
+  publicPath: '/',
+  devServer: {
+    disableHostCheck: true
+  }
 }
Author	SHA1	Message	Date
Kamil Niemczycki	a8b9dde13e	updated dependencies	2022-07-12 15:20:06 +02:00
Kamil Niemczycki	0bd0d31947	Small style update	2022-02-22 19:10:32 +01:00
Kamil Niemczycki	cf410d1ac3	Updated favicon	2022-02-22 19:10:05 +01:00
Kamil Niemczycki	7d3531f058	Public path changed	2022-02-18 09:55:31 +01:00
Kamil Niemczycki	b195b35c68	Design updated for future API update	2022-02-17 22:57:17 +01:00
Kamil Niemczycki	519bad5689	Variables for the API have been updated	2022-02-16 13:21:35 +01:00
Kamil Niemczycki	04ad8334ba	Overridden inherited hover for ghost button	2022-01-06 11:23:48 +01:00
Kamil Niemczycki	39da77cf4c	Style for the ghost button has been changed	2022-01-06 11:16:23 +01:00
Kamil Niemczycki	769fd6ae7d	Fixed style for mobile devices	2022-01-06 10:51:51 +01:00
Kamil Niemczycki	24415e7743	Updated footer style	2022-01-06 10:20:32 +01:00
Kamil Niemczycki	6c890d03d6	RWD fix for the home page	2022-01-06 01:04:14 +01:00
Kamil Niemczycki	8f3649d141	Style update to contact page	2022-01-06 00:53:37 +01:00
Kamil Niemczycki	76d8e59f40	Unification for RWD has been added	2022-01-05 23:21:35 +01:00
Kamil Niemczycki	f3e7b18c34	Improving the button style	2022-01-05 16:38:35 +01:00
Kamil Niemczycki	49c153ee38	Tag changed from div to main	2022-01-05 12:12:51 +01:00
Kamil Niemczycki	28aab6a68b	Target link added	2022-01-05 12:10:55 +01:00
Kamil Niemczycki	423e610b1a	Disable host check for dev server has been added to vue config	2022-01-05 11:58:22 +01:00