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

Merge branch 'master' into read_projects_from_last

Browse Source
This commit is contained in:
raffiskender
2023-12-05 09:14:37 +03:00
parent bd513b9fb4 69b69d32e6
commit 3325eaa118
4 changed files with 84 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Burger.vue
View File

@@ -2,6 +2,7 @@
import { useBurgerStore } from '@/stores/burger'
const burger = useBurgerStore();
</script>
<template>

110
src/components/Footer.vue
View File

@@ -1,28 +1,29 @@
<script setup>
import { ref } from 'vue';
const show = ref(true)
const show = ref(false)
</script>
<template>
<button class="arrow" @click="show = !show">
<svg
viewBox="0 0 20 20"
viewBox="0 0 10 7.4"
class="arrow"
v-bind:class="show ? 'down' : ''"
@click="show = !show"
:class="{'down': show}"
>
<!--
This circle is now make the button...
<circle
style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path833"
cx="10"
cy="10"
r="8" />
r="8" /> -->
<path
style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 5.5,11 10,7 14.5,11"
id="path841"
sodipodi:nodetypes="ccc" />
style="fill:none;stroke:#000000;stroke-width:1.0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 1,5 5,1 9,5"/>
</svg>
</button>
<div class="footer"
v-bind:class="show ? '' : 'hide'">
@@ -133,9 +134,8 @@ const show = ref(true)
</g>
</g>
</svg>
<div class="raffi">
COUCOU
<!-- <svg id = "raffi" viewBox="75 -50 300 150"> -->
<svg id = "raffi" viewBox="75 -50 300 150">
<path id="raffi_path"
style="fill:none;
stroke-width:6;
@@ -153,8 +153,7 @@ M 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.36458
M 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896
M 312.83425,36 313,29
M 311.63779,10 312.2454,10"/>
<!-- </svg> -->
</div>
</svg>
<svg
viewBox="465 -39 150 175"
style="height : 1.8em"
@@ -220,7 +219,7 @@ M 311.63779,10 312.2454,10"/>
justify-content: center;
flex-wrap: wrap;
background-color: hsla(0, 0%, 0%, 0.904);
min-height:3.5em;
min-height:2.5em;
width: 100%;
max-width: $maxWidth;
z-index: 9;
@@ -229,53 +228,39 @@ M 311.63779,10 312.2454,10"/>
transform:translateY(100%)
}
}
svg{
height: 2.5em;
& > circle{
fill:$action-normal;
transition : 0.25s;
}
}
h1{
font-size: 2em;
margin-right: 0.5em;
color:white;
svg{
height: 2em;
}
.raffi{
background: linear-gradient(90deg, #0f0, #f0f, #00f, #FF0, #0ff);
color:transparent;
}
.stop1{
stop-color:#f0f;
}
.stop2{
offset-gradient: 20%;
stop-color:#f00;
}
.stop3{
stop-color:#0f0;
}
.stop4{
stop-color:#00f;
}
.stop5{
stop-color:#f0f;
}
.arrow{
margin-left: 0.4em;
position : fixed;
button.arrow{
position:fixed;
bottom:0.5em;
transition: 0.35s;
z-index: 99;
&.up{
transform: rotate(0deg);
aspect-ratio: 1;
width:2.1em;
text-align: center;
border: none;
background-color: $action-normal;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin-left:0.5em;
padding:0;
//box-sizing: border-box;
& > svg{
transition: 0.35s;
width:75%;
margin: 0;
//position: absolute;
transform: scale(1, 1);
&.down {
transform: scale(1, -1);
}
&.down{
transform: rotate(180deg);
}
&:hover{
cursor: pointer;
@@ -283,7 +268,16 @@ M 311.63779,10 312.2454,10"/>
fill:$action-light;
}
}
}
}
h1{
font-size: 2em;
margin-right: 0.5em;
color:white;
}
@supports (backdrop-filter: blur(0.5rem)){
div.footer{
background-color: hsla(0, 100%, 0%, 0.25);

5
src/components/Footer copy.vue → src/components/Footer_1.vue
View File

@@ -136,7 +136,7 @@ const show = ref(false)
<svg
viewBox="75 -50 300 150"
style="fill:none;
stroke:white;
stroke:rgb(189, 25, 25);
stroke-width:5;
stroke-linecap:round;"
>
@@ -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;

24
src/views/Projects.vue
View File

@@ -28,6 +28,12 @@ const items = ref([
bg_image : "url('https://picsum.photos/id/23/200/300')"
},
{ id:4,
selected : false,
name : "A backend for an artist",
bg_image : "url('https://picsum.photos/id/23/200/300')"
},
]);
const handleLeftArrow = () =>{
@@ -146,10 +152,9 @@ const changeSelectedTab = (id) => {
<div class="project"
v-else-if ="items[1].selected">
<p>A presentation of this (finally useful) project... is to be watched soon</p>
<p>A presentation of this (finally useful) project can be watched in the video below... in the language of Shakespeare!</p>
<!-- <p>A presentation of this Watch a presentation of this (finally useful) project... And in the English language!</p> -->
<iframe class="video unavailable" src="https://www.youtube.com/embed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<h4>The project</h4>
<iframe class = "video" src="https://www.youtube.com/embed/3ZlYSN8dt5U" title="Presentation of (my) shopping list project" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <h4>The project</h4>
<p class="project-summary">
The project <a href="https://liste-v2.raffiskender.com" target="_blank">"shopping list"</a> began when I was bored, thinking of what I could code. A teacher used to tell us "make little projects, like a list or a calculator...". So I thought, "Okay, let's create a shopping list for my wife that can also be used by my mom."
</p>
@@ -197,6 +202,19 @@ const changeSelectedTab = (id) => {
<p>Please note that this project will not work on mobile devices</p>
<p><a href="https://memory.raffiskender.com" target="_blank">See this project</a></p>
</div>
<div class="project"
v-else-if ="items[3].selected">
<!-- <p>A presentation of this Watch a presentation of this (finally useful) project... And in the English language!</p> -->
<p class="project-summary">
This website, created by my wife and me, showcases the remarkable work of a great artist. The purpose is to display his own creations, share news, introduce his students, and showcase their artistic endeavors.
</p>
<p class="project-summary">
I created a brief video to showcase and explain the backend I developed for him.
</p>
<iframe class= "video" src="https://www.youtube.com/embed/5oV5-I_yuYA" title="Wordpress backend for an artist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</Transition>
</div>
</template>