Jatus/cv-site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

fixing header
All checks were successful
continuous-integration/drone Build is passing
Details

Browse Source
This commit is contained in:
Gianmarco Pettinato 2023-05-27 23:32:07 +02:00 committed by jatus
parent eabc979c62
commit 283ebb35c9
5 changed files with 67 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -4,6 +4,7 @@
"scripts": {
"update-model": "json2ts ./src/lib/model/schemas/job.json ./src/lib/model/job.ts && json2ts ./src/lib/model/schemas/logo.json ./src/lib/model/logo.ts",
"dev": "vite dev",
"dev-exposed": "vite dev --host",
"build": "vite build",
"postbuild": "npx svelte-sitemap --domain https://pettinato.eu",
"preview": "vite preview",
@ -50,4 +51,4 @@
"svelte-sitemap": "^2.6.0",
"typesafe-i18n": "^5.20.0"
}
}
}

95
src/lib/elements/MenuMobile.svelte
View File

@ -51,7 +51,7 @@
function setOpen() {
menuOpen = !menuOpen;
const animation = menuContainer.animate([{ height: '0px' }, { height: '360px' }], {
const animation = menuContainer.animate([{ height: '0px' }, { height: '240px' }], {
duration: 100,
fill: 'both'
});
@ -61,12 +61,14 @@
</script>
<div class="menu-container">
<div class="header">
<div class="header {menuOpen ? 'borderclass' : ''}">
<button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
{:else}
<FontAwesomeIcon icon={xDefinition} size="lg" />
{/if}
<i>
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} />
{:else}
<FontAwesomeIcon icon={xDefinition} />
{/if}
</i>
</button>
<div class="title">
<h1>Gianmarco Pettinato</h1>
@ -75,7 +77,7 @@
</div>
<ul class="wrapper" bind:this={menuContainer}>
<li>
<a class="menu-element" href="#top">
<a on:click={setOpen} class="menu-element" href="#top">
<i>
<FontAwesomeIcon icon={homeIconDefinition} />
</i>
@ -83,28 +85,28 @@
>
</li>
<li>
<a class="menu-element" href="#jobs"
<a on:click={setOpen} class="menu-element" href="#jobs"
><i>
<FontAwesomeIcon icon={userTieDefinition} />
</i><span>{menu.job[currentLanguage]}</span></a
>
</li>
<li>
<a class="menu-element" href="#training"
<a on:click={setOpen} class="menu-element" href="#training"
><i>
<FontAwesomeIcon icon={graduationDefinition} />
</i><span>{menu.school[currentLanguage]}</span></a
>
</li>
<li>
<a class="menu-element" href="#portfolio"
<a on:click={setOpen} class="menu-element" href="#portfolio"
><i>
<FontAwesomeIcon icon={userClockDefinition} />
</i><span>{menu.portfolio[currentLanguage]}</span></a
>
</li>
<!-- <li>
<a class="menu-element" href="/blog"
<a on:click={setOpen} class="menu-element" href="/blog"
><i>
<FontAwesomeIcon icon={addressCardDefinition} />
</i><span>{menu.blog[currentLanguage]}</span></a
@ -115,26 +117,50 @@
<style lang="scss">
@import '../../app.scss';
.borderclass {
border-bottom: solid $border-hover-color 2px;
border-radius: $default-border-radius;
}
.header {
display: flex;
width: 100%;
padding-top: 10px;
height: 10%;
justify-content: space-between;
justify-content: space-evenly;
align-items: center;
button {
height: 80px;
width: 80px;
border: none;
font-size: 40px;
background: none;
margin-left: 3rem;
height: 50px;
width: 50px;
i {
text-align: center;
height: 50px;
width: 50px;
border: none;
font-size: 30px;
background: none;
}
}
.title {
justify-content: center;
text-align: right;
margin-left: auto;
margin-right: 3rem;
h1,
h2 {
margin-top: 0.5px;
margin-bottom: 0.5rem;
margin-left: 2.5rem;
@media (min-width: 450px) {
margin-left: unset;
}
}
}
}
.menu-container {
margin: 0;
padding: 0;
width: 80%;
margin: auto;
}
ul {
@ -145,31 +171,36 @@
margin: auto;
}
a {
padding-left: 10px;
display: flex;
justify-content: start;
justify-content: space-evenly;
align-items: center;
background-color: $basecolor2;
font-size: larger;
font-size: 20px;
height: 60px;
border-bottom: solid $border-hover-color 2px;
border-radius: 0px 0px $default-border-radius $default-border-radius;
i {
margin-right: 10%;
text-align: center;
height: 50px;
width: 50px;
border: none;
font-size: 30px;
background: none;
margin-left: 3rem;
}
span {
justify-content: center;
text-align: right;
margin-left: auto;
margin-right: 3rem;
}
}
li {
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
}
li:first-of-type {
border-top: 1px solid;
}
a:hover {
background-color: $default-active-color;
outline: solid 1px;
}
.wrapper {
height: 0px;
border-radius: 0px 0px $default-border-radius $default-border-radius;
}
</style>

2
src/routes/+page.svelte
View File

@ -52,7 +52,7 @@
<!-- svelte-ignore a11y-invalid-attribute -->
<LanguageSelector bind:currentLanguage />
<Menu {currentLanguage} />
<div id="home" class="default test">
<div id="home" class="default">
<AboutMe {currentLanguage} />
</div>
<div id="jobs" class="default">

4
static/photo_2023-05-27_14-07-56.webp:Zone.Identifier
View File

@ -1,4 +0,0 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://cloudconvert.com/
HostUrl=https://storage.cloudconvert.com/tasks/d2e68ca0-c4ea-4d5c-a821-99cb9bc0e2a1/photo_2023-05-27_14-07-56.webp?AWSAccessKeyId=cloudconvert-production&Expires=1685275786&Signature=e0WAf7JckXFaWlpmjR2VoxHuGsQ%3D&response-content-disposition=attachment%3B%20filename%3D%22photo_2023-05-27_14-07-56.webp%22&response-content-type=image%2Fwebp

2
vite.config.ts
View File

@ -1,5 +1,5 @@
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import type { UserConfig, defineConfig } from 'vite';
const config: UserConfig = {
plugins: [sveltekit()]