New CSS #1
17
package-lock.json
generated
17
package-lock.json
generated
@ -20,6 +20,7 @@
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-auto": "^1.0.0",
|
||||
"@sveltejs/adapter-static": "^1.0.5",
|
||||
"@sveltejs/kit": "^1.0.0",
|
||||
"@types/markdown-it": "^12.2.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
@ -613,6 +614,15 @@
|
||||
"@sveltejs/kit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-static": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.5.tgz",
|
||||
"integrity": "sha512-W5jbgvy9sbYEHs27NQOSFEun+zQwdcL4kpk5qc2kSHl8cKsP5wfXuWDTDRmD1Co40aFcesi5Az5ZzdnPI8KCVg==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@sveltejs/kit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/kit": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.1.1.tgz",
|
||||
@ -4085,6 +4095,13 @@
|
||||
"import-meta-resolve": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@sveltejs/adapter-static": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.5.tgz",
|
||||
"integrity": "sha512-W5jbgvy9sbYEHs27NQOSFEun+zQwdcL4kpk5qc2kSHl8cKsP5wfXuWDTDRmD1Co40aFcesi5Az5ZzdnPI8KCVg==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@sveltejs/kit": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.1.1.tgz",
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-auto": "^1.0.0",
|
||||
"@sveltejs/adapter-static": "^1.0.5",
|
||||
"@sveltejs/kit": "^1.0.0",
|
||||
"@types/markdown-it": "^12.2.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="%lang%">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
|
||||
10
src/app.scss
10
src/app.scss
@ -14,10 +14,14 @@ $min-desktop: 1024px;
|
||||
$min-ultrawide: 1700px;
|
||||
$default-border-radius:5px;
|
||||
|
||||
$border-hover-color: #999;
|
||||
$default-main-color: white;
|
||||
$default-active-color: rgb(176, 176, 176);
|
||||
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
color: $text-color;
|
||||
background-color: $basecolor
|
||||
background-color: $basecolor;
|
||||
}
|
||||
|
||||
.box-with-shadow {
|
||||
@ -32,6 +36,7 @@ $default-border-radius:5px;
|
||||
width: 80%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.image-container{
|
||||
@ -43,9 +48,6 @@ $default-border-radius:5px;
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
object-fit: scale-down;
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $contrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<div>
|
||||
Hello
|
||||
<div>
|
||||
<h4>HTML</h4>
|
||||
<div class="round_base">
|
||||
<div class="inside"><div>percentage</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.round_base {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: yellow;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: 0.1px solid black;
|
||||
background-image: linear-gradient(to right, transparent 40px, #000000 2px);
|
||||
}
|
||||
.inside {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
outline: 0.1px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Contacts from './Contacts.svelte';
|
||||
import Skills from './Skills.svelte';
|
||||
export let currentLanguage: CurrentLanguage = 'it';
|
||||
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||
import { faDownload } from '@fortawesome/free-solid-svg-icons';
|
||||
@ -53,12 +52,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
.cv {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.whoIAm {
|
||||
margin: auto;
|
||||
text-align: justify;
|
||||
@ -67,13 +61,13 @@
|
||||
background-color: $basecolor2;
|
||||
// border: solid 1px $border-color;
|
||||
border-radius: $default-border-radius;
|
||||
margin-top: 20px;
|
||||
padding: 30px;
|
||||
margin: 10px;
|
||||
.title {
|
||||
display: none;
|
||||
@media (min-width: $min-tablet) {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
display: none;
|
||||
@media (min-width: $min-tablet) {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -57,8 +57,6 @@
|
||||
// border: solid 1px $border-color;
|
||||
}
|
||||
.contacts {
|
||||
background-color: $basecolor2;
|
||||
// border: solid 1px $border-color;
|
||||
border-radius: $default-border-radius;
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
}
|
||||
.job-card {
|
||||
background-color: $basecolor2;
|
||||
|
||||
@ -1,20 +1,89 @@
|
||||
<script lang="ts">
|
||||
import type { Handle, RequestEvent, ResolveOptions } from '@sveltejs/kit';
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
|
||||
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
||||
let langSelectOpen = false;
|
||||
let langSelect: Element;
|
||||
export let currentLanguage: CurrentLanguage = 'en';
|
||||
|
||||
export let currentLanguage: CurrentLanguage = 'it';
|
||||
function setOpen() {
|
||||
langSelectOpen = !langSelectOpen;
|
||||
|
||||
const animationLanguage = langSelect.animate([{ width: '0px' }, { width: '200px' }], {
|
||||
duration: 100,
|
||||
fill: 'both'
|
||||
});
|
||||
if (langSelectOpen) {
|
||||
animationLanguage.play();
|
||||
// animateConatiner.play();
|
||||
} else {
|
||||
animationLanguage.reverse();
|
||||
// animateConatiner.reverse();
|
||||
}
|
||||
}
|
||||
|
||||
function setLanguage(value: CurrentLanguage) {
|
||||
currentLanguage = value;
|
||||
({ svelteHTML });
|
||||
}
|
||||
|
||||
svgCore.library.add(svgIcons.faGlobeEurope);
|
||||
|
||||
const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
|
||||
const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||||
on:click={() => {
|
||||
currentLanguage = 'it';
|
||||
}}>it</button
|
||||
>
|
||||
<button
|
||||
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||||
on:click={() => {
|
||||
currentLanguage = 'en';
|
||||
}}>en</button
|
||||
>
|
||||
<div class="language-selector">
|
||||
<button on:click={setOpen}> <FontAwesomeIcon icon={globeDefinition} size="2x" /> </button>
|
||||
<div class="button-container" bind:this={langSelect}>
|
||||
<button
|
||||
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||||
on:click={() => setLanguage('it')}
|
||||
title="attiva lingua italiana">it</button
|
||||
>
|
||||
<button
|
||||
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||||
on:click={() => setLanguage('en')}
|
||||
title="enable english language">en</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
.language-selector {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: $basecolor2;
|
||||
border-radius: $default-border-radius;
|
||||
font-size: 50px;
|
||||
border-bottom: solid $border-hover-color 1px;
|
||||
border-left: solid $border-hover-color 1px;
|
||||
bottom: 70px;
|
||||
right: 0;
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.custom-button {
|
||||
width: 100px;
|
||||
font-size: large;
|
||||
}
|
||||
.custom-button-active {
|
||||
background-color: $default-active-color;
|
||||
outline: solid 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,119 +1,51 @@
|
||||
<script lang="ts">
|
||||
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
|
||||
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
||||
import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';
|
||||
|
||||
svgCore.library.add(svgIcons.faHome);
|
||||
svgCore.library.add(svgIcons.faUserTie);
|
||||
svgCore.library.add(svgIcons.faGraduationCap);
|
||||
svgCore.library.add(svgIcons.faUserClock);
|
||||
svgCore.library.add(svgIcons.faAddressCard);
|
||||
svgCore.library.add(svgIcons.faBars);
|
||||
svgCore.library.add(svgIcons.faGlobeEurope);
|
||||
|
||||
const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
|
||||
const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
|
||||
const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
|
||||
const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
|
||||
const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
|
||||
const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
|
||||
const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
|
||||
const graduationDefinition: svgCore.IconDefinition =
|
||||
svgCore.findIconDefinition(graduationCapLookup);
|
||||
const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
|
||||
const addressCardDefinition: svgCore.IconDefinition =
|
||||
svgCore.findIconDefinition(addressCardLookUp);
|
||||
|
||||
export let currentLanguage: CurrentLanguage = 'it';
|
||||
const menu: Record<MenuEntry, LanguagePair> = {
|
||||
home: { it: 'Home', en: 'Home' },
|
||||
job: { it: 'Esperienze', en: 'Experiences' },
|
||||
school: { it: 'Formazione', en: 'Training' },
|
||||
blog: { it: 'Blog', en: 'Blog' },
|
||||
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||
};
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
import MenuBig from './MenuBig.svelte';
|
||||
import MenuMobile from './MenuMobile.svelte';
|
||||
export let currentLanguage: CurrentLanguage = 'en';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<ul class="wrapper">
|
||||
<li>
|
||||
<a class="menu-element" href="#top">
|
||||
<i>
|
||||
<FontAwesomeIcon icon={homeIconDefinition} />
|
||||
</i>
|
||||
<span>{menu.home[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#jobs"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={userTieDefinition} />
|
||||
</i><span>{menu.job[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#training"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={graduationDefinition} />
|
||||
</i><span>{menu.school[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#portfolio"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={userClockDefinition} />
|
||||
</i><span>{menu.portfolio[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="/blog"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={addressCardDefinition} />
|
||||
</i><span>{menu.blog[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="menu-container default">
|
||||
<div class="menu menu-desktop">
|
||||
<MenuBig {currentLanguage} />
|
||||
</div>
|
||||
<div class="menu menu-mobile">
|
||||
<MenuMobile {currentLanguage} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
$menu-size: 1004px;
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@media (min-width: $menu-size) {
|
||||
width: $menu-size;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.menu {
|
||||
border-radius: $default-border-radius;
|
||||
|
||||
background-color: $basecolor2;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0px;
|
||||
border-bottom: solid $border-hover-color 2px;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
font-size: larger;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
outline: 1px solid;
|
||||
i {
|
||||
margin-right: 10%;
|
||||
|
||||
.menu-desktop {
|
||||
display: none;
|
||||
@media (min-width: $min-tablet) {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: rgb(176, 176, 176);
|
||||
outline: 1px solid;
|
||||
.menu-mobile {
|
||||
@media (min-width: $min-tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
.menu-container {
|
||||
border-radius: $default-border-radius;
|
||||
padding: 0px;
|
||||
margin: 10px;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
143
src/lib/elements/MenuBig.svelte
Normal file
143
src/lib/elements/MenuBig.svelte
Normal file
@ -0,0 +1,143 @@
|
||||
<script lang="ts">
|
||||
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
|
||||
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
||||
import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';
|
||||
|
||||
svgCore.library.add(svgIcons.faHome);
|
||||
svgCore.library.add(svgIcons.faUserTie);
|
||||
svgCore.library.add(svgIcons.faGraduationCap);
|
||||
svgCore.library.add(svgIcons.faUserClock);
|
||||
svgCore.library.add(svgIcons.faAddressCard);
|
||||
svgCore.library.add(svgIcons.faBars);
|
||||
svgCore.library.add(svgIcons.faGlobeEurope);
|
||||
|
||||
const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
|
||||
const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
|
||||
const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
|
||||
const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
|
||||
const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
|
||||
const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
|
||||
const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
|
||||
const graduationDefinition: svgCore.IconDefinition =
|
||||
svgCore.findIconDefinition(graduationCapLookup);
|
||||
const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
|
||||
const addressCardDefinition: svgCore.IconDefinition =
|
||||
svgCore.findIconDefinition(addressCardLookUp);
|
||||
|
||||
export let currentLanguage: CurrentLanguage = 'it';
|
||||
const menu: Record<MenuEntry, LanguagePair> = {
|
||||
home: { it: 'Home', en: 'Home' },
|
||||
job: { it: 'Esperienze', en: 'Experiences' },
|
||||
school: { it: 'Formazione', en: 'Training' },
|
||||
blog: { it: 'Blog', en: 'Blog' },
|
||||
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li>
|
||||
<a class="menu-element" href="#top">
|
||||
<i>
|
||||
<FontAwesomeIcon icon={homeIconDefinition} />
|
||||
</i>
|
||||
<span>{menu.home[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#jobs"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={userTieDefinition} />
|
||||
</i><span>{menu.job[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#training"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={graduationDefinition} />
|
||||
</i><span>{menu.school[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#portfolio"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={userClockDefinition} />
|
||||
</i><span>{menu.portfolio[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a class="menu-element" href="/blog"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={addressCardDefinition} />
|
||||
</i><span>{menu.blog[currentLanguage]}</span></a
|
||||
>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
$menu-size: 1004px;
|
||||
a {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: larger;
|
||||
min-width: 50px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
i {
|
||||
margin-right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
background-color: $default-active-color;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin: auto;
|
||||
border-radius: $default-border-radius;
|
||||
}
|
||||
|
||||
.container {
|
||||
border-radius: $default-border-radius;
|
||||
width: 100%;
|
||||
border-bottom: solid $border-hover-color 1px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
background-color: $basecolor2;
|
||||
flex: 1;
|
||||
}
|
||||
li:first-of-type {
|
||||
background-color: $basecolor2;
|
||||
border-top-left-radius: $default-border-radius;
|
||||
border-bottom-left-radius: $default-border-radius;
|
||||
a:hover,
|
||||
a:active {
|
||||
border-top-left-radius: $default-border-radius;
|
||||
border-bottom-left-radius: $default-border-radius;
|
||||
}
|
||||
}
|
||||
li:last-of-type {
|
||||
border-top-right-radius: $default-border-radius;
|
||||
border-bottom-right-radius: $default-border-radius;
|
||||
a:hover,
|
||||
a:active {
|
||||
border-top-right-radius: $default-border-radius;
|
||||
border-bottom-right-radius: $default-border-radius;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { tweened } from 'svelte/motion';
|
||||
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
|
||||
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
||||
@ -43,6 +42,10 @@
|
||||
blog: { it: 'Blog', en: 'Blog' },
|
||||
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||
};
|
||||
const menuButton: Record<number, LanguagePair> = {
|
||||
1: { it: 'Apri il menu', en: 'Open menu' },
|
||||
0: { it: 'Chiudi il menu', en: 'Close menu' }
|
||||
};
|
||||
let menuContainer: Element;
|
||||
let menuOpen = false;
|
||||
|
||||
@ -59,7 +62,7 @@
|
||||
|
||||
<div class="menu-container">
|
||||
<div class="header">
|
||||
<button on:click={setOpen} tabindex="0" title="menu toggle">
|
||||
<button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
|
||||
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
|
||||
{:else}
|
||||
<FontAwesomeIcon icon={xDefinition} size="lg" />
|
||||
@ -100,13 +103,13 @@
|
||||
</i><span>{menu.portfolio[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<!-- <li>
|
||||
<a class="menu-element" href="/blog"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={addressCardDefinition} />
|
||||
</i><span>{menu.blog[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -146,17 +149,25 @@
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
background-color: $basecolor2;
|
||||
font-size: larger;
|
||||
height: 60px;
|
||||
border: 1px solid;
|
||||
i {
|
||||
margin-right: 10%;
|
||||
}
|
||||
}
|
||||
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: rgb(176, 176, 176);
|
||||
outline: 1px solid;
|
||||
background-color: $default-active-color;
|
||||
outline: solid 1px;
|
||||
}
|
||||
.wrapper {
|
||||
height: 0px;
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<div>
|
||||
Hello
|
||||
<div>
|
||||
<h4>HTML</h4>
|
||||
<div class="round_base">
|
||||
<div class="inside"><div>percentage</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.round_base {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: yellow;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: 0.1px solid black;
|
||||
background-image: linear-gradient(to right, #000000 2px, blue 100%);
|
||||
}
|
||||
.inside {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
outline: 0.1px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -25,7 +25,7 @@
|
||||
.inside {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
// background-color: white;
|
||||
// background-color:$basecolor2;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
const training: Schema[] = data as Schema[];
|
||||
</script>
|
||||
|
||||
<div class="training">
|
||||
<div>
|
||||
{#each training as school}
|
||||
<div class="element">
|
||||
<img src={school.images[0]} alt="school logo" />
|
||||
@ -27,13 +27,10 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.training {
|
||||
padding: 10px;
|
||||
}
|
||||
@import '../../app.scss';
|
||||
.element {
|
||||
border-radius: $default-border-radius;
|
||||
background-color: white;
|
||||
background-color: $basecolor2;
|
||||
padding: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -3,11 +3,3 @@ export type MenuEntry = 'home' | 'job' | 'school' | 'blog' | 'portfolio';
|
||||
export type LanguagePair = {
|
||||
[key in CurrentLanguage]: string;
|
||||
};
|
||||
|
||||
const e: Record<MenuEntry, LanguagePair> = {
|
||||
home: { it: 'Home', en: 'Home' },
|
||||
job: { it: 'Esperienze', en: 'Experiences' },
|
||||
school: { it: 'Formazione', en: 'Training' },
|
||||
blog: { it: 'Blog', en: 'Blog' },
|
||||
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||
};
|
||||
|
||||
2
src/routes/+layout.ts
Normal file
2
src/routes/+layout.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export const ssr = false;
|
||||
export const prerender = true;
|
||||
@ -8,7 +8,9 @@
|
||||
import Training from '$lib/elements/Training.svelte';
|
||||
import Data_jobs from '$lib/model/jobs.json';
|
||||
import Data_portfolio from '$lib/model/portfolio.json';
|
||||
import LanguageSelector from '$lib/elements/LanguageSelector.svelte';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
|
||||
let jobs: Schema[] = Data_jobs as Schema[];
|
||||
let portfolio: Schema[] = Data_portfolio as Schema[];
|
||||
let currentLanguage: CurrentLanguage = 'it';
|
||||
@ -32,22 +34,7 @@
|
||||
url: 'https://pettinato.eu/',
|
||||
title: 'Gianmarco Pettinato',
|
||||
description: "This is the Gianmarco's portfolio site",
|
||||
images: [
|
||||
{
|
||||
url: 'https://www.example.ie/og-image-01.jpg',
|
||||
width: 800,
|
||||
height: 600,
|
||||
alt: 'Og Image Alt'
|
||||
},
|
||||
{
|
||||
url: 'https://www.example.ie/og-image-02.jpg',
|
||||
width: 900,
|
||||
height: 800,
|
||||
alt: 'Og Image Alt Second'
|
||||
},
|
||||
{ url: 'https://www.example.ie/og-image-03.jpg' },
|
||||
{ url: 'https://www.example.ie/og-image-04.jpg' }
|
||||
],
|
||||
images: [],
|
||||
site_name: 'Gianmarco Pettinato Portfolio'
|
||||
}}
|
||||
twitter={{
|
||||
@ -63,14 +50,9 @@
|
||||
|
||||
<main>
|
||||
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||
|
||||
<div class="menu menu-desktop">
|
||||
<Menu {currentLanguage} />
|
||||
</div>
|
||||
<div class="menu menu-mobile">
|
||||
<MenuMobile {currentLanguage} />
|
||||
</div>
|
||||
<div id="home" class="default">
|
||||
<LanguageSelector bind:currentLanguage />
|
||||
<Menu {currentLanguage} />
|
||||
<div id="home" class="default test">
|
||||
<AboutMe {currentLanguage} />
|
||||
</div>
|
||||
<div id="jobs" class="default">
|
||||
@ -90,46 +72,6 @@
|
||||
<style lang="scss">
|
||||
@import '../app.scss';
|
||||
|
||||
.menu {
|
||||
background-color: $basecolor2;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0px;
|
||||
border-bottom: solid #999 1px;
|
||||
}
|
||||
|
||||
.menu-desktop {
|
||||
display: none;
|
||||
@media (min-width: $min-tablet) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-mobile {
|
||||
@media (min-width: $min-tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: $default-border-radius;
|
||||
border: solid $button-border-color 1px;
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.custom-button:hover {
|
||||
background-color: $text-color;
|
||||
color: white;
|
||||
}
|
||||
.custom-button-active {
|
||||
cursor: unset;
|
||||
background-color: $text-color;
|
||||
color: white;
|
||||
}
|
||||
@media (max-width: $min-tablet) {
|
||||
.custom-button {
|
||||
font-size: large;
|
||||
|
||||
@ -1,134 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
import Data_portfolio from '../../lib/model/portfolio.json';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
import Jobs from '$lib/elements/Jobs.svelte';
|
||||
|
||||
let currentLanguage: CurrentLanguage = 'it';
|
||||
let isBlogContainer = true;
|
||||
let jobs: Schema[] = Data_portfolio as Schema[];
|
||||
let title = { it: 'I miei articoli', en: 'my blog posts' };
|
||||
</script>
|
||||
|
||||
<MetaTags
|
||||
title="Gianmarco Pettinato"
|
||||
description="This is the Gianmarco's portfolio site"
|
||||
canonical="https://pettinato.eu/"
|
||||
openGraph={{
|
||||
url: 'https://pettinato.eu/',
|
||||
title: 'Gianmarco Pettinato',
|
||||
description: "This is the Gianmarco's portfolio site",
|
||||
images: [
|
||||
{
|
||||
url: 'https://www.example.ie/og-image-01.jpg',
|
||||
width: 800,
|
||||
height: 600,
|
||||
alt: 'Og Image Alt'
|
||||
},
|
||||
{
|
||||
url: 'https://www.example.ie/og-image-02.jpg',
|
||||
width: 900,
|
||||
height: 800,
|
||||
alt: 'Og Image Alt Second'
|
||||
},
|
||||
{ url: 'https://www.example.ie/og-image-03.jpg' },
|
||||
{ url: 'https://www.example.ie/og-image-04.jpg' }
|
||||
],
|
||||
site_name: 'Gianmarco Pettinato Portfolio'
|
||||
}}
|
||||
twitter={{
|
||||
handle: '@jatus_93',
|
||||
site: '@jatus_93',
|
||||
cardType: 'summary',
|
||||
title: 'Gianmarco Pettinato Portfolio',
|
||||
description: "This is the Gianmarco's portfolio site",
|
||||
image: 'https://pettinato.eu/profile_pic.webp',
|
||||
imageAlt: 'Gianmarco Photo'
|
||||
}}
|
||||
/>
|
||||
|
||||
<main>
|
||||
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||
<div class="language-selector" id="language-selector">
|
||||
<button
|
||||
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||||
on:click={() => {
|
||||
currentLanguage = 'it';
|
||||
}}>it</button
|
||||
>
|
||||
<button
|
||||
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||||
on:click={() => {
|
||||
currentLanguage = 'en';
|
||||
}}>en</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<Menu {currentLanguage} />
|
||||
</div>
|
||||
<div id="portfolio" class="default">
|
||||
<h2>{title.it}</h2>
|
||||
<Jobs {jobs} {currentLanguage} {isBlogContainer} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
.language-selector {
|
||||
right: 0;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
@media (max-width: $min-desktop) {
|
||||
width: 100%;
|
||||
position: unset;
|
||||
padding-bottom: 10px;
|
||||
background-color: $basecolor2;
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
background-color: $basecolor2;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: solid #999 1px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
border: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: $default-border-radius;
|
||||
border: solid $button-border-color 1px;
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.custom-button:hover {
|
||||
background-color: $text-color;
|
||||
color: white;
|
||||
}
|
||||
.custom-button-active {
|
||||
cursor: unset;
|
||||
background-color: $text-color;
|
||||
color: white;
|
||||
}
|
||||
@media (max-width: $min-tablet) {
|
||||
.custom-button {
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
import {markdown} from 'svelte-preprocess-markdown';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
@ -14,7 +14,12 @@ const config = {
|
||||
})],
|
||||
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
adapter: adapter({
|
||||
// default options are shown
|
||||
pages: 'build',
|
||||
assets: 'build',
|
||||
fallback: null
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
56
to-be-done/blog/+page.svelte
Normal file
56
to-be-done/blog/+page.svelte
Normal file
@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
import Data_portfolio from '../../lib/model/portfolio.json';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
import Menu from '$lib/elements/MenuBig.svelte';
|
||||
import Jobs from '$lib/elements/Jobs.svelte';
|
||||
import LanguageSelector from '$lib/elements/LanguageSelector.svelte';
|
||||
|
||||
let currentLanguage: CurrentLanguage = 'it';
|
||||
let isBlogContainer = true;
|
||||
let jobs: Schema[] = Data_portfolio as Schema[];
|
||||
let title = { it: 'I miei articoli', en: 'my blog posts' };
|
||||
</script>
|
||||
|
||||
<MetaTags
|
||||
title="Gianmarco Pettinato"
|
||||
description="This is the Gianmarco's portfolio site"
|
||||
canonical="https://pettinato.eu/"
|
||||
openGraph={{
|
||||
url: 'https://pettinato.eu/',
|
||||
title: 'Gianmarco Pettinato',
|
||||
description: "This is the Gianmarco's portfolio site",
|
||||
images: [],
|
||||
site_name: 'Gianmarco Pettinato Portfolio'
|
||||
}}
|
||||
twitter={{
|
||||
handle: '@jatus_93',
|
||||
site: '@jatus_93',
|
||||
cardType: 'summary',
|
||||
title: 'Gianmarco Pettinato Portfolio',
|
||||
description: "This is the Gianmarco's portfolio site",
|
||||
image: 'https://pettinato.eu/profile_pic.webp',
|
||||
imageAlt: 'Gianmarco Photo'
|
||||
}}
|
||||
/>
|
||||
|
||||
<main>
|
||||
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||
<LanguageSelector bind:currentLanguage />
|
||||
<Menu {currentLanguage} />
|
||||
|
||||
<div id="portfolio" class="default">
|
||||
<h2>{title.it}</h2>
|
||||
<Jobs {jobs} {currentLanguage} {isBlogContainer} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
@media (max-width: $min-tablet) {
|
||||
.custom-button {
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
import Menu from '$lib/elements/MenuBig.svelte';
|
||||
let currentLanguage: CurrentLanguage = 'it';
|
||||
import { page } from '$app/stores';
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
@ -95,7 +95,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: solid #999 1px;
|
||||
border-bottom: solid $border-hover-color 1px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
@ -110,12 +110,12 @@
|
||||
}
|
||||
.custom-button:hover {
|
||||
background-color: $text-color;
|
||||
color: white;
|
||||
color: $basecolor2;
|
||||
}
|
||||
.custom-button-active {
|
||||
cursor: unset;
|
||||
background-color: $text-color;
|
||||
color: white;
|
||||
color: $basecolor2;
|
||||
}
|
||||
@media (max-width: $min-tablet) {
|
||||
.custom-button {
|
||||
@ -2,10 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import type { UserConfig } from 'vite';
|
||||
|
||||
const config: UserConfig = {
|
||||
plugins: [sveltekit()],
|
||||
test: {
|
||||
include: ['src/**/*.{test,spec}.{js,ts}']
|
||||
}
|
||||
plugins: [sveltekit()]
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user