Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixing a lot of things #6

Merged
merged 1 commit into from
Jul 31, 2023
Merged

Fixing a lot of things #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions components/AppFooter.vue → components/layout/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
</footer>
</template>

<script>
export default {
name: "AppFooter"
}
</script>

<style scoped>
footer {
position: fixed;
Expand Down
18 changes: 11 additions & 7 deletions components/AppMenu.vue → components/layout/AppMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<nav class="navbar md:ml-2 lg:ml-4 xl:ml-6 dark:text-white">
<div class="menu md:rounded-lg bg-saturate shadow-lg">
<input class="menu_input" id="btn1" name="menu" type="radio" value="1" :checked="activePage === 1"
<bg-saturate class="menu md:rounded-lg shadow-lg">
<input class="menu_input" id="btn1" name="menu" type="radio" value="home" :checked="activePage === 'home'"
@input="updateActivePage"/>
<div class="menu_contain">
<label class="menu_label" for="btn1">
Expand All @@ -12,7 +12,7 @@
</label>
</div>

<input class="menu_input" id="btn2" name="menu" type="radio" value="2" :checked="activePage === 2"
<input class="menu_input" id="btn2" name="menu" type="radio" value="skills" :checked="activePage === 'skills'"
@input="updateActivePage"/>
<div class="menu_contain">
<label class="menu_label" for="btn2">
Expand All @@ -23,7 +23,7 @@
</label>
</div>

<input class="menu_input" id="btn3" name="menu" type="radio" value="3" :checked="activePage === 3"
<input class="menu_input" id="btn3" name="menu" type="radio" value="projects" :checked="activePage === 'projects'"
@input="updateActivePage"/>
<div class="menu_contain">
<label class="menu_label" for="btn3">
Expand All @@ -34,7 +34,7 @@
</label>
</div>

<input class="menu_input" id="btn4" name="menu" type="radio" value="4" :checked="activePage === 4"
<input class="menu_input" id="btn4" name="menu" type="radio" value="contact" :checked="activePage === 'contact'"
@input="updateActivePage"/>
<div class="menu_contain">
<label class="menu_label" for="btn4">
Expand Down Expand Up @@ -62,22 +62,26 @@
</span>
</label>
</div>
</div>
</bg-saturate>
</nav>
</template>

<script>
/* Ref: https://codepen.io/Anna_Batura/pen/qBbaXBd */
import {mapGetters, mapMutations} from "vuex";
import DarkModeSwitcher from "@/components/layout/DarkModeSwitcher";
import LangSwitcher from "@/components/layout/LangSwitcher";
import BgSaturate from "@/components/layout/BgSaturate";

export default {
name: "AppMenu",
components: {DarkModeSwitcher, LangSwitcher, BgSaturate},
computed: {
...mapGetters(["activePage"])
},
methods: {
updateActivePage(event) {
this.SET_PAGE(parseInt(event.target.value));
this.SET_PAGE(event.target.value);
},
...mapMutations(["SET_PAGE"]),
},
Expand Down
38 changes: 38 additions & 0 deletions components/layout/BgSaturate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<div :class="{'bg-saturate-chrome': isChrome, 'bg-saturate': !isChrome}">
<slot></slot>
</div>
</template>

<script>
export default {
name: "BgSaturate",
data() {
return {
isChrome: false,
};
},
mounted() {
this.isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
},
}
</script>

<style scoped>
.bg-saturate {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
z-index: -1;
}

.bg-saturate-chrome {
/*background-color: rgba(243, 244, 246, 0.8);*/
background-color: rgba(229, 231, 235, 0.8);
}

.dark .bg-saturate-chrome {
/*background-color: rgba(51, 65, 85, 0.8);*/
background-color: rgba(30, 41, 59, 0.8);
}
</style>
0 components/DarkModeSwitcher.vue → components/layout/DarkModeSwitcher.vue
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion components/LangSwitcher.vue → components/layout/LangSwitcher.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default {
methods: {
async changeLocale(locale) {
this.$i18n.setLocale(locale);
await this.$router.push('/?lang=' + locale);
await this.$router.push({ path: '', query: { lang: locale }, hash: this.$router.currentRoute.hash});
}
}
}
Expand Down
0 components/Particles.vue → components/layout/Particles.vue
View file
Open in desktop
File renamed without changes.
38 changes: 26 additions & 12 deletions components/tabs/Contact.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,20 @@
</div>
</div>

<!-- Location -->
<div class="md:pr-6 py-2 flex gap-x-3">
<font-awesome-icon class="my-auto md:mx-2 flex-none contact-icon text-gray-800 dark:text-gray-300"
:icon="['fas', 'map-marker-alt']"/>
<div>
<div class="font-bold text-gray-900 dark:text-gray-200 text-xl mb-1">
{{ $t('contact_location_title') }}
</div>
<span class="font-bold text-blue-500 text-xl mb-2 wrap-word">
{{ $t('contact_location') }}
</span>
</div>
</div>

<!-- Phone -->
<div class="md:pr-6 py-2 flex gap-x-3">
<font-awesome-icon class="my-auto md:mx-2 flex-none contact-icon text-gray-800 dark:text-gray-300"
Expand Down Expand Up @@ -129,17 +143,6 @@
focus:border-blue-500"></textarea>
</div>

<div class="flex items-center rounded-full bg-teal-200 text-teal-900 text-sm font-bold px-4 py-3"
role="alert" v-if="sent">
<font-awesome-icon class="text-teal-500 text-lg mr-2" :icon="['fas', 'check']"/>
<p>{{ $t('contact_email_sent') }}</p>
</div>
<div class="flex items-center rounded-full bg-red-200 text-red-900 text-sm font-bold px-4 py-3"
role="alert" v-if="error">
<font-awesome-icon class="text-red-500 text-md mr-2" :icon="['fas', 'x']"/>
<p>{{ $t('contact_email_sent_error') }}</p>
</div>

<div class="w-full">
<button class="p-2 w-full rounded-lg"
:disabled="sending"
Expand All @@ -164,6 +167,17 @@
</span>
</button>
</div>

<div class="flex items-center rounded-full bg-teal-200 text-teal-900 text-sm font-bold px-4 py-3"
role="alert" v-if="sent">
<font-awesome-icon class="text-teal-500 text-lg mr-2" :icon="['fas', 'check']"/>
<p>{{ $t('contact_email_sent') }}</p>
</div>
<div class="flex items-center rounded-full bg-red-200 text-red-900 text-sm font-bold px-4 py-3"
role="alert" v-if="error">
<font-awesome-icon class="text-red-500 text-md mr-2" :icon="['fas', 'x']"/>
<p>{{ $t('contact_email_sent_error') }}</p>
</div>
</form>
</div>
</div>
Expand Down Expand Up @@ -199,7 +213,7 @@ export default {
email() {
let subject = 'Oferta%20de%20trabajo';
if (this.$i18n.locale === 'en') {
subject = 'Work%20offer';
subject = 'Job%20offer';
}
return 'mailto:' + this.$store.getters.EMAIL + '?Subject=' + subject;
}
Expand Down
50 changes: 27 additions & 23 deletions components/tabs/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,28 @@
</div>
</div>

<div class="md:col-span-2 justify-self-center md:justify-self-end md:order-1">
<h1 class="md:text-right text-4xl dark:text-white font-medium">Michel Suárez</h1>
<p class="text-md mb-1 text-justify text-blue-800 dark:text-blue-200 max-w-xl mx-auto md:text-x md:text-right">
<vue-typer
:text='$t("profile_profession")'
:repeat='Infinity'
:shuffle='false'
initial-action='typing'
:pre-type-delay='70'
:type-delay='70'
:pre-erase-delay='2000'
:erase-delay='250'
erase-style='select-all'
:erase-on-complete='false'
caret-animation='blink'
></vue-typer>
</p>
<p class="text-xl sm:text-justify text-gray-800 dark:text-gray-200 max-w-xl mx-auto dark:text-white">
{{ $t('profile_description') }}
</p>
<div class="md:col-span-2 justify-self-center md:justify-self-start md:order-1">
<bg-saturate class="p-4 md:p-6 rounded-xl">
<h1 class="text-4xl dark:text-white font-medium">Michel Suárez</h1>
<p class="text-md mb-2 text-justify text-blue-800 dark:text-blue-200 max-w-xl mx-auto">
<vue-typer
:text='$t("profile_profession")'
:repeat='Infinity'
:shuffle='false'
initial-action='typing'
:pre-type-delay='70'
:type-delay='70'
:pre-erase-delay='2000'
:erase-delay='250'
erase-style='select-all'
:erase-on-complete='false'
caret-animation='blink'
></vue-typer>
</p>
<p class="text-xl sm:text-justify text-gray-800 dark:text-gray-200 max-w-xl mx-auto dark:text-white">
{{ $t('profile_description') }}
</p>
</bg-saturate>
<div class="flex mt-2 justify-center md:justify-end">
<a class="btn-more mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
href="/cv/es/portfolio.pdf"
Expand All @@ -78,14 +80,16 @@

<script>
import {mapMutations} from "vuex";
import BgSaturate from "@/components/layout/BgSaturate";

export default {
name: "Home",
components: {BgSaturate},
computed: {
email() {
let subject = 'Oferta%20de%20trabajo';
if (this.$i18n.locale === 'en') {
subject = 'Work%20offer';
subject = 'Job%20offer';
}
return 'mailto:' + this.$store.getters.EMAIL + '?Subject=' + subject;
}
Expand All @@ -104,11 +108,11 @@ export default {

.img-avatar {
width: 250px;
height: 250px;
}

.btn-more {
margin-top: -15px;
margin-top: -35px;
z-index: 1;
}

@media only screen and (max-device-width: 1030px) {
Expand Down
96 changes: 60 additions & 36 deletions components/tabs/Portfolio.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,42 +37,61 @@
<h1 class="my-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-200">
{{ $t('project_title') }}:
</h1>
<ol class="border-l border-neutral-300 dark:border-neutral-500 text-gray-900 dark:text-gray-200">
<li class="bg-saturate rounded-r-lg" v-for="item in projects" v-bind:key="item.id">
<div class="flex-start items-center flex pt-3">
<div class="-ml-[8px] mr-3 h-[16px] w-[16px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
<p class="text-sm">{{ item.date }}</p>
<span v-for="item in item.language"
class="inline-block ml-2 bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
{{item}}
</span>
</div>
<div class="mb-6 px-4 mt-2 pb-3">
<client-only placeholder="Loading...">
<h4 class="pb-1.5 text-xl font-semibold">
<a class="text-blue-500" target="_blank" rel="noreferrer" :href="item.url" v-if="item.url">
{{ item.title }}
<font-awesome-icon class="text-xs font-normal pb-1" :icon="['fas', 'external-link']"/>
</a>
<span v-else>{{ item.title }}</span>
</h4>
<p class="pb-3" v-html="item.description"></p>
<ol class="border-l-2 border-blue-300 dark:border-blue-500 text-gray-900 dark:text-gray-200">
<li v-for="item in projects" v-bind:key="item.id">
<bg-saturate class="rounded-r-lg">
<div class="flex-start items-center flex flex-wrap pt-3">
<div class="-ml-[8px] h-[16px] w-[16px] rounded-full bg-blue-300 dark:bg-blue-500"></div>
<p class="text-sm ml-2">{{ item.date }}</p>
<span v-for="item in item.language"
class="inline-block ml-2 mb-2 bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
{{item}}
</span>
</div>
<div class="mb-6 px-4 mt-2 pb-3">
<client-only placeholder="Loading...">
<h4 class="pb-1.5 text-xl font-semibold">
<span>{{ item.title }}</span>
</h4>
<p class="pb-3" v-html="item.description"></p>

<div class="group inline-flex flex-wrap items-center gap-3" v-if="item.images.length > 0">
<button
@click="open_gallery('project_' + item.id)"
type="button"
class="inline-block rounded bg-blue-500 px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
{{ $t('see') }}
</button>
<fancy-box :ref="'project_' + item.id">
<span :data-fancybox="item.id" v-for="img in item.images" :data-src="img"></span>
</fancy-box>
</div>
</client-only>
</div>
<div class="group inline-flex flex-wrap items-center gap-3" v-if="item.images.length > 0 || item.url">
<button
v-if="item.images.length > 0"
@click="open_gallery('project_' + item.id)"
type="button"
class="inline-block rounded bg-blue-500 px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
{{ $t('preview') }}
</button>
<a
v-if="item.url"
target="_blank"
rel="noreferrer"
:href="item.url"
type="button"
class="inline-block rounded bg-blue-500 px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase
leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out
hover:bg-info-600 focus:bg-info-600 focus:outline-none focus:ring-0 active:bg-info-700
hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)]
focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)]
active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)]
dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)]
dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]
dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]
dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
>
<span class="mr-2">{{ $t('project_link') }}</span>
<font-awesome-icon class="text-xs font-norma" :icon="['fas', 'external-link']"/>
</a>
<fancy-box :ref="'project_' + item.id">
<span :data-fancybox="item.id" v-for="img in item.images" :data-src="img"></span>
</fancy-box>
</div>
</client-only>
</div>
</bg-saturate>
</li>
</ol>
</div>
Expand All @@ -81,8 +100,13 @@
</template>

<script>
import Card from "@/components/utils/Card";
import FancyBox from "@/components/utils/FancyBox";
import BgSaturate from "@/components/layout/BgSaturate";

export default {
name: "Portfolio",
components: {Card, FancyBox, BgSaturate},
data() {
return {
/* Data */
Expand Down Expand Up @@ -435,7 +459,7 @@ export default {
...value,
date: this.dateToString(new Date(value.date)),
};
}).sort((a, b) => a.id < b.id);
}).sort((a, b) => b.id - a.id);
},
educations() {
return this.education[this.$i18n.locale].map((value) => {
Expand Down
Loading