some cleaning
This commit is contained in:
@@ -1,72 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
const burger = useBurgerStore();
|
||||
onMounted(() => {
|
||||
burger.check()
|
||||
//console.log("Mounted")
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="logo"></div>
|
||||
<h3>Talking about code</h3>
|
||||
</div>
|
||||
<p>As you guessed, my name is Raffi. I have been working in the beautiful world of maintenance for 20 years, where I have learned a lot about logic. Throughout my life, both for professional purposes and for fun, I have learned several programming languages. Here are some of them: Video Designer, Twido Soft, Zelio Soft, PL7. When I was younger, I also dabbled in Turbo Pascal, Qbasic, and more recently, during the confinement, I explored a bit of C.</p>
|
||||
|
||||
<p>In 2022, I took a five-month training course to further my knowledge of web programming. During this time, I learned HTML, CSS, JavaScript, WordPress, Vue.js, PHP, SQL, database management, and much more! After completing the training, I continued to work independently to delve deeper into WordPress API-REST and gain a better understanding of what can be achieved with Vue.js. Now, I feel prepared to move forward!</p>
|
||||
<p>I'm accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me out of my comfort zone and require quick thinking. As a native French speaker, I'm also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy discovering new things and seizing opportunities to learn and grow. With my experience and language skills, I'm ready to take on new challenges and contribute to motivating projects.</p>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
|
||||
|
||||
.content{
|
||||
& .title{
|
||||
& > .logo{
|
||||
background-image: url('../assets/questionSolo.png');
|
||||
background-size: 80%;
|
||||
}
|
||||
}
|
||||
& > p{
|
||||
|
||||
color : $main-normal;
|
||||
opacity: 1;
|
||||
padding:1em 1.25em 0em 1em;
|
||||
line-height: 1.5em;
|
||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
33%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes image_show{
|
||||
0%{
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
}
|
||||
33%{
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media (width < 600px){
|
||||
.content{
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,130 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
const burger = useBurgerStore();
|
||||
onMounted(() => {
|
||||
burger.check();
|
||||
})
|
||||
|
||||
const items = ref([
|
||||
{ id:1,
|
||||
selected : true,
|
||||
name : "Poils O pattes",
|
||||
bg_image : "url('https://picsum.photos/id/20/200/300')"
|
||||
},
|
||||
{ id:2,
|
||||
selected : false,
|
||||
name : "courses",
|
||||
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||
}
|
||||
]);
|
||||
|
||||
const background = () => {
|
||||
//console.log(items)
|
||||
for (const item of items.value) {
|
||||
if (item.selected)
|
||||
return item.bg_image
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="logo">
|
||||
</div>
|
||||
<h3><span>Projects</span></h3>
|
||||
</div>
|
||||
<div class = "slider">
|
||||
<div class="projects-banner"
|
||||
:style="{backgroundImage : background()}"
|
||||
>
|
||||
<div class="arrow left">
|
||||
〈
|
||||
</div>
|
||||
<div class="tab">
|
||||
<h4 class="project-name">Poils O Pattes</h4>
|
||||
<h4 class="project-name toto">Poils O Pattes</h4>
|
||||
<!-- v-for="item in items"
|
||||
v-bind:key="items.id">
|
||||
<h4 class="project-name"
|
||||
:style="{opacity:item.selected ? 1 : 0, width : item.selected ? '100%' : 0, display:item.selected ? 'block' : 'none'}" >{{item.name}}</h4>
|
||||
-->
|
||||
</div>
|
||||
<!-- <h4 class="project-title poils" v-else-if="items[1].selected" >Pas POP</h4> -->
|
||||
<div class="arrow right">
|
||||
〉
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<p class="project-description">
|
||||
A grooming salon management project undertaken with a team of 5 people over a duration of one month. I had the pleasure of contributing to it as a backend coder and scrum master...
|
||||
</p>
|
||||
<iframe class="video" src="https://www.youtube.com/embed/Q3WiRGLeXSQ?start=2329" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
.content{
|
||||
& > .title {
|
||||
& .logo{
|
||||
background-image: url('../assets/maison.svg');
|
||||
background-size: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin: 0 0.5em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.video{
|
||||
display: block;
|
||||
width: 90%;
|
||||
aspect-ratio: 560/315;
|
||||
margin:auto;
|
||||
}
|
||||
.projects-banner{
|
||||
// position:relative;
|
||||
margin: 1em 0.5em;
|
||||
height:3em;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
//background-image: url('https://picsum.photos/seed/picsum/200/300');
|
||||
background-size: 90%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
&.tab{
|
||||
}
|
||||
}
|
||||
|
||||
h4.project-name{
|
||||
width: 0%;
|
||||
//position:absolute;
|
||||
display: inline;
|
||||
border: 1px solid blueviolet;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-size:1.7em;
|
||||
letter-spacing: 0.1em;
|
||||
color:$page-bg;
|
||||
text-align: center;
|
||||
}
|
||||
.arrow{
|
||||
color:white;
|
||||
font-weight: bold;
|
||||
border: 1px solid red;
|
||||
&.left{
|
||||
|
||||
}
|
||||
}
|
||||
.tab{
|
||||
overflow-x: hidden;
|
||||
& > .project-name{
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user