raffi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'project'

Browse Source
This commit is contained in:
raffiskender
2023-09-19 11:34:01 +02:00
parent d268f431d3 17e5e3fcfe
commit 87821a5d7a
42 changed files with 1480 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Burger.vue
View File

@@ -61,7 +61,8 @@ const burger = useBurgerStore();
</template>
<style lang="scss" scoped>
@import "@/style/shared.scss";
@import "@/style/colors.scss";
@import "@/style/widths.scss";
.button{
position:absolute;
top: 0.2em;
@@ -83,7 +84,7 @@ const burger = useBurgerStore();
.line-and-door, .line-middle, .arrow-up, .arrow-down{
transition:1s ;
stroke-width:10;
stroke:$green;
stroke:$action-normal;
}
.line-and-door{
@@ -104,18 +105,18 @@ const burger = useBurgerStore();
& > .arrow-up {
d:path("m 21, 50 15, -9");
stroke-width:6;
stroke:$green;
stroke:$action-normal;
}
& > .arrow-down {
d:path("m 21, 50 15, 9");
stroke-width:6;
stroke:$green;
stroke:$action-normal;
}
& > .line-middle{
d:path("M 65, 50 H 21");
stroke-width:6;
stroke:$green;
stroke:$action-normal;
}
& > .line-and-door{
stroke-dashoffset: 0 ;
@@ -123,7 +124,7 @@ const burger = useBurgerStore();
//stroke-dasharray: 12 12 38 62 38;
stroke-width:6;
stroke-dasharray: 205 ;
stroke:$green;
stroke:$action-normal;
}
}
@media (min-width:$maxWidth){

19
src/components/Footer.vue
View File

@@ -12,7 +12,7 @@ const show = ref(true)
@click="show = !show"
>
<circle
style="fill:#e65353;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path833"
cx="10"
cy="10"
@@ -27,7 +27,7 @@ const show = ref(true)
<div class="footer"
v-bind:class="show ? '' : 'hide'">
<h1>
Design
Designed
</h1>
<svg
viewBox="0 0 100 100"
@@ -208,7 +208,8 @@ M 311.63779,10 312.2454,10"/>
</template>
<style lang="scss" scoped>
@import "@/style/shared.scss";
@import '@/style/colors.scss';
@import '@/style/widths.scss';
div.footer{
position : fixed;
@@ -218,7 +219,7 @@ M 311.63779,10 312.2454,10"/>
align-items: center;
justify-content: center;
flex-wrap: wrap;
background-color: hsla(0, 0%, 1%, 0.904);
background-color: hsla(0, 0%, 0%, 0.904);
min-height:3.5em;
width: 100%;
max-width: $maxWidth;
@@ -230,6 +231,10 @@ M 311.63779,10 312.2454,10"/>
}
svg{
height: 2.5em;
& > circle{
fill:$action-normal;
transition : 0.25s;
}
}
h1{
font-size: 2em;
@@ -272,6 +277,12 @@ M 311.63779,10 312.2454,10"/>
&.down{
transform: rotate(180deg);
}
&:hover{
cursor: pointer;
& > circle{
fill:$action-light;
}
}
}
@supports (backdrop-filter: blur(0.5rem)){
div.footer{

59
src/components/Menu.vue
View File

@@ -100,8 +100,8 @@ const toggleMenu = () => {
v-bind:class="{show : liShow, closing : menuIsClosing}"
@click="closeMenu()">
<router-link
:to="{name:'whoAmI'}">
Who Am I
:to="{name:'profile'}">
Profile
</router-link>
</li>
<li
@@ -145,7 +145,7 @@ const toggleMenu = () => {
</template>
<style lang="scss" scoped>
@import '../style/shared.scss';
@import '../style/colors.scss';
.burger{
display: none;
@@ -154,7 +154,7 @@ const toggleMenu = () => {
& .button{
width: 3.5em;
// height: 4.5em;
background-color:$red-light;
background-color:$action-normal;
border: none;
transition:1s ;
&:hover{
@@ -164,7 +164,9 @@ const toggleMenu = () => {
& .cross, & .middle {
stroke-width:7;
transition:1s ;
stroke:$white;
-moz-transition:1s ;
-webkit-transition:1s ;
stroke:black;
}
& .cross{
stroke-dashoffset: 0 ;
@@ -209,14 +211,15 @@ ul.nav-menu{
}
a{
font-size:1em;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-family: 'acme', Arial, Helvetica, sans-serif;
//font-style: italic;
font-weight: 400;
text-align: center;
color : $white;
color : $main-normal;
text-decoration: none;
&::after{
content: "";
background-color: $red-light;
background-color: $action-normal;
width: 0%;
margin-left:0;
height: 4px;
@@ -224,12 +227,12 @@ a{
}
&:hover, &.router-link-exact-active{
color:$red-light;
color:$action-normal;
transition: color 0.25s;
cursor: pointer;
}
&.router-link-exact-active{
filter: drop-shadow(0 0 4px $red-light);
filter: drop-shadow(0 0 3px $action-normal);
transition: filter 0.3s;
}
&:hover::after, &.router-link-exact-active::after{
@@ -238,29 +241,31 @@ a{
transition: 0.25s;
}
&.hover-out::after{
margin-left:100%;
//This transition fires on hover-out class
transition:0.5s;
}
}
li {
transform: translateY(1.25em);
opacity:0;
overflow: hidden;
@for $i from 1 to 6 {
&:nth-child(#{$i}){
animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
&.hover-out::after{
margin-left:100%;
//This transition fires on hover-out class
transition:0.5s;
}
}
li {
padding: 0 0.3em;
transform: translateY(1.25em);
opacity:0;
overflow: hidden;
font-style: italic;
@for $i from 1 to 6 {
&:nth-child(#{$i}){
animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
}
}
}
}
@media (width < 750px ){
nav.menu-container{
//border: $white solid 3px;
//border: $main-normal solid 3px;
display: flex;
justify-content: flex-end;
& .burger{
@@ -334,7 +339,7 @@ li {
}
@media (height < 650px) and (width < 750px) {
div.menu-container .burger{
nav.menu-container .burger{
position : fixed;
top:0;
right:0;

64
src/components/Modal.vue
View File

@@ -9,7 +9,7 @@
<slot>
</slot>
<button @click="close" class="button">
Fermer
Close
</button>
</div>
</transition>
@@ -35,7 +35,7 @@
</script>
<style lang="scss" scoped>
@import '@/style/shared.scss';
@import '../style/colors.scss';
/*Modale annimation*/
.modal-animation-enter-from,
@@ -69,7 +69,7 @@
width: 100vw;
height: 100vh;
position: fixed;
z-index: 1;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
@@ -110,11 +110,11 @@ h1{
border-radius: 0.75em;
padding: 0.25em;
background-color: #e5e5e5;
color: $red;
color: darken($action-normal, 30%);
font-size: 1.7em;
transition: color 0.5s ease;
transition: color 0.25s ease;
&:hover{
color: lighten($red, 15%);
color: darken($action-normal, 45%);;
cursor:pointer;
}
}
@@ -128,18 +128,44 @@ h1{
-ms-overflow-style: none;
}
.button{
border-radius: 0.5em;
margin:0.5em auto;
display: block;
padding: 0.4em 0.75em;
border:none;
color:$red;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2rem;
font-weight: 600;
background-color: $green;
outline: $red;
outline-style: solid;
outline-offset: -5px;
display: block;
margin: 0.5em auto;
border: none;
border-radius: 7px;
font-size:1.3rem;
background-color: $action-normal;
outline : 3px;
outline-style: solid;
outline-offset: -5px;
outline-color: black;
color:black;
padding: 0.3em 0.9em;
transition:0.3s;
&:hover{
cursor: pointer;
background-color: darken($action-normal, 15%)
}
}
// .button{
// border-radius: 0.5em;
// margin:0.5em auto;
// display: block;
// padding: 0.5em 1em;
// border:none;
// color:$renforced-normal;
// font-family: Arial, Helvetica, sans-serif;
// font-size: 1.2rem;
// font-weight: 600;
// background-color: $action-normal;
// outline: $renforced-normal;
// outline-style: solid;
// outline-offset: -5px;
// transition: 0.25s ease;
// &:hover{
// background-color: darken($action-normal, 10%);
// cursor:pointer;
// }
// }
</style>

48
src/components/Name.vue
View File

@@ -38,7 +38,7 @@ const burger = useBurgerStore()
</template>
<style lang="scss" scoped>
@import "@/style/shared.scss";
@import '@/style/colors.scss';
.name{
display:flex;
@@ -48,18 +48,20 @@ const burger = useBurgerStore()
// border : #f0f solid 1px;
& h1{
font-size: 2.7rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
position :relative;
color: $page-title;
font-weight: bold;
margin-top: 0.5em;
padding: 0em ;
// border : #f0f solid 1px;
animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
position :relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5em;
padding: 0em ;
font-family: 'acme', Arial, Helvetica, sans-serif;
font-size: 2.7rem;
font-weight: bold;
letter-spacing: 0.2em;
color: $title-normal;
// border : #f0f solid 1px;
animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
& div {
display:flex;
margin:0;
@@ -87,23 +89,26 @@ h2{
font-size:1.7rem;
font-weight: bold;
text-align: right;
color:$white;
color:$main-normal;
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
font-family: 'acme', Arial, Helvetica, sans-serif;
font-style: italic;
letter-spacing: 0.2ch;
}
@keyframes title-h1{
0%{
margin-top: 1.6em
margin-top: 1.6em;
color:$renforced-normal
}
}
@keyframes title-spans{
0% {
transform: rotateY(360deg);
// color: $red;
// color: $renforced-normal;
}
100% {
@@ -118,18 +123,21 @@ h2{
}
}
@media (max-width: 320px){
@media (width < 400px){
.name{
margin : 0;
}
}
@media (max-width: 520px){
@media (width < 520px){
.name h1 .r-letter{
margin-left:2ch;
}
.name h1 .i-letter{
margin-right:2ch;
}
.come-in h2{
margin-right: 0.5em;
}
}
</style>

55
src/components/Spinner.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<div>
</div>
</template>
<script>
export default {
name : 'SpinnerCpnt'
}
</script>
<style lang="scss" scoped>
div{
//display: inline-block;
width: 1.0em;
margin-right: 1ch;
aspect-ratio: 1;
border:3px solid #ff00c8;
border-top:3px solid rgb(216, 226, 253);
border-radius:50%;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1.2s;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-transition-property: -moz-transform;
-moz-animation-name: rotate;
-moz-animation-duration: 1.2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
transition-property: transform;
animation-name: rotate;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>