init test branch

2023-07-02 21:02:20 +02:00 · 2023-07-02 21:02:20 +02:00 · 2ce394553e
commit 2ce394553e
53 changed files with 22704 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,3 @@
+VUE_APP_TITLE=kamilcraft.com
+VUE_APP_BASE_URL=http://127.0.0.1
+VUE_APP_API_URL=https://api.kamilcraft.com
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,25 @@
+# kamilcraft.com
+Project of my website - portfolio
+The project uses the [API](https://github.com/kamilniemczycki/kamilcraft-api) at https://api.kamilcraft.com
+
+## Dependency installation
+```
+npm install --legacy-peer-deps
+```
+
+### Development
+```
+npm run serve
+```
+Application should be available under `127.0.0.1:8080` or `localhost:8080`.
+
+### Compilation
+```
+npm run build
+```
+The executable files should be in the `dist` folder.
+
+### Code formatting
+```
+npm run lint
+```
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/css/index.css
+++ b/css/index.css
@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --color-kamilcraft-green: 162 207 0;
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,51 @@
+{
+  "name": "kamilcraft.com",
+  "version": "1.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
+    "core-js": "^3.26.1",
+    "marked": "^4.2.4",
+    "vue": "^3.2.45",
+    "vue-meta": "^2.4.0",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.29.0",
+    "eslint-plugin-vue": "^9.8.0",
+    "postcss": "^8.4.20",
+    "sass": "^1.56.2",
+    "sass-loader": "^13.2.0",
+    "tailwindcss": "^3.2.4"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@ -0,0 +1,9 @@
+:root {
+    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
--- a/public/assets/img/facebook.jpg
+++ b/public/assets/img/facebook.jpg
--- a/public/assets/img/gg.png
+++ b/public/assets/img/gg.png
--- a/public/assets/img/instagram.jpg
+++ b/public/assets/img/instagram.jpg
--- a/public/assets/img/projects/edward.jpg
+++ b/public/assets/img/projects/edward.jpg
--- a/public/assets/img/projects/kamilcraft.jpg
+++ b/public/assets/img/projects/kamilcraft.jpg
--- a/public/assets/img/twitter.jpg
+++ b/public/assets/img/twitter.jpg
--- a/public/assets/img/user.jpg
+++ b/public/assets/img/user.jpg
--- a/public/assets/logo.png
+++ b/public/assets/logo.png
--- a/public/assets/me.jpg
+++ b/public/assets/me.jpg
--- a/public/download/certyfikat-laravel.pdf
+++ b/public/download/certyfikat-laravel.pdf
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="pl">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <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="<%= 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>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/scss/_all.scss
+++ b/scss/_all.scss
@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@ -0,0 +1,111 @@
+@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;
+
+  @apply border-4 rounded-md;
+  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);
+
+  &[disabled] {
+    opacity: .7;
+  }
+
+  &:hover:not([disabled]) {
+    $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:not([disabled]) {
+    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
@ -0,0 +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/_root.scss
+++ b/scss/_root.scss
@ -0,0 +1,9 @@
+@import "colors";
+
+:root {
+  --font-family: 'Roboto', sans-serif;;
+  --dark-gray-color: #{$dark-gray};
+  --gray-color: #{$gray};
+  --text-color: #{$text-color};
+  --bg-color: #{$bg-color};
+}
--- a/scss/default.scss
+++ b/scss/default.scss
@ -0,0 +1,48 @@
+@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;
+
+  @include media-large {
+    padding: 0 10px;
+  }
+
+  @include media-small {
+    padding: 0 20px;
+  }
+}
+
+.loading {
+  height: 200px;
+
+  .loading_animation {
+    margin: 20px auto;
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 10px #A2CF00 solid;
+    border-radius: 50%;
+    animation: loading-animation 1s linear infinite;
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,23 @@
+<template>
+  <SiteHeader />
+  <main
+    rel="main"
+  >
+    <RouterView />
+  </main>
+  <FooterComponent />
+</template>
+
+<script setup>
+import SiteHeader from '@/components/SiteHeader'
+import FooterComponent from '@/components/FooterComponent'
+</script>
+
+<style lang="scss">
+#app {
+  font-family: var(--font-family);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--text-color);
+}
+</style>
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@ -0,0 +1,53 @@
+<template>
+  <footer class="bg-neutral-800 py-8">
+    <div class="flex items-center justify-between max-w-screen-xl mx-auto">
+      <div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
+        Kamil<span class="text-kamilcraft-green">Craft</span>
+      </div>
+      <ul class="flex gap-5 pr-3 text-lg">
+        <li
+          v-for="link in socialLinks"
+          :key="link.title.slug"
+        >
+          <a
+            class="text-neutral-400 hover:text-neutral-500"
+            :href="link.link"
+            :title="link.title"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+          >
+            <FontAwesomeIcon
+              class="mr-1"
+              :icon="['fab', link.icon]"
+            />
+            <span class="hidden lg:inline-block">{{ link.title }}</span>
+            <span class="hidden sm:inline-block lg:hidden">{{ link.shortcut }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+const socialLinks = [
+  {
+    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'
+  },
+  {
+    link: 'https://github.com/kamilniemczycki/kamilcraft.com',
+    icon: 'github',
+    title: 'Kod na GitHub',
+    shortcut: 'GitHub'
+  }
+]
+</script>
--- a/src/components/NavigationHeader.vue
+++ b/src/components/NavigationHeader.vue
@ -0,0 +1,136 @@
+<template>
+  <div
+    class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
+    :class="{ 'clicked-menu': isClicked }"
+  >
+    <RouterLink to="/">
+      <div
+        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
+        :class="{ 'clicked-logo': isClicked }"
+        @click="linkClicked"
+      >
+        Kamil<span class="text-kamilcraft-green">Craft</span>
+      </div>
+    </RouterLink>
+    <nav>
+      <button
+        class="md:hidden text-3xl mx-5"
+        :class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
+        title="Menu"
+        @click="clickMenu"
+      >
+        <font-awesome-icon
+          v-if="!isClicked"
+          icon="bars"
+        />
+        <font-awesome-icon
+          v-else
+          icon="times"
+        />
+      </button>
+      <ul
+        :class="[ isClicked ? 'absolute top-20 left-0 w-full z-10 text-3xl text-right bg-white shadow-lg' : 'hidden md:flex md:flex-row md:gap-9' ]"
+      >
+        <li
+          v-for="menuItem in menuItems"
+          :key="menuItem.slug"
+          :class="{ 'py-5 px-3 leading-6': isClicked }"
+          @click="linkClicked"
+        >
+          <RouterLink
+            v-slot="{ href, navigate, isActive }"
+            :to="menuItem.uri"
+            custom
+          >
+            <a
+              :href="href"
+              class="hover:text-kamilcraft-green"
+              :class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-kamilcraft-green' : 'text-gray-500') ]"
+              @click="navigate"
+            >
+              {{ menuItem.title }}
+            </a>
+          </RouterLink>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref, computed } from 'vue'
+
+defineProps({
+  isHomePage: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const menuItems = [
+  {
+    slug: 'start',
+    title: 'Start',
+    uri: '/'
+  },
+  {
+    slug: 'projects',
+    title: 'Projekty',
+    uri: '/projects'
+  },
+  {
+    slug: 'about',
+    title: 'O mnie',
+    uri: '/about'
+  },
+  {
+    slug: 'contact',
+    title: 'Kontakt',
+    uri: '/contact'
+  }
+]
+
+const clicked = ref(false)
+const isClicked = computed(() => clicked.value)
+
+function changeClickedStatus() {
+  clicked.value = !clicked.value
+}
+
+function clickMenu() {
+  changeClickedStatus()
+}
+
+function linkClicked() {
+  if (isClicked.value) {
+    changeClickedStatus()
+  }
+}
+</script>
+
+<style lang="scss">
+.clicked-menu {
+  animation: bg-menu-animation 500ms forwards ease-in-out;
+}
+
+.clicked-logo {
+  animation: bg-logo-animation 500ms forwards ease-in-out;
+}
+
+@keyframes bg-menu-animation {
+  0% {
+    background-color: transparent;
+  }
+  100% {
+    background-color: #EFEFEF;
+  }
+}
+@keyframes bg-logo-animation {
+  0% {
+    background-color: white;
+  }
+  100% {
+    background-color: #F6F6F6;
+  }
+}
+</style>
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@ -0,0 +1,152 @@
+<template>
+  <section
+    id="projects"
+    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
+  >
+    <slot />
+    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
+      <div
+        v-for="project in projects"
+        :key="project.title.slug"
+        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
+      >
+        <img
+          v-if="project.images.small"
+          class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
+          :src="project.images.small"
+          :alt="project.title"
+        >
+        <img
+          v-else-if="project.images.large"
+          class="project-image w-[12.5rem] h-[12.5rem] object-cover"
+          :src="project.images.large"
+          :alt="project.title"
+        >
+        <div class="project-content relative p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:top-0 after:w-full after:h-full">
+          <header class="pb-2">
+            <h3 class="text-lg font-bold">
+              {{ project.title }}
+            </h3>
+            <p class="text-sm">
+              {{ project.project_version }}
+            </p>
+          </header>
+          <p
+            class="text-sm"
+            v-html="markdownToText(project)"
+          />
+        </div>
+        <div
+          class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
+        >
+          <BaseButton
+            has-icon
+            icon="eye"
+            is-reverse
+            class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
+            title="Pokaż więcej"
+            @click="router.push({ name: 'Project', params: { id: project.id } })"
+          >
+            O projekcie
+          </BaseButton>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { defineProps, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import BaseButton from '@/components/buttons/BaseButton'
+import { marked } from 'marked'
+
+defineProps({
+  projects: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: [
+      'Witam Państwa na podstronie z moimi projektami!'
+    ]
+  }
+  store.commit('setHeader', header)
+})
+
+function markdownToText (project) {
+  const projectText = marked.parse(project.description)
+  const nodeElement = document.createElement('div')
+  nodeElement.innerHTML = projectText
+  return nodeElement.querySelector('p').innerText.substr(0, 350)
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'scss/media';
+
+.grid-project {
+  animation: load-project 2s forwards;
+
+  .project-image, .project-content {
+    object-position: top center;
+  }
+
+  .project-image {
+    grid-area: image;
+  }
+
+  .project-content {
+    grid-area: content;
+
+    &::after {
+      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
+    }
+  }
+}
+
+@screen lg {
+  .grid-project {
+    grid-template-areas: 'image content';
+    grid-template-columns: 200px 1fr;
+
+    .project-button {
+      .btn {
+        display: none;
+      }
+      &:hover {
+        background: rgba(0, 0, 0, .3);
+        border-radius: 5px;
+
+        .btn {
+          display: flex;
+
+          &:hover {
+            background-color: rgba(255, 255, 255, .9);
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes load-project {
+  from {
+    transform: translateY(20px);
+    opacity: .1;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@ -0,0 +1,54 @@
+<template>
+  <header :class="thisClass">
+    <Navigation :is-home-page="isHome" />
+    <div
+      v-if="isTitle"
+      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
+      :class="{ 'text-white': isHome }"
+    >
+      <h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
+        {{ getTitle }}
+      </h1>
+      <p v-if="isDescription && descriptionType === 'string'">
+        {{ getDescription }}
+      </p>
+      <p
+        v-for="(desc, key) in getDescription"
+        v-else-if="isDescription && descriptionType === 'array'"
+        :key="key"
+      >
+        {{ desc }}
+      </p>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import Navigation from '@/components/NavigationHeader'
+
+const store = useStore()
+const route = useRoute()
+
+const isHome = computed(() => route.path === '/')
+const thisClass = computed(() => [isHome.value ? 'home-page' : 'sub-page'])
+const getTitle = computed(() => store.getters.getHeader.title)
+const isTitle = computed(() => getTitle.value !== null)
+const getDescription = computed(() => store.getters.getHeader.description)
+const isDescription = computed(() => getDescription.value !== null)
+const descriptionType = computed(() => {
+  const isArray = getDescription.value instanceof Array
+  return isArray ? 'array' : typeof getDescription.value
+})
+</script>
+
+<style scoped>
+.home-page {
+  background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
+}
+.sub-page {
+  background-color: #EFEFEF;
+}
+</style>
--- a/src/components/buttons/BaseButton.vue
+++ b/src/components/buttons/BaseButton.vue
@ -0,0 +1,45 @@
+<template>
+  <button
+    class="btn"
+    :class="{ 'btn-reverse': isReverse }"
+    title="Wyślij wiadomość"
+  >
+    <font-awesome-icon
+      v-if="hasIcon && icon"
+      class="icon"
+      :icon="icon"
+    />
+    <slot />
+  </button>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  hasIcon: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  isReverse: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style lang="scss">
+@import 'scss/btn';
+
+.btn {
+  @include button($has-icon: true);
+}
+
+.btn-reverse {
+  @include button(true, true);
+}
+</style>
--- a/src/components/buttons/GhostButton.vue
+++ b/src/components/buttons/GhostButton.vue
@ -0,0 +1,33 @@
+<template>
+  <button class="btn">
+    <font-awesome-icon
+      v-if="hasIcon && icon"
+      class="icon"
+      :icon="icon"
+    />
+    <slot />
+  </button>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  hasIcon: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'scss/btn';
+
+.btn {
+  @include ghost-button();
+}
+</style>
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@ -0,0 +1,79 @@
+<template>
+  <div class="bg-neutral-50">
+    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+      <div
+        id="grid-columns"
+        class="flex flex-col md:grid items-center"
+      >
+        <div id="grid-content">
+          <h2 class="text-[2rem]">
+            Kamil Niemczycki
+          </h2>
+          <div class="mb-2 text-[1.5rem]">
+            Web Developer
+          </div>
+          <p>
+            Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+          </p>
+          <div class="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
+            <BaseButton
+              has-icon
+              icon="portrait"
+              is-reverse
+              @click="scrollTo('#projects')"
+            >
+              Wybrane projekty
+            </BaseButton>
+            <BaseButton
+              has-icon
+              icon="user"
+              @click="router.push('about')"
+            >
+              Więcej o mnie
+            </BaseButton>
+          </div>
+        </div>
+        <div id="grid-photo">
+          <figure>
+            <img
+              :src="`${publicPath}assets/me.jpg`"
+              class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
+              alt="Moje zdjęcie"
+            >
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import BaseButton from '@/components/buttons/BaseButton'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const publicPath = process.env.VUE_APP_BASE_URL + '/'
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
+}
+</script>
+
+<style lang="scss">
+#grid-columns {
+  grid-template-columns: 1fr 1fr .8fr;
+  grid-template-areas:
+    'text text photo';
+}
+
+#grid-content {
+  grid-area: text;
+}
+
+#grid-photo {
+  grid-area: photo;
+}
+</style>
--- a/src/components/sections/ExperiencesSection.vue
+++ b/src/components/sections/ExperiencesSection.vue
@ -0,0 +1,202 @@
+<template>
+  <div>
+    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+      <h2 class="text-[2rem] mb-2">
+        Wykorzystywane technologie
+      </h2>
+      <p class="mb-5">
+        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
+        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
+        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
+      </p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+        <div
+          v-for="(skill, skillKey) in list"
+          :key="skillKey"
+          class="p-4 bg-neutral-50 rounded-lg"
+        >
+          <header>
+            <div class="flex gap-2 text-3xl mb-2">
+              <font-awesome-icon
+                v-for="(icon, iconKey) in skill.icons"
+                :key="iconKey"
+                :class="icon.class"
+                :icon="['fab', icon.name]"
+                :alt="icon.alt"
+                :title="icon.title"
+              />
+            </div>
+            <h3 class="text-lg font-bold">
+              {{ skill.header }}
+            </h3>
+          </header>
+          <p
+            v-if="skill.showMore.value || skill.description.length < 200"
+            class="text-sm"
+          >
+            {{ skill.description }}
+          </p>
+          <p
+            v-else
+            class="text-sm"
+          >
+            {{ parseText(skill.description) }}...
+            <a
+              class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
+              @click="changeMoreStatus(skill)"
+            >Więcej</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+let list = [
+  {
+    icons: [
+      {
+        class: 'icon-php',
+        name: 'php',
+        alt: 'Ikona przedstawiająca język PHP',
+        title: 'Ikona PHP'
+      },
+      {
+        class: 'icon-laravel',
+        name: 'laravel',
+        alt: 'Ikona przedstawiająca framework Laravel',
+        title: 'Ikona Laravel'
+      }
+    ],
+    header: 'PHP & Laravel',
+    showMore: ref(false),
+    description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
+      przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
+      walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
+      w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-js',
+        name: 'js-square',
+        alt: 'Ikona przedstawiająca język JavaScript',
+        title: 'Ikona JavaScript'
+      }
+    ],
+    header: 'JavaScript Vanilla',
+    showMore: ref(false),
+    description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
+      przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-vue',
+        name: 'vuejs',
+        alt: 'Ikona przedstawiająca framework Vue.js',
+        title: 'Ikona Vue.js'
+      }
+    ],
+    header: 'Vue',
+    showMore: ref(false),
+    description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
+      wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
+      przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-html5',
+        name: 'html5',
+        alt: 'Ikona przedstawiająca HTML5',
+        title: 'Ikona HTML5'
+      },
+      {
+        class: 'icon-css3',
+        name: 'css3-alt',
+        alt: 'Ikona przedstawiająca CSS3',
+        title: 'Ikona CSS3'
+      }
+    ],
+    header: 'HTML & CSS',
+    showMore: ref(false),
+    description: `HTML i CSS to już nieodłączne technologie, które w łatwy sposób umożliwiają nadanie wizualnej
+      spójności dla treści, obrazów lub ułożenia elementów. Nie raz, odpowednie zaprojektowanie interfejsu użytkownika
+      przyspiesza integrację z naszą stroną/sklepem. Ma to przełożenie na zyski dla obu stron - firmy (finanse)
+      i klienta (czas).`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-node',
+        name: 'node',
+        alt: 'Ikona przedstawiająca Node.js',
+        title: 'Ikona Node.js'
+      }
+    ],
+    header: 'Node.js',
+    showMore: ref(false),
+    description: `Node jest wieloplatformowym środowiskiem uruchomieniowym, umożliwiającym uruchomienie kodu
+      JavaScript po stronie backendowej. Jest to bardzo przyjemny język, który ułatwia projektowanie logiki biznesowej
+      aplikacji, dla mniej wymagających serwisów pod względem analizy i przetwarzania danych.`
+  },
+  {
+    icons: [
+      {
+        class: 'icon-sass',
+        name: 'sass',
+        alt: 'Ikona przedstawiająca Sass',
+        title: 'Ikona Sass'
+      }
+    ],
+    header: 'Sass',
+    showMore: ref(false),
+    description: `Sass zwiększa czytelność kodu dla programisty. Zawiera abstrakcje znane z języków obiektowych,
+      przy czym ogranicza powtarzalność i umożliwia optymalizację kodu. Kompilacja napisanego stylu w Sass jest
+      przekształcana do formy czytelnej dla silnika graficznego przeglądarki, co przyspiesza proces generowania strony.`
+  }
+]
+
+function parseText(text) {
+  let shortText = text.substr(0, 200)
+  if (shortText.slice(-1) === ' ') {
+    shortText = text.substr(0, 199)
+  }
+  return shortText
+}
+
+function changeMoreStatus(skill) {
+  skill.showMore.value = !skill.showMore.value
+}
+</script>
+
+<style scoped>
+.icon-js {
+  color: #F1DE4F;
+}
+.icon-php {
+  color: #777bb3;
+}
+.icon-laravel {
+  color: #FF2D20;
+}
+.icon-vue {
+  color: #64B687;
+}
+.icon-html5 {
+  color: #DE6E3C;
+}
+.icon-node {
+  color: #64B687;
+}
+.icon-css3 {
+  color: #53A7DC;
+}
+.icon-sass {
+  color: #BF6B97;
+}
+</style>
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@ -0,0 +1,73 @@
+<template>
+  <section class="bg-neutral-50">
+    <projects :projects="select_projects">
+      <header>
+        <h2 class="text-[2rem] mb-2">
+          Wybrane projekty
+        </h2>
+        <p class="mb-5">
+          Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
+        </p>
+      </header>
+    </projects>
+    <div class="w-full -translate-y-5 pb-5 more-button">
+      <GhostButton
+        class="mx-auto"
+        @click="router.push('projects')"
+      >
+        ZOBACZ WIĘCEJ
+      </GhostButton>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import Projects from '@/components/SelectedProjects'
+import GhostButton from '@/components/buttons/GhostButton'
+
+const router = useRouter()
+
+let select_projects = ref([])
+
+onMounted(() => {
+  loadProjectList()
+})
+
+function loadProjectList() {
+  fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
+    .then(response => response.json())
+    .then(data => {
+      select_projects.value = data
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "scss/default";
+
+.selected-projects {
+  background-color: #fdfdfd !important;
+
+  .more-button {
+    margin-bottom: 45px;
+
+    .btn {
+      margin: 0 auto;
+
+      @include media-tablet {
+        width: 100%;
+      }
+    }
+
+    @include media-tablet {
+      padding: 0 25px;
+    }
+  }
+}
+.header-container {
+  @extend .container;
+  margin-bottom: 15px;
+}
+</style>
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@ -0,0 +1,227 @@
+<template>
+  <div
+    id="contact-form"
+    class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
+  >
+    <header class="mb-1.5">
+      <h3 class="text-xl">
+        Formularz kontaktowy
+      </h3>
+    </header>
+    <form
+      class="flex flex-col gap-3 justify-start items-start"
+      @submit="formSubmit"
+    >
+      <div
+        v-if="hasMessageError"
+        class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
+      >
+        {{ messageError }}
+      </div>
+      <div
+        v-else-if="hasMessageOkStatus"
+        class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
+      >
+        {{ messageOk }}
+      </div>
+      <div class="flex flex-col gap-1 w-full">
+        <label
+          class="text-gray-500"
+          for="message"
+        >
+          W czym mogę pomóc?
+        </label>
+        <textarea
+          id="message"
+          v-model="messageValue"
+          class="w-full max-w-full min-h-[150px] px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
+          :class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          name="message"
+          placeholder="Chciałbym zlecić wykonanie strony..."
+        />
+        <span
+          v-if="isMessageError"
+          class="text-red-400"
+        >
+          Wiadomość musi zawierać przynajmniej 3 znaki!
+        </span>
+      </div>
+      <div class="flex flex-col gap-1 w-full">
+        <label
+          class="text-gray-500"
+          for="email"
+        >
+          Gdzie mam odesłać odpowiedź?
+        </label>
+        <input
+          id="email"
+          v-model="emailValue"
+          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
+          :class="[ isEmailError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          type="text"
+          name="email"
+          placeholder="Twój adres e-mail"
+        >
+        <span
+          v-if="isEmailError"
+          class="text-red-400"
+        >
+          E-mail musi być poprawny, np. przemek.kowalski@gmail.com
+        </span>
+      </div>
+      <div class="flex flex-col gap-1 w-full">
+        <label
+          class="text-gray-500"
+          for="sender"
+        >
+          Podpis
+        </label>
+        <input
+          id="sender"
+          v-model="senderValue"
+          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
+          :class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          type="text"
+          name="sender"
+        >
+        <span
+          v-if="isSenderError"
+          class="text-red-400"
+        >
+          Podpis musi zawierać przynajmniej 3 znaki!
+        </span>
+      </div>
+      <BaseButton
+        is-reverse
+        class="py-1 w-full"
+        :disabled="isButtonDisabled"
+      >
+        Wyślij
+      </BaseButton>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import BaseButton from '@/components/buttons/BaseButton'
+import { ref, reactive, watch, computed } from 'vue'
+
+function emailValidate (mailObj) {
+  const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
+  return mailObj.match(mailFormat)
+}
+
+async function postData (url = '', data = {}) {
+  const response = await fetch(url, {
+    method: 'POST',
+    cache: 'no-cache',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(data)
+  })
+  return response.json()
+}
+
+const buttonDisabled = ref(false)
+const statusError = ref(0)
+const emailValue = ref('')
+const messageValue = ref('')
+const senderValue = ref('')
+
+const messageError = ref('')
+const messageOk = ref('')
+
+const errors = reactive({
+  email: false,
+  message: false,
+  sender: false
+})
+
+const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender)
+const isEmailError = computed(() => errors.email)
+const isMessageError = computed(() => errors.message)
+const isSenderError = computed(() => errors.sender)
+const hasMessageError = computed(() => messageError.value)
+const hasMessageOkStatus = computed(() => messageOk.value && !hasMessageError.value)
+
+watch([statusError, emailValue], ([errorCount, value]) => {
+  errors.email = errorCount > 0 && !emailValidate(value)
+})
+
+watch([statusError, messageValue], ([errorCount, value]) => {
+  errors.message = errorCount > 0 && (value === '' || value.length < 3)
+})
+
+watch([statusError, senderValue], ([errorCount, value]) => {
+  errors.sender = errorCount > 0 && (value === '' || value.length < 3)
+})
+
+function clearErrors() {
+  statusError.value = 0
+  errors.email = false
+  errors.message = false
+  errors.sender = false
+}
+
+function checkForm() {
+  clearErrors()
+  if (!emailValidate(emailValue.value)) {
+    errors.email = true
+    statusError.value++
+  }
+  if (messageValue.value === '') {
+    errors.message = true
+    statusError.value++
+  }
+  if (senderValue.value === '') {
+    errors.sender = true
+    statusError.value++
+  }
+}
+
+function formSubmit(event) {
+  event.preventDefault()
+
+  checkForm()
+
+  if (statusError.value === 0) {
+    console.log('Send!')
+    buttonDisabled.value = true
+    postData('https://kamilcraft.com/send', {
+      email: emailValue.value,
+      message: messageValue.value,
+      sender: senderValue.value
+    }).then(result => {
+      if (result.error) {
+        messageError.value = result.message
+      } else {
+        messageOk.value = result.message
+        messageValue.value = ''
+        emailValue.value = ''
+        senderValue.value = ''
+      }
+      buttonDisabled.value = false
+    }).catch(() => {
+      messageError.value = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
+      buttonDisabled.value = false
+    })
+  }
+
+  scrollTo('#contact-form')
+}
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@screen md {
+  .contact_container {
+    flex-basis: 500px;
+  }
+}
+</style>
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@ -0,0 +1,133 @@
+<template>
+  <div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
+    <header class="mb-1.5">
+      <h3 class="text-xl">
+        Inne formy kontaktu:
+      </h3>
+    </header>
+    <div class="flex flex-col gap-2.5 justify-start items-start">
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/instagram.jpg"
+          alt="Instagram"
+        >
+        <span
+          id="instagram"
+          class="font-bold"
+        >
+          <a
+            href="https://www.instagram.com/nikcamii/"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            class="hover:underline"
+          >Instagram: @NiKCamii</a>
+        </span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/facebook.jpg"
+          alt="Facebook"
+        >
+        <span
+          id="facebook"
+          class="font-bold"
+        >
+          <a
+            href="https://www.facebook.com/nikcamii/"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            class="hover:text-gray-700 hover:underline"
+          >Facebook: @NiKCamii</a>
+        </span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/twitter.jpg"
+          alt="Twitter"
+        >
+        <span
+          id="twitter"
+          class="font-bold"
+        >
+          <a
+            href="https://twitter.com/nikcamii"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            class="hover:text-gray-700 hover:underline"
+          >Twitter: @NiKCamii</a>
+        </span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/gg.png"
+          alt="Gadu-Gadu"
+        >
+        <span
+          id="gg"
+          class="font-bold"
+        >GG: 38429969</span>
+      </div>
+      <div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
+        <img
+          class="rounded-full w-12 h-12 object-contain border border-neutral-200"
+          src="/assets/img/user.jpg"
+          alt="E-mail"
+        >
+        <span
+          id="mailto"
+          class="font-bold"
+        >
+          <a
+            href="mailto:contact@kamilcraft.com"
+            class="hover:text-gray-700 hover:underline"
+          >Email: contact@kamilcraft.com</a>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "scss/media";
+
+@screen md {
+  .contact_info {
+    flex-basis: 410px;
+  }
+}
+
+a {
+  color: inherit;
+
+  &:hover {
+    -webkit-text-fill-color: #374151;
+    color: #374151;
+  }
+}
+
+#instagram {
+  background: linear-gradient(120deg, #e99311, #8738b8);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+
+#facebook {
+  color: #4267b2;
+}
+
+#twitter {
+  color: #5eaade;
+}
+
+#mailto {
+  color: #696969;
+}
+
+#gg {
+  color: #ffa214;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import App from '@/App.vue'
+import router from '@/router'
+import { store } from '@/store'
+// import VueMeta from 'vue-meta'
+
+import '../scss/default.scss'
+import '../css/index.css'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(fas, fab, far)
+
+const app = createApp(App)
+
+app.config.productionTip = false
+
+app.component('FontAwesomeIcon', FontAwesomeIcon)
+
+app.use(router)
+app.use(store)
+// app.use(VueMeta)
+
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,89 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '@/views/HomeView'
+import About from '@/views/AboutView'
+import Projects from '@/views/ProjectsView'
+import Project from '@/views/ProjectView'
+import Contact from '@/views/ContactView'
+import NotFound from '@/views/NotFound'
+
+const mainTitle = 'kamilcraft.com'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    meta: {
+      title: 'Dzień dobry! 😊'
+    },
+    component: Home
+  },
+  {
+    path: '/projects',
+    name: 'Projects',
+    meta: {
+      title: 'Moje projekty'
+    },
+    component: Projects
+  },
+  {
+    path: '/projects/:id',
+    name: 'Project',
+    meta: {
+      title: 'Projekt'
+    },
+    component: Project
+  },
+  {
+    path: '/about',
+    name: 'About',
+    meta: {
+      title: 'O mnie'
+    },
+    component: About
+  },
+  {
+    path: '/contact',
+    name: 'Kontakt',
+    meta: {
+      title: 'Kontakt'
+    },
+    component: Contact
+  },
+  {
+    path: '/:catchAll(.*)',
+    name: '404',
+    meta: {
+      title: 'Błąd 404'
+    },
+    component: NotFound
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory('/'),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else if (to.hash) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            selector: to.hash
+          }, 1000)
+        })
+      })
+    } else {
+      return { left: 0, top: 0 }
+    }
+  }
+})
+
+const title = ' :: ' + mainTitle
+router.beforeEach((to, form, next) => {
+  const documentTitle = to.meta.title + title || mainTitle
+  document.title = documentTitle === to.meta.title ? title : documentTitle
+  next()
+})
+
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,64 @@
+import { createStore } from 'vuex'
+
+export const store = createStore({
+  state: {
+    header: {
+      title: null,
+      description: null
+    },
+    categories: [],
+    projects: []
+  },
+  getters: {
+    getHeader (state) {
+      return state.header
+    },
+    getCategories (state) {
+      return state.categories
+    },
+    getProjects (state) {
+      return state.projects
+    }
+  },
+  actions: {
+    fetchProjects (store) {
+      return fetch(process.env.VUE_APP_API_URL + '/projects')
+        .then(response => response.json())
+        .then(data => {
+          store.commit('setProjects', data)
+          return store.getters.getProjects
+        })
+    },
+    fetchCategories (store) {
+      return fetch(process.env.VUE_APP_API_URL + '/categories')
+        .then(response => response.json())
+        .then(data => {
+          store.commit('setCategories', data)
+          return store.getters.getCategories
+        })
+    }
+  },
+  mutations: {
+    setCategories: (state, array = []) => {
+      state.categories = array
+    },
+    setProjects: (state, array = []) => {
+      state.projects = array
+    },
+    setHeader: (state, text) => {
+      state.header = {
+        title: text.title ?? null,
+        description: text.description ?? null
+      }
+    },
+    resetHeaderTitle (state) {
+      state.header.title = null
+    },
+    setHeaderDescription: (state, payload) => {
+      state.header.description = payload.title
+    },
+    resetHeaderDescription (state) {
+      state.header.description = null
+    }
+  }
+})
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -0,0 +1,68 @@
+<template>
+  <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+    <p class="font-bold">
+      Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
+      W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
+    </p>
+    <h2 class="text-[2rem]">
+      Studia
+    </h2>
+    <p>
+      Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
+    </p>
+    <p>
+      Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
+      Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
+    </p>
+    <h3 class="text-[1.5rem]">
+      Kursy
+    </h3>
+    <p>
+      W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
+      <a
+        :href="publicPath + 'download/certyfikat-laravel.pdf'"
+        class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
+        target="_blank"
+        rel="noopener nofollow noreferrer"
+      >
+        Architektura aplikacji internetowych opartych o framework Laravel
+      </a>.
+    </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 class="text-[2rem]">
+      Moje zainteresowania
+    </h2>
+    <p>
+      W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
+      programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
+      problemów przy prywatnych projektach.
+    </p>
+  </section>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+
+const publicPath = process.env.VUE_APP_BASE_URL + '/'
+
+const store = useStore()
+const route = useRoute()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
+  }
+  store.commit('setHeader', header)
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+</script>
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@ -0,0 +1,25 @@
+<template>
+  <section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
+    <MailContact />
+    <OtherContact />
+  </section>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import MailContact from '@/components/sections/contacts/MailContact'
+import OtherContact from '@/components/sections/contacts/OtherContact'
+
+const route = useRoute()
+const store = useStore()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
+  }
+  store.commit('setHeader', header)
+})
+</script>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,35 @@
+<template>
+  <section class="home">
+    <About />
+    <ExperiencesSection />
+    <FavoriteProjects />
+  </section>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import About from '@/components/sections/AboutSection'
+import ExperiencesSection from '@/components/sections/ExperiencesSection'
+import FavoriteProjects from '@/components/sections/FavoriteProjects'
+
+const store = useStore()
+const route = useRoute()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: [
+      'Chciałbym Państwa powitać na mojej stronie!',
+      'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
+    ]
+  }
+  store.commit('setHeader', header)
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+</script>
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@ -0,0 +1,24 @@
+<template>
+  <div class="not-found">
+    <div class="container">
+      <header>
+        <h1>Błąd 404</h1>
+      </header>
+      <p>Szukana strona wygasła lub nie istnieje.</p>
+      <p>Sprawdź adres i spróbuj ponownie!</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.not-found {
+  .container {
+    h1 {
+      margin-bottom: 25px;
+    }
+
+    padding-top: 45px;
+    padding-bottom: 45px;
+  }
+}
+</style>
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@ -0,0 +1,188 @@
+<template>
+  <section
+    v-if="isLoaded"
+    class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
+  >
+    <header class="text-neutral-800 font-roboto">
+      <h1 class="text-center text-4xl font-light pb-5">
+        {{ project.title }}
+      </h1>
+      <ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
+        <li class="flex items-center gap-2">
+          <FontAwesomeIcon
+            class="w-4"
+            :icon="['far', 'clock']"
+          />
+          <span>{{ project.release_date }}</span>
+        </li>
+        <li class="flex items-center gap-2">
+          <FontAwesomeIcon
+            class="w-4"
+            :icon="['far', 'user']"
+          />
+          <span>{{ project.author }}</span>
+        </li>
+        <li class="flex items-center gap-2">
+          <FontAwesomeIcon
+            class="w-4"
+            :icon="['far', 'folder']"
+          />
+          <span>{{ getCategoryName(project.categories) }}</span>
+        </li>
+        <li class="flex items-center gap-2">
+          <FontAwesomeIcon
+            class="w-4"
+            :icon="['fas', 'code-branch']"
+          />
+          <span>{{ project.project_version }}</span>
+        </li>
+        <li
+          v-if="project.project_url"
+          class="flex items-center gap-2"
+        >
+          <FontAwesomeIcon
+            class="w-4"
+            :icon="['fas', 'link']"
+          />
+          <span>
+            <a
+              :href="project.project_url"
+              target="_blank"
+              rel="noopener nofollow noreferrer"
+            >
+              Link
+            </a>
+          </span>
+        </li>
+      </ul>
+    </header>
+    <div class="pt-5">
+      <figure class="w-full shadow-xl">
+        <img
+          class="block max-h-[31.25rem] object-cover"
+          :src="project.images.large"
+          :alt="project.title"
+        >
+      </figure>
+      <div
+        class="markdown mt-9"
+        v-html="markdownToHtml"
+      />
+    </div>
+  </section>
+  <div
+    v-else
+    class="flex items-center"
+  >
+    <div class="loading_animation" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import { marked } from 'marked'
+
+const route = useRoute()
+const store = useStore()
+
+const isLoaded = ref(false)
+let project = reactive({})
+
+const getCategories = computed(() => store.getters.getCategories)
+const markdownToHtml = computed(() => marked.parse(project.description))
+
+onMounted(() => {
+  if (getCategories.value.length === 0) {
+    store.dispatch('fetchCategories')
+  }
+  loadProject(route.params.id)
+})
+
+function getCategoryName(categories = []) {
+  const categoriesText = []
+  categories.forEach(categoryElement => {
+    const category = getCategories.value.find(category => category.slug === categoryElement)
+    if (category) {
+      categoriesText.push(category.name)
+    }
+  })
+  return categoriesText[0] ?? undefined
+}
+
+function loadProject(id) {
+  fetch(process.env.VUE_APP_API_URL + '/project/' + id)
+    .then(response => response.json())
+    .then(data => {
+      project.title = data.title
+      project.description = data.description
+      project.release_date = data.release_date
+      project.author = data.author
+      project.categories = data.categories
+      project.project_version = data.project_version
+      project.project_url = data.project_url
+      project.images = data.images
+      isLoaded.value = true
+    })
+}
+</script>
+
+<style lang="scss">
+@import "scss/default";
+
+a {
+  @apply text-neutral-800 hover:text-kamilcraft-green;
+}
+
+.markdown {
+  h1 {
+    @apply text-4xl;
+  }
+
+  h2 {
+    @apply text-[2rem];
+  }
+
+  h3 {
+    @apply text-[1.5rem];
+  }
+
+  p, ol li, ul li {
+    @apply text-lg;
+  }
+
+  p + ol, p + ul, p + blockquote {
+    @apply -mb-2.5;
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  ol, ul {
+    @apply mb-2.5;
+    padding-inline-start: 1.75rem;
+
+    li img {
+      @apply block w-full pr-1 pb-1 mt-3.5;
+    }
+  }
+
+  p {
+    @apply mb-2.5 text-justify;
+  }
+
+  blockquote {
+    @apply pl-6 ml-5 border-neutral-400;
+
+    p {
+      text-indent: unset;
+    }
+  }
+}
+</style>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@ -0,0 +1,110 @@
+<template>
+  <SelectedProjects :projects="projects">
+    <div class="pb-9">
+      <ul class="flex justify-center list-none">
+        <li
+          v-for="category in getCategories"
+          :key="category.slug"
+          class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
+          :class="{ 'category-active': selectedCategory(category.slug) }"
+          @click="changeCategory(category.slug)"
+        >
+          <a
+            class="text-gray-500 hover:text-black"
+            :title="`Kategoria ${category.name}`"
+          >{{ category.name }}</a>
+        </li>
+      </ul>
+    </div>
+  </SelectedProjects>
+  <div
+    v-if="projects.length === 0"
+    class="loading"
+  >
+    <div class="loading_animation" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import SelectedProjects from '@/components/SelectedProjects'
+
+const store = useStore()
+
+const activeCategory = ref('all')
+const projects = reactive([])
+
+const getCategories = computed(() => store.getters.getCategories)
+
+onMounted(() => {
+  loadAllData()
+})
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle')
+  store.commit('resetHeaderDescription')
+})
+
+function loadAllData () {
+  store.dispatch('fetchCategories')
+  store.dispatch('fetchProjects').then(loadedProjects => {
+    loadedProjects.forEach(project => {
+      projects.push(project)
+    })
+  })
+}
+
+function loadListWhereCategory(category) {
+  projects.splice(0)
+  setTimeout(() => {
+    if (category !== 'all') {
+      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
+      storedProjects.forEach(project => {
+        projects.push(project)
+      })
+    } else {
+      store.getters.getProjects.forEach(project => {
+        projects.push(project)
+      })
+    }
+  }, 500)
+}
+
+function changeCategory(category) {
+  activeCategory.value = category
+  loadListWhereCategory(category)
+}
+
+function selectedCategory(categorySlug) {
+  return activeCategory.value === categorySlug
+}
+</script>
+
+<style lang="scss">
+@import "scss/media";
+
+.category-active::after {
+  @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
+  background-color: #A2CF00;
+  animation: load-underline 300ms forwards;
+}
+
+@keyframes loading-animation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load-underline {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+</style>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{vue,js}",
+  ],
+  darkMode: true,
+  theme: {
+    extend: {
+      fontFamily: {
+        'arial': ['Arial', 'sans-serif'],
+        'roboto': ['Roboto', 'sans-serif'],
+        'thasadith': ['Thasadith', 'sans-serif']
+      },
+      fontSize: {
+        'logo-size': '2.5rem',
+      },
+      screens: {
+        'header-content': '900px'
+      },
+      colors: {
+        'kamilcraft-green': 'rgb(var(--color-kamilcraft-green) / <alpha-value>)'
+      }
+    },
+  },
+  plugins: [],
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,14 @@
+const path = require("path")
+const { defineConfig } = require('@vue/cli-service')
+
+module.exports = defineConfig({
+  publicPath: '/',
+  transpileDependencies: true,
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src/'),
+      }
+    }
+  },
+})