Compare commits
9 Commits
a4fe5e4efc
...
tailwind
| Author | SHA1 | Date | |
|---|---|---|---|
7bd1f7778a
|
|||
| bcac680d87 | |||
|
377f0dd743
|
|||
|
f4dc87d841
|
|||
|
1d9d84484d
|
|||
|
3e5c2a1c1d
|
|||
|
7476cfce33
|
|||
|
53928e5250
|
|||
|
61b8ad6380
|
@@ -6,4 +6,4 @@
|
||||
:root {
|
||||
--color-kamilcraft-green: 162 207 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<SiteHeader />
|
||||
<main
|
||||
rel="main"
|
||||
>
|
||||
<SiteHeader />
|
||||
<RouterView />
|
||||
<FooterComponent />
|
||||
</main>
|
||||
<FooterComponent />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SiteHeader from './components/SiteHeader'
|
||||
import FooterComponent from './components/FooterComponent'
|
||||
import SiteHeader from '@/components/SiteHeader'
|
||||
import FooterComponent from '@/components/FooterComponent'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10">
|
||||
<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
|
||||
@@ -49,14 +52,14 @@
|
||||
</div>
|
||||
</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 './buttons/BaseButton'
|
||||
import BaseButton from '@/components/buttons/BaseButton'
|
||||
import { marked } from 'marked'
|
||||
|
||||
defineProps({
|
||||
@@ -89,7 +92,7 @@ function markdownToText (project) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
@import 'scss/media';
|
||||
|
||||
.grid-project {
|
||||
animation: load-project 2s forwards;
|
||||
@@ -126,6 +129,10 @@ function markdownToText (project) {
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Navigation from './NavigationHeader'
|
||||
import Navigation from '@/components/NavigationHeader'
|
||||
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
@@ -33,7 +33,7 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../../scss/btn";
|
||||
@import 'scss/btn';
|
||||
|
||||
.btn {
|
||||
@include button($has-icon: true);
|
||||
|
||||
@@ -25,7 +25,7 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../scss/btn";
|
||||
@import 'scss/btn';
|
||||
|
||||
.btn {
|
||||
@include ghost-button();
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
has-icon
|
||||
icon="portrait"
|
||||
is-reverse
|
||||
@click="scrollTo('.selected-projects')"
|
||||
@click="scrollTo('#projects')"
|
||||
>
|
||||
Wybrane projekty
|
||||
</BaseButton>
|
||||
@@ -49,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '../buttons/BaseButton'
|
||||
import BaseButton from '@/components/buttons/BaseButton'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Projects from '../SelectedProjects'
|
||||
import GhostButton from '../buttons/GhostButton'
|
||||
import Projects from '@/components/SelectedProjects'
|
||||
import GhostButton from '@/components/buttons/GhostButton'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
@@ -1,91 +1,99 @@
|
||||
<template>
|
||||
<div class="contact_container">
|
||||
<div
|
||||
v-if="hasMessageError"
|
||||
class="message message_error"
|
||||
>
|
||||
{{ messageError }}
|
||||
</div>
|
||||
<div
|
||||
v-if="hasMessageOkStatus"
|
||||
class="message message_ok"
|
||||
>
|
||||
{{ messageOk }}
|
||||
</div>
|
||||
<header class="container_head">
|
||||
Formularz kontaktowy:
|
||||
<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
|
||||
id="form-point"
|
||||
class="flex flex-col gap-3 justify-start items-start"
|
||||
@submit="formSubmit"
|
||||
>
|
||||
<label
|
||||
class="label-info"
|
||||
:class="{ 'label-error': isEmailError }"
|
||||
for="email"
|
||||
<div
|
||||
v-if="hasMessageError"
|
||||
class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
|
||||
>
|
||||
E-mail:
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="emailValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isEmailError }"
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="przemek.kowalski@gmail.com"
|
||||
{{ 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"
|
||||
>
|
||||
<span
|
||||
v-if="isEmailError"
|
||||
class="error-message"
|
||||
>
|
||||
E-mail musi być poprawny, np. przemek.kowalski@gmail.com
|
||||
</span>
|
||||
<label
|
||||
class="label-info"
|
||||
:class="{ 'label-error': isMessageError }"
|
||||
for="message"
|
||||
>
|
||||
Wiadomość:
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="messageValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isMessageError }"
|
||||
name="message"
|
||||
placeholder="Chciałbym zlecić wykonanie strony..."
|
||||
/>
|
||||
<span
|
||||
v-if="isMessageError"
|
||||
class="error-message"
|
||||
>
|
||||
Wiadomość musi zawierać przynajmniej 3 znaki!
|
||||
</span>
|
||||
<label
|
||||
class="label-info"
|
||||
:class="{ 'label-error': isSenderError }"
|
||||
for="sender"
|
||||
>
|
||||
Podpis nadawcy:
|
||||
</label>
|
||||
<input
|
||||
id="sender"
|
||||
v-model="senderValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isSenderError }"
|
||||
type="text"
|
||||
name="sender"
|
||||
placeholder="np. Przemek Kowalski"
|
||||
>
|
||||
<span
|
||||
v-if="isSenderError"
|
||||
class="error-message"
|
||||
>
|
||||
Podpis musi zawierać przynajmniej 3 znaki!
|
||||
</span>
|
||||
{{ 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
|
||||
@@ -95,7 +103,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '../../buttons/BaseButton'
|
||||
import BaseButton from '@/components/buttons/BaseButton'
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
|
||||
function emailValidate (mailObj) {
|
||||
@@ -199,112 +207,21 @@ function formSubmit(event) {
|
||||
buttonDisabled.value = false
|
||||
})
|
||||
}
|
||||
|
||||
scrollTo('#contact-form')
|
||||
}
|
||||
|
||||
function scrollTo(id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.contact_container {
|
||||
flex-basis: 500px;
|
||||
|
||||
#form-point {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@screen md {
|
||||
.contact_container {
|
||||
flex-basis: 500px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 97%;
|
||||
margin: 0 20px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.container_head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact_container {
|
||||
.label-info {
|
||||
width: 97%;
|
||||
padding-bottom: 5px;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
width: 97%;
|
||||
padding: 5px 0 10px;
|
||||
color: #d44950;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 97%;
|
||||
max-width: 97%;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #c9c9c9;
|
||||
padding: 10px 10px 8px;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.3em;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact_input::placeholder {
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
.contact_input:focus, .contact_input:focus {
|
||||
outline: none;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
textarea.contact_input {
|
||||
max-width: 97%;
|
||||
min-width: 97%;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
input.contact_input-error, textarea.contact_input-error {
|
||||
border-color: #d44950;
|
||||
color: #d44950;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contact_input-error::placeholder, .contact_input-error::placeholder {
|
||||
color: #d7626a;
|
||||
}
|
||||
|
||||
input[disabled].contact_input {
|
||||
background-color: #cdcdcd;
|
||||
border-color: gray;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: none;
|
||||
margin: 5px;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.message_ok, .message_error {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message_ok {
|
||||
background-color: #4CAF50;
|
||||
border: 1px solid #387d3b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message_error {
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,82 +1,92 @@
|
||||
<template>
|
||||
<div class="contact_info">
|
||||
<header class="info_head">
|
||||
Inne formy kontaktu:
|
||||
<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="contact_element">
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/instagram.jpg"
|
||||
alt="Instagram"
|
||||
>
|
||||
<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"
|
||||
alt="Facebook"
|
||||
>
|
||||
<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"
|
||||
alt="Twitter"
|
||||
>
|
||||
<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"
|
||||
alt="Gadu-Gadu"
|
||||
>
|
||||
<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"
|
||||
alt="E-mail"
|
||||
>
|
||||
<span
|
||||
id="mailto"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
|
||||
</span>
|
||||
<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>
|
||||
@@ -84,51 +94,18 @@
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.contact_info {
|
||||
flex-basis: 410px;
|
||||
@screen md {
|
||||
.contact_info {
|
||||
flex-basis: 410px;
|
||||
}
|
||||
}
|
||||
|
||||
.info_head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
.contact_element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
margin-bottom: 5px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
-webkit-text-fill-color: #444444;
|
||||
color: #444444;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&_icon {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e2e2e2;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&_text{
|
||||
padding-top: 2px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
-webkit-text-fill-color: #374151;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,11 +130,4 @@
|
||||
#gg {
|
||||
color: #ffa214;
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
#instagram, #facebook, #twitter, #mailto, #gg {
|
||||
font-size: 1em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { store } from './store'
|
||||
import App from '@/App.vue'
|
||||
import router from '@/router'
|
||||
import { store } from '@/store'
|
||||
// import VueMeta from 'vue-meta'
|
||||
|
||||
import '../scss/default.scss'
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
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'
|
||||
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'
|
||||
|
||||
@@ -77,21 +77,6 @@ const router = createRouter({
|
||||
return { left: 0, top: 0 }
|
||||
}
|
||||
}
|
||||
/*scrollBehavior (to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
} else if (to.hash) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
selector: to.hash
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
}*/
|
||||
})
|
||||
|
||||
const title = ' :: ' + mainTitle
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<section class="contact">
|
||||
<div class="container">
|
||||
<MailContact />
|
||||
<OtherContact />
|
||||
</div>
|
||||
<section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
|
||||
<MailContact />
|
||||
<OtherContact />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -11,8 +9,8 @@
|
||||
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'
|
||||
import MailContact from '@/components/sections/contacts/MailContact'
|
||||
import OtherContact from '@/components/sections/contacts/OtherContact'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
@@ -25,49 +23,3 @@ onMounted(() => {
|
||||
store.commit('setHeader', header)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.contact {
|
||||
padding: 25px 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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_info {
|
||||
margin: 0 auto 25px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-mobile {
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
|
||||
.contact_container {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,9 +10,9 @@
|
||||
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'
|
||||
import About from '@/components/sections/AboutSection'
|
||||
import ExperiencesSection from '@/components/sections/ExperiencesSection'
|
||||
import FavoriteProjects from '@/components/sections/FavoriteProjects'
|
||||
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import SelectedProjects from '../components/SelectedProjects'
|
||||
import SelectedProjects from '@/components/SelectedProjects'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
const path = require("path")
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
|
||||
module.exports = defineConfig({
|
||||
publicPath: '/',
|
||||
transpileDependencies: true
|
||||
transpileDependencies: true,
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src/'),
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user