Skip to content

Commit dd7d1c9

Browse files
hfidelishfidelis
committed
Merge branch 'dev'
2 parents 5ce3868 + 7467631 commit dd7d1c9

17 files changed

+154
-73
lines changed

‎index.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,21 @@
33
<head>
44
<meta charset="UTF-8">
55
<link rel="icon" href="/favicon.ico">
6+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
9+
<link rel="preload" href="src/assets/fonts/MonaspaceKrypton.ttf" as="font" type="font/ttf" crossorigin>
10+
<link rel="manifest" href="/site.webmanifest">
11+
<link rel="canonical" href="https://hfidelis.github.io">
612
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vite App</title>
13+
<meta name="author" content="Heitor Fidelis">
14+
<meta name="description" content="Personal portfolio website from Heitor Fidelis a.k.a hfidelis">
15+
<meta name="keywords" content="Portfolio, Developer, Web development, Technology">
16+
<meta property="og:title" content="hfidelis">
17+
<meta property="og:description" content="Heitor Fidelis Portfolio">
18+
<meta property="og:image" content="/android-chrome-192x192.png">
19+
<meta property="og:url" content="https://hfidelis.github.io">
20+
<title>hfidelis</title>
821
</head>
922
<body>
1023
<div id="app"></div>

‎public/android-chrome-192x192.png

4.34 KB
Loading

‎public/android-chrome-512x512.png

12.7 KB
Loading

‎public/apple-touch-icon.png

3.83 KB
Loading

‎public/favicon-16x16.png

338 Bytes
Loading

‎public/favicon-32x32.png

549 Bytes
Loading

‎public/favicon.ico

10.9 KB
Binary file not shown.

‎public/site.webmanifest

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "hfidelis",
3+
"short_name": "hfidelis",
4+
"description": "Portfolio website from Heitor Fidelis a.k.a hfidelis",
5+
"start_url": "/",
6+
"display": "standalone",
7+
"icons": [
8+
{
9+
"src": "/android-chrome-192x192.png",
10+
"sizes": "192x192",
11+
"type": "image/png"
12+
},
13+
{
14+
"src": "/android-chrome-512x512.png",
15+
"sizes": "512x512",
16+
"type": "image/png"
17+
}
18+
]
19+
}

‎src/components/Header/HeaderComponent.vue

Lines changed: 50 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
import {
33
ref,
44
watch,
5-
computed,
6-
onMounted,
7-
onBeforeUnmount,
85
} from 'vue'
96
107
import {
@@ -14,6 +11,7 @@ import {
1411
1512
import { useDark } from '@vueuse/core'
1613
14+
import isMobile from '@/helpers/isMobile.ts'
1715
import LocaleSelect from '@/components/LocaleSelect/LocaleSelect.vue'
1816
import ThemeToggle from '@/components/ThemeToggle/ThemeToggle.vue'
1917
@@ -24,32 +22,14 @@ const toggleOpen = () => {
2422
isOpen.value = !isOpen.value
2523
}
2624
27-
const windowWidth = ref(window.innerWidth)
28-
2925
watch(
30-
() => windowWidth.value,
31-
() => {
32-
if (isMobile.value) {
26+
() => isMobile.value,
27+
(val) => {
28+
if (val) {
3329
isOpen.value = false
3430
}
3531
}
3632
)
37-
38-
const isMobile = computed(() => {
39-
return windowWidth.value <= 1024
40-
})
41-
42-
const updateWindowWidth = () => {
43-
windowWidth.value = window.innerWidth
44-
}
45-
46-
onMounted(() => {
47-
window.addEventListener('resize', updateWindowWidth)
48-
})
49-
50-
onBeforeUnmount(() => {
51-
window.removeEventListener('resize', updateWindowWidth)
52-
})
5333
</script>
5434

5535
<template>
@@ -71,11 +51,6 @@ onBeforeUnmount(() => {
7151
>
7252
hfidelis
7353
</a>
74-
<span
75-
class="logo__sufix"
76-
>
77-
$
78-
</span>
7954
<span
8055
class="logo__thick"
8156
>
@@ -90,36 +65,32 @@ onBeforeUnmount(() => {
9065
<button
9166
class="menu__button"
9267
v-if="isMobile"
93-
:style="{ 'opacity': isOpen ? 0 : 1 }"
9468
>
9569
<SvgIcon
96-
:path="mdiMenuOpen"
70+
:path="isOpen ? mdiWindowClose : mdiMenuOpen"
9771
type="mdi"
9872
size="26"
9973
@click="toggleOpen()"
10074
/>
10175
</button>
10276
<div
103-
:class="isMobile ? 'actions__mobile' : 'actions__default'"
104-
:style="{
105-
'display': isOpen ? 'flex' :
106-
isMobile ? 'none' : 'flex'
107-
}"
77+
v-if="!isMobile"
78+
class='actions__default'
10879
>
109-
<button
110-
class="menu__button"
111-
v-show="isOpen && isMobile"
112-
>
113-
<SvgIcon
114-
:path="mdiWindowClose"
115-
type="mdi"
116-
size="26"
117-
@click="toggleOpen()"
118-
/>
119-
</button>
12080
<LocaleSelect />
12181
<ThemeToggle />
12282
</div>
83+
<Transition
84+
name="sidebar"
85+
>
86+
<div
87+
v-if="isMobile && isOpen"
88+
class='actions__mobile sidebar'
89+
>
90+
<LocaleSelect />
91+
<ThemeToggle />
92+
</div>
93+
</Transition>
12394
</section>
12495
</header>
12596
</template>
@@ -130,6 +101,7 @@ onBeforeUnmount(() => {
130101
.app__header {
131102
@include flex(row, center, space-between);
132103
width: 100dvw;
104+
height: $header-height;
133105
padding: 1.2rem 25dvw;
134106
135107
@media screen {
@@ -158,11 +130,13 @@ onBeforeUnmount(() => {
158130
-webkit-background-clip: text;
159131
}
160132
161-
.menu__button {
162-
color: $white;
163-
background-color: $primary-dark;
164-
border: $border-sm solid $dark-border;
165-
box-shadow: $dark-mode-shadow;
133+
.app__header__actions {
134+
> .menu__button {
135+
color: $white;
136+
background-color: $primary-dark;
137+
border: $border-sm solid $dark-border;
138+
box-shadow: $dark-mode-shadow;
139+
}
166140
}
167141
}
168142
@@ -177,16 +151,17 @@ onBeforeUnmount(() => {
177151
-webkit-background-clip: text;
178152
}
179153
180-
.menu__button {
181-
color: $black;
182-
background-color: $primary-light;
183-
border: $border-sm solid $light-border;
184-
box-shadow: $light-mode-shadow;
154+
.app__header__actions {
155+
> .menu__button {
156+
color: $black;
157+
background-color: $primary-light;
158+
border: $border-sm solid $light-border;
159+
box-shadow: $light-mode-shadow;
160+
}
185161
}
186162
}
187163
188-
.logo__prefix,
189-
.logo__sufix {
164+
.logo__prefix {
190165
background-image: linear-gradient(90deg,$green,$dark-green);
191166
background-clip: text;
192167
-webkit-text-fill-color: transparent;
@@ -243,7 +218,7 @@ onBeforeUnmount(() => {
243218
}
244219
245220
.actions__mobile {
246-
display: none;
221+
display: flex;
247222
flex-direction: column;
248223
justify-content: flex-start;
249224
align-items: flex-end;
@@ -254,7 +229,7 @@ onBeforeUnmount(() => {
254229
width: 100dvw;
255230
256231
position: absolute;
257-
top: 0;
232+
top: $header-height;
258233
left: 0;
259234
z-index: 2;
260235
@@ -275,13 +250,23 @@ onBeforeUnmount(() => {
275250
}
276251
277252
@keyframes enter {
278-
0% {
279-
opacity: 0;
253+
from {
280254
transform: translateX(100%);
281255
}
282-
100% {
283-
opacity: 1;
256+
to {
284257
transform: translateX(0);
285258
}
286259
}
260+
261+
.sidebar-leave-active {
262+
transition: transform 0.5s;
263+
}
264+
.sidebar-leave-to {
265+
transform: translateX(100%);
266+
}
267+
268+
269+
.sidebar-leave-active {
270+
transition: transform 0.5s, right 0.5s;
271+
}
287272
</style>

‎src/components/LocaleSelect/LocaleSelect.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ export default {
5555
:class="isDark ? 'dark__select' : 'light__select'"
5656
>
5757
<VueMultiselect
58+
:aria-hidden="true"
59+
:aria-label="$t('components.localeSelect.ariaLabel')"
5860
:options="locales"
5961
:selectLabel="''"
6062
:deselectLabel="''"
@@ -103,6 +105,7 @@ export default {
103105
background-color: transparent;
104106
color: $primary-light;
105107
border: none;
108+
cursor: pointer;
106109
107110
.multiselect__tags,
108111
.multiselect__single,

‎src/components/ThemeToggle/ThemeToggle.vue

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script setup lang="ts">
22
import { useDark, useToggle } from '@vueuse/core'
33
4+
import isMobile from '@/helpers/isMobile.ts'
5+
46
import {
57
mdiWeatherSunny,
68
mdiWeatherNight,
@@ -18,15 +20,25 @@ const toggleDark = useToggle(isDark)
1820

1921
<template>
2022
<button
23+
:aria-label="$t('components.themeToggle.ariaLabel')"
2124
class="theme__toggle__btn"
22-
:class="isDark ? 'dark__toggle' : 'light__toggle'"
25+
:class="[
26+
isDark ? 'dark__toggle' : 'light__toggle',
27+
isMobile ? 'header__mobile__item' : '',
28+
]"
2329
@click="toggleDark()"
2430
>
31+
<span
32+
v-if="isMobile"
33+
>
34+
{{ $t('components.themeToggle.label') }}
35+
</span>
2536
<Transition name="toggle__transition">
2637
<template
2738
v-if="isDark"
2839
>
2940
<SvgIcon
41+
:aria-hidden="true"
3042
:path="mdiWeatherSunny"
3143
type="mdi"
3244
size="30"
@@ -36,6 +48,7 @@ const toggleDark = useToggle(isDark)
3648
v-else
3749
>
3850
<SvgIcon
51+
:aria-hidden="true"
3952
:path="mdiWeatherNight"
4053
type="mdi"
4154
size="30"
@@ -49,18 +62,26 @@ const toggleDark = useToggle(isDark)
4962
@import '@/styles/app.scss';
5063
5164
.theme__toggle__btn {
65+
@include flex(row, center, center, 0.6rem);
5266
border: none;
5367
border-radius: $radius-md;
5468
padding: 0.2rem 0.6rem;
5569
cursor: pointer;
70+
overflow: hidden;
71+
height: $header-item-height;
72+
73+
> span {
74+
font-size: $text-sm;
75+
font-weight: 600;
76+
}
5677
}
5778
5879
.dark__toggle {
5980
background-color: $primary-dark;
6081
border: $border-sm solid $dark-border;
6182
box-shadow: $dark-mode-shadow;
6283
63-
> svg {
84+
> svg, span {
6485
color: $primary-light;
6586
}
6687
}
@@ -70,7 +91,7 @@ const toggleDark = useToggle(isDark)
7091
border: $border-sm solid $light-border;
7192
box-shadow: $light-mode-shadow;
7293
73-
> svg {
94+
> svg, span {
7495
color: $primary-dark;
7596
}
7697
}

‎src/helpers/isMobile.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ref, watch, readonly } from 'vue'
2+
3+
const isMobile = ref(false)
4+
5+
const windowWidth = ref(window.innerWidth)
6+
7+
window.addEventListener('resize', () => {
8+
windowWidth.value = window.innerWidth
9+
})
10+
11+
watch(
12+
() => windowWidth.value,
13+
() => {
14+
isMobile.value = windowWidth.value < 768
15+
},
16+
)
17+
18+
export default readonly(isMobile)

‎src/locales/en-US.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
"test": "English Test",
33
"components": {
44
"localeSelect": {
5-
"selectedLabel": "Selected"
5+
"selectedLabel": "Selected",
6+
"ariaLabel": "Choose app language"
7+
},
8+
"themeToggle": {
9+
"ariaLabel": "Toggle theme",
10+
"label": "Theme"
611
}
712
},
813
"views": {

0 commit comments

Comments
 (0)