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

end of project

Browse Source
This commit is contained in:
Raffiskender
2023-06-20 09:16:28 +02:00
parent e214326ad5
commit 17e5e3fcfe
39 changed files with 1055 additions and 223 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(false)
@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(false)
<div class="footer"
v-bind:class="show ? '' : 'hide'">
<h1>
Design
Designed
</h1>
<svg
viewBox="0 0 100 100"
@@ -249,7 +249,8 @@ const show = ref(false)
</template>
<style lang="scss" scoped>
@import "@/style/shared.scss";
@import '@/style/colors.scss';
@import '@/style/widths.scss';
div.footer{
position : fixed;
@@ -259,7 +260,7 @@ const show = ref(false)
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;
@@ -271,6 +272,10 @@ const show = ref(false)
}
svg{
height: 2.5em;
& > circle{
fill:$action-normal;
transition : 0.25s;
}
}
h1{
font-size: 2em;
@@ -289,6 +294,12 @@ const show = ref(false)
&.down{
transform: rotate(180deg);
}
&:hover{
cursor: pointer;
& > circle{
fill:$action-light;
}
}
}
@supports (backdrop-filter: blur(0.5rem)){
div.footer{

20
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{
@@ -166,7 +166,7 @@ const toggleMenu = () => {
transition:1s ;
-moz-transition:1s ;
-webkit-transition:1s ;
stroke:$white;
stroke:black;
}
& .cross{
stroke-dashoffset: 0 ;
@@ -215,11 +215,11 @@ a{
//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;
@@ -227,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 3px $red-light);
filter: drop-shadow(0 0 3px $action-normal);
transition: filter 0.3s;
}
&:hover::after, &.router-link-exact-active::after{
@@ -265,7 +265,7 @@ a{
@media (width < 750px ){
nav.menu-container{
//border: $white solid 3px;
//border: $main-normal solid 3px;
display: flex;
justify-content: flex-end;
& .burger{

63
src/components/Modal.vue
View File

@@ -35,7 +35,7 @@
</script>
<style lang="scss" scoped>
@import '@/style/shared.scss';
@import '../style/colors.scss';
/*Modale annimation*/
.modal-animation-enter-from,
@@ -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.25s ease;
&:hover{
color: lighten($red, 15%);
color: darken($action-normal, 45%);;
cursor:pointer;
}
}
@@ -128,23 +128,44 @@ h1{
-ms-overflow-style: none;
}
.button{
border-radius: 0.5em;
margin:0.5em auto;
display: block;
padding: 0.5em 1em;
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;
transition: 0.25s ease;
&:hover{
background-color: darken($green, 10%);
cursor:pointer;
}
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>

38
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;
@@ -47,20 +47,21 @@ const burger = useBurgerStore()
margin:0 2.4rem;
// border : #f0f solid 1px;
& h1{font-family: 'acme', Arial, Helvetica, sans-serif;
letter-spacing: 0.2em;
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);
& h1{
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;
@@ -88,7 +89,7 @@ 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;
@@ -99,14 +100,15 @@ h2{
@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% {