Compare commits
4 Commits
SEO_enhanc
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 994d1bb1e6 | |||
| 8deab8fa68 | |||
| 310bec2d74 | |||
| 8ac13f6360 |
3
.gitignore
vendored
Executable file → Normal file
@@ -21,3 +21,6 @@ pnpm-debug.log*
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
|
#dockerfile
|
||||||
|
Dockerfile
|
||||||
|
|||||||
25
Dockerfile
@@ -1,25 +0,0 @@
|
|||||||
# 1. Build
|
|
||||||
FROM node:20-alpine AS build
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
COPY package*.json ./
|
|
||||||
RUN npm install
|
|
||||||
|
|
||||||
COPY . .
|
|
||||||
RUN npm run build
|
|
||||||
|
|
||||||
# 2. Serveur nginx
|
|
||||||
FROM nginx:alpine
|
|
||||||
|
|
||||||
# Supprime la config par défaut
|
|
||||||
RUN rm /etc/nginx/conf.d/default.conf
|
|
||||||
|
|
||||||
# Ajoute ta config
|
|
||||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
|
||||||
|
|
||||||
# Copie le build
|
|
||||||
COPY --from=build /app/dist /usr/share/nginx/html
|
|
||||||
|
|
||||||
EXPOSE 8080
|
|
||||||
|
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
|
||||||
0
babel.config.js
Executable file → Normal file
10
htaccess/.htaccess
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
RewriteEngine On
|
||||||
|
RewriteCond %{SERVER_PORT} !=443
|
||||||
|
RewriteRule ^(.*)$ https://www.raffiskender.com/$1 [R=301,L]
|
||||||
|
RewriteBase /
|
||||||
|
RewriteRule ^index\.html$ - [L]
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule . /index.html [L]
|
||||||
|
</IfModule>
|
||||||
0
jsconfig.json
Executable file → Normal file
19
nginx.conf
@@ -1,19 +0,0 @@
|
|||||||
server {
|
|
||||||
listen 8080;
|
|
||||||
|
|
||||||
server_name localhost;
|
|
||||||
|
|
||||||
root /usr/share/nginx/html;
|
|
||||||
index index.html;
|
|
||||||
|
|
||||||
# SPA Vue → fallback obligatoire
|
|
||||||
location / {
|
|
||||||
try_files $uri $uri/ /index.html;
|
|
||||||
}
|
|
||||||
|
|
||||||
# cache des assets (optionnel mais recommandé)
|
|
||||||
location /assets/ {
|
|
||||||
expires 1y;
|
|
||||||
add_header Cache-Control "public, immutable";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
0
package-lock.json
generated
Executable file → Normal file
0
package.json
Executable file → Normal file
0
public/favicon.ico
Executable file → Normal file
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
0
public/image.ico
Executable file → Normal file
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
2
public/index.html
Executable file → Normal file
@@ -4,9 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<meta name="description" content="Here is Raffi's portfolio. It shows who I am and showcases some of my projects.">
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>image.ico">
|
<link rel="icon" href="<%= BASE_URL %>image.ico">
|
||||||
|
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
0
src/App.vue
Executable file → Normal file
|
Before Width: | Height: | Size: 477 KiB |
@@ -1,140 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-back">
|
|
||||||
<div class="card-back__frame"></div>
|
|
||||||
</div>
|
|
||||||
<div class="card-front">
|
|
||||||
<div class="card-front__frame">
|
|
||||||
<div class="card-front__content"
|
|
||||||
:class="{ animate: isFlipped }"
|
|
||||||
v-bind:style= "{ 'background-image': 'url(' + require('../assets/' + bg ) + ')'}">
|
|
||||||
<h3>{{ title }}</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { defineProps, ref } from 'vue';
|
|
||||||
//import { useCardsStore } from '@/stores/cards'
|
|
||||||
|
|
||||||
const isFlipped = ref(false)
|
|
||||||
|
|
||||||
// const cardsStore = useCardsStore()
|
|
||||||
|
|
||||||
// const toggleCard = (id) => {
|
|
||||||
// isFlipped.value = !isFlipped.value
|
|
||||||
// cardsStore.reset();
|
|
||||||
// const functionName = 'toggleCard' + id
|
|
||||||
// cardsStore.toggleCard1();
|
|
||||||
|
|
||||||
//}
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: String,
|
|
||||||
bg : String,
|
|
||||||
//id : Number
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
width: 200px;
|
|
||||||
height: 300px;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-origin: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flipped .card-content {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back,
|
|
||||||
.card-front {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back__frame {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-position: center;
|
|
||||||
background-image: url(../assets/back.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__frame {
|
|
||||||
background-image: url(../assets/face.svg);
|
|
||||||
background-position: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
//overflow: hidden;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__content {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-0px);
|
|
||||||
background-color: rgb(117, 148, 138);
|
|
||||||
height: 88%;
|
|
||||||
width: 80%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: solid black 5px;
|
|
||||||
//overflow: hidden; /* a pb here, it dismiss the translate Z*/
|
|
||||||
position : relative;
|
|
||||||
|
|
||||||
background-size: 300%;
|
|
||||||
background-position: 500px 500px;
|
|
||||||
|
|
||||||
transition : 2s;
|
|
||||||
|
|
||||||
&.animate{
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
transform: translateZ(-60px) rotateY(180deg);
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgb(255, 31, 31);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-back">
|
|
||||||
<div class="card-back__frame"></div>
|
|
||||||
</div>
|
|
||||||
<div class="card-front">
|
|
||||||
<div class="card-front__frame">
|
|
||||||
<div class="card-front__content"
|
|
||||||
:class="{ animate: isFlipped }">
|
|
||||||
<h3>Who <br> Am <br> I ?<br></h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { defineProps, ref } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: String,
|
|
||||||
});
|
|
||||||
|
|
||||||
const isFlipped = ref(false);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
width: 200px;
|
|
||||||
height: 300px;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-origin: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flipped .card-content {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back,
|
|
||||||
.card-front {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back__frame {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-position: center;
|
|
||||||
background-image: url(../assets/back.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__frame {
|
|
||||||
background-image: url(../assets/face.svg);
|
|
||||||
background-position: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
//overflow: hidden;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__content {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-0px);
|
|
||||||
background-color: rgb(117, 148, 138);
|
|
||||||
height: 88%;
|
|
||||||
width: 80%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: solid black 5px;
|
|
||||||
//overflow: hidden; /* a pb here, it dismiss the translate Z*/
|
|
||||||
position : relative;
|
|
||||||
background: rgba(76, 175, 80, 0.9); /* Green background with 30% opacity */
|
|
||||||
background-image: url('../assets/question.png');
|
|
||||||
background-size: 200%;
|
|
||||||
background-position: 500px 500px;
|
|
||||||
|
|
||||||
transition : 2s;
|
|
||||||
|
|
||||||
&.animate{
|
|
||||||
background-position: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
transform: translateZ(-60px) rotateY(180deg);
|
|
||||||
padding:0.25rem 1rem;
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgb(255, 31, 31);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
background-color: rgba(0, 0, 0, 0.486);
|
|
||||||
box-shadow: 0px 0px 15px rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Name from './Name.vue';
|
|
||||||
import { useBurgerStore } from '@/stores/burger';
|
|
||||||
//import { Ref } from 'vue';
|
|
||||||
|
|
||||||
const burger = useBurgerStore()
|
|
||||||
|
|
||||||
const turnMyCard = (event) => {
|
|
||||||
let link = event.currentTarget
|
|
||||||
link.classList.add('turned')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="images-grid-gallery">
|
|
||||||
<a class="image-link" href="#"
|
|
||||||
@click="turnMyCard($event)"
|
|
||||||
>
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image hide"
|
|
||||||
src="@/assets/MaPhoto.jpg"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
<img class="image_background"
|
|
||||||
src="@/assets/question.png"
|
|
||||||
alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image_background" src="@/assets/question.png" alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image_background" src="@/assets/question.png" alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image_background" src="@/assets/question.png" alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
|
||||||
|
|
||||||
@import '@/style/colors.scss';
|
|
||||||
|
|
||||||
.images-grid-gallery {
|
|
||||||
//max-width: $maxWidth;
|
|
||||||
margin: 0 1em;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat (2, 1fr);
|
|
||||||
//grid-auto-columns: minmax(10px, auto);
|
|
||||||
gap:1em;
|
|
||||||
//border : 3px solid white;
|
|
||||||
height:100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-link {
|
|
||||||
display: flex;
|
|
||||||
border : 3px solid white;
|
|
||||||
background : white;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin:0 auto;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
width: $imageWidth;
|
|
||||||
overflow: hidden;
|
|
||||||
transform: rotateY(0deg);
|
|
||||||
transition: 1s;
|
|
||||||
&.turned{
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
& > .image-container {
|
|
||||||
border : 3px solid white;
|
|
||||||
border-radius: 22px;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(1), &:nth-child(2){
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
aspect-ratio: 8/11;
|
|
||||||
}
|
|
||||||
&:nth-child(3), &:nth-child(4){
|
|
||||||
aspect-ratio: 8/11;
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 1 to 5 {
|
|
||||||
&:nth-child(#{$i}) > .image-container > .image_background{
|
|
||||||
transform:scale(1.0);
|
|
||||||
transition: 0.5s;
|
|
||||||
position:relative;
|
|
||||||
bottom:-400px;
|
|
||||||
left:-120px;
|
|
||||||
animation-duration: 1000ms;
|
|
||||||
animation-name: show-gallery;
|
|
||||||
animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
|
||||||
animation-delay: $i*200 + 1000ms;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover .image_background{
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
&:hover > .image_background:before {
|
|
||||||
opacity: 1;
|
|
||||||
left: -5px;
|
|
||||||
top: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide{
|
|
||||||
display : none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 720px){
|
|
||||||
.images-grid-gallery{
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes show-gallery {
|
|
||||||
0%{
|
|
||||||
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
bottom: 300px;;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// @keyframes menu-shake{
|
|
||||||
// from {
|
|
||||||
// //opacity: 0;
|
|
||||||
// filter: drop-shadow(-150px 0px 10px #4d0000);
|
|
||||||
// //background-color: rgb(99, 0, 0);
|
|
||||||
// }
|
|
||||||
// 10%{
|
|
||||||
// //opacity: 50%;
|
|
||||||
// filter: drop-shadow(150px 0px 3px #4d0000);
|
|
||||||
// }
|
|
||||||
// 20%{
|
|
||||||
// filter: drop-shadow(-100px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 30%{
|
|
||||||
// filter: drop-shadow(50px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 40%{
|
|
||||||
// filter: drop-shadow(-25px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 50%{
|
|
||||||
// filter: drop-shadow(10px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 80%{
|
|
||||||
|
|
||||||
// filter: drop-shadow(-10px 0px 3px #4d0000);
|
|
||||||
// }
|
|
||||||
// 100%{
|
|
||||||
// //opacity : 100%;
|
|
||||||
// filter: drop-shadow(0px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Card
|
|
||||||
title="Who Am I ?"
|
|
||||||
bg="question.png"
|
|
||||||
></Card>
|
|
||||||
<Card
|
|
||||||
title="Technos I use"
|
|
||||||
bg="legos_vrac.png"
|
|
||||||
></Card>
|
|
||||||
<Card
|
|
||||||
title="Projects"
|
|
||||||
bg="legos_maison.jpg"
|
|
||||||
></Card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
//import Card_WhoAmI from './Card_WhoAmI.vue';
|
|
||||||
import Card from './Card.vue';
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
div{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,227 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Name from './Name.vue';
|
|
||||||
import { useBurgerStore } from '@/stores/burger';
|
|
||||||
//import { Ref } from 'vue';
|
|
||||||
|
|
||||||
const burger = useBurgerStore()
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="menu">
|
|
||||||
<div class="menu-inner">
|
|
||||||
<div class="prez">
|
|
||||||
<Name/>
|
|
||||||
</div>
|
|
||||||
<!-- <ul class="menu-nav">
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Who am I</div>
|
|
||||||
</span></a></li>
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Projects</div>
|
|
||||||
</span></a></li>
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Networks</div>
|
|
||||||
</span></a></li>
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Contact</div>
|
|
||||||
</span></a></li>
|
|
||||||
</ul> -->
|
|
||||||
<!-- <div class="title">
|
|
||||||
|
|
||||||
<p>Introducing myself...</p>
|
|
||||||
</div> -->
|
|
||||||
<div class="gallery">
|
|
||||||
<div class="images">
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Who am I"><img src="../assets/question.png" alt=""></div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Sun"><img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" alt=""></div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Tree"><img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" alt=""></div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Sky"><img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" alt=""></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
//z-index: 1;
|
|
||||||
|
|
||||||
//position: fixed;
|
|
||||||
padding-top: 4em;
|
|
||||||
//top: 0;
|
|
||||||
//left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
background: #1a1e23;
|
|
||||||
opacity: 0;
|
|
||||||
//overflow: auto;
|
|
||||||
//visibility:visible;
|
|
||||||
transition: 0.3s;
|
|
||||||
|
|
||||||
&-nav {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-link {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
font-size: 2rem;
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
span {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
div {
|
|
||||||
transform: translateY(105%);
|
|
||||||
margin: 0.25em 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background: var(--primary-color);
|
|
||||||
transform: scaleX(0);
|
|
||||||
transform-origin: right;
|
|
||||||
transition: transform 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::after {
|
|
||||||
transform: scaleX(0);
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery {
|
|
||||||
margin-top: 50px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.images {
|
|
||||||
margin-top: 36px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap:wrap;
|
|
||||||
// flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.image-link {
|
|
||||||
//min-width: px;
|
|
||||||
width: 20vw;
|
|
||||||
margin: 0 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.image {
|
|
||||||
position: relative;
|
|
||||||
transition: 0.6s;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: attr(data-label);
|
|
||||||
//display: block;
|
|
||||||
top: -50px;
|
|
||||||
left: -0px;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 50px;
|
|
||||||
width: 20vw;
|
|
||||||
color: rgb(218, 218, 218);
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
opacity: 1;
|
|
||||||
padding : 0 0.2em;
|
|
||||||
transition: 0.5s;
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .image {
|
|
||||||
transform: scale(1.1);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
opacity: 1;
|
|
||||||
left: -5px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 250px;
|
|
||||||
transform: translateY(105%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes menu-shake{
|
|
||||||
from {
|
|
||||||
//opacity: 0;
|
|
||||||
filter: drop-shadow(-150px 0px 10px #4d0000);
|
|
||||||
//background-color: rgb(99, 0, 0);
|
|
||||||
}
|
|
||||||
10%{
|
|
||||||
//opacity: 50%;
|
|
||||||
filter: drop-shadow(150px 0px 3px #4d0000);
|
|
||||||
}
|
|
||||||
20%{
|
|
||||||
filter: drop-shadow(-100px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
30%{
|
|
||||||
filter: drop-shadow(50px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
40%{
|
|
||||||
filter: drop-shadow(-25px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
50%{
|
|
||||||
filter: drop-shadow(10px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
80%{
|
|
||||||
|
|
||||||
filter: drop-shadow(-10px 0px 3px #4d0000);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
//opacity : 100%;
|
|
||||||
filter: drop-shadow(0px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
<script>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class = "prez">
|
|
||||||
<h2>
|
|
||||||
Faisons connaissance
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi, alias sed. Distinctio accusantium nam laboriosam velit. Unde, ea cum maiores voluptas voluptates molestias harum consectetur fugiat modi qui, ipsum vel illum officiis fuga quibusdam. Quis perspiciatis doloremque provident! Rerum a voluptate quo earum officiis debitis molestiae nam, soluta nesciunt provident.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="sass" scope>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,215 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
width="200"
|
|
||||||
height="300"
|
|
||||||
viewBox="0 0 52.916666 79.374999"
|
|
||||||
version="1.1"
|
|
||||||
id="svg2964"
|
|
||||||
sodipodi:docname="back.svg"
|
|
||||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
|
||||||
<sodipodi:namedview
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1"
|
|
||||||
objecttolerance="10"
|
|
||||||
gridtolerance="10"
|
|
||||||
guidetolerance="10"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1005"
|
|
||||||
id="namedview878"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="1.337684"
|
|
||||||
inkscape:cx="187.21052"
|
|
||||||
inkscape:cy="45.376874"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="0"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="svg2964"
|
|
||||||
units="px"
|
|
||||||
inkscape:document-rotation="0" />
|
|
||||||
<defs
|
|
||||||
id="defs2958" />
|
|
||||||
<metadata
|
|
||||||
id="metadata2961">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
<dc:title></dc:title>
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
<g
|
|
||||||
id="g52"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,2.9932142,1.0903296)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 208.874 c 4.687,0 8.516,-3.83 8.516,-8.516 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H 0 c -4.686,0 -8.516,3.831 -8.516,8.517 V -8.516 C -8.516,-3.83 -4.686,0 0,0"
|
|
||||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path54" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g56"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,51.232427,1.6162318)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 c 1.655,-1.557 2.69,-3.761 2.69,-6.198 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H -214.7 c -2.609,0 -4.949,1.188 -6.515,3.048 z"
|
|
||||||
style="fill:#e7e8e9;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path58" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g60"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,4.9671332)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 176.886 c 4.085,0 7.423,-3.337 7.423,-7.424 v -291.211 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 H 0 c -4.085,0 -7.422,3.339 -7.422,7.424 V -7.424 C -7.422,-3.338 -4.085,0 0,0"
|
|
||||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path62" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g64"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,4.9671332)"
|
|
||||||
style="fill:#2b9580;fill-opacity:1">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 176.886 c 4.085,0 7.423,-3.337 7.423,-7.424 v -291.211 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 H 0 c -4.085,0 -7.422,3.339 -7.422,7.424 V -7.424 C -7.422,-3.338 -4.085,0 0,0"
|
|
||||||
style="fill:#2b9580;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path66" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g68"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,47.995298,6.5646935)"
|
|
||||||
style="fill:#277c6b;fill-opacity:1">
|
|
||||||
<path
|
|
||||||
d="m 0,0 c 0.007,-0.126 0.01,-0.253 0.01,-0.382 v -291.212 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 h -176.886 c -4.085,0 -7.422,3.339 -7.422,7.424 v 1.373 z"
|
|
||||||
style="fill:#277c6b;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path70" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g72"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,2.9932142,1.4019369)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 208.874 c 3.928,0 7.142,-3.215 7.142,-7.143 v -323.2 c 0,-3.928 -3.214,-7.144 -7.142,-7.144 H 0 c -3.928,0 -7.142,3.216 -7.142,7.144 v 323.2 C -7.142,-3.215 -3.928,0 0,0 m 0.001,6.179 h 208.872 c 7.328,0 13.323,-5.995 13.323,-13.323 v -323.199 c 0,-7.328 -5.995,-13.321 -13.323,-13.321 H 0.001 c -7.328,0 -13.323,5.993 -13.323,13.321 V -7.144 c 0,7.328 5.995,13.323 13.323,13.323"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path74" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g76"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,5.2785134)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 176.886 c 3.329,0 6.051,-2.722 6.051,-6.051 v -291.212 c 0,-3.328 -2.722,-6.05 -6.051,-6.05 H 0 c -3.328,0 -6.049,2.722 -6.049,6.05 V -6.051 C -6.049,-2.722 -3.328,0 0,0 m 0.001,6.177 h 176.885 c 6.727,0 12.23,-5.501 12.23,-12.228 v -291.212 c 0,-6.727 -5.503,-12.23 -12.23,-12.23 H 0.001 c -6.726,0 -12.229,5.503 -12.229,12.23 V -6.051 c 0,6.727 5.503,12.228 12.229,12.228"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path78" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g80"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,60.691743)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 62.646,-62.648 54.047,-62.786 0,-8.739 -54.973,-63.712 c -3.049,0.017 -5.943,0.043 -8.661,0.078 z m 0,40.518 96.802,-96.802 c -1.131,-2.058 -2.836,-3.487 -4.317,-4.421 L 0,31.779 -92.151,-60.37 c -1.829,1.256 -3.154,2.87 -4.11,4.63 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path82" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g84"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,62.808039)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 49.845,49.845 H 41.108 L 0,8.737 -41.108,49.845 h -8.739 z M 0,-40.518 90.363,49.845 H 81.627 L 0,-31.78 -81.627,49.845 h -8.739 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path86" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g88"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,18.683208)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 62.646,62.646 54.047,62.786 0,8.738 -54.973,63.71 c -3.049,-0.018 -5.943,-0.043 -8.661,-0.077 z m 0,-40.52 96.802,96.804 c -1.131,2.058 -2.836,3.486 -4.317,4.421 L 0,-31.781 -92.151,60.368 c -1.829,-1.256 -3.154,-2.871 -4.11,-4.628 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path90" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g92"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,16.567165)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 49.845,-49.847 H 41.108 L 0,-8.739 -41.108,-49.847 h -8.739 z M 0,40.519 90.363,-49.847 H 81.627 L 0,31.78 -81.627,-49.847 h -8.739 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path94" />
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
d="m 25.764178,32.384966 h 1.388535 v 14.604977 h -1.388535 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.225782"
|
|
||||||
id="path96" />
|
|
||||||
<g
|
|
||||||
id="g98"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.458176,28.967155)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 10.639,-10.639 0,-21.279 l -10.638,10.64 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path100" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g102"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.458176,45.580219)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 10.639,-10.64 0,-21.279 -10.638,-10.64 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path104" />
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
d="M 33.690062,40.38865 H 19.226829 v -1.402166 h 14.463233 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.225782"
|
|
||||||
id="path106" />
|
|
||||||
<g
|
|
||||||
id="g108"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,37.074672,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -10.641,-10.638 -21.279,0 -10.641,10.639 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path110" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g112"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,20.622846,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -10.638,-10.638 -21.277,0 -10.638,10.639 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path114" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g116"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,40.135246,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -5.029,-5.029 -10.057,0 -5.029,5.029 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path118" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g120"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,41.849278,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -2.157,-2.156 -4.314,0 -2.157,2.157 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path122" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g124"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,12.781106,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 5.029,-5.029 10.057,0 5.029,5.029 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path126" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g128"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,11.067569,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 2.157,-2.156 4.313,0 2.157,2.157 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path130" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 8.6 KiB |
@@ -1,87 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
width="200"
|
|
||||||
height="300"
|
|
||||||
viewBox="0 0 52.916666 79.374999"
|
|
||||||
version="1.1"
|
|
||||||
id="svg2964"
|
|
||||||
sodipodi:docname="face.svg"
|
|
||||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
|
||||||
<rect
|
|
||||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.86016;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="rect1067"
|
|
||||||
width="52.916664"
|
|
||||||
height="79.375"
|
|
||||||
x="0"
|
|
||||||
y="-1e-06"
|
|
||||||
ry="4.6153121" />
|
|
||||||
<g
|
|
||||||
id="g965"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,51.232424,1.6162327)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 c 1.655,-1.557 2.69,-3.761 2.69,-6.198 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H -214.7 c -2.609,0 -4.949,1.188 -6.515,3.048 l 13.82594,20.92925 7.27488,-7.76589 182.844792,1.31488 4.142578,4.36599 -0.699128,295.09452 z"
|
|
||||||
style="fill:#e7e8e9;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path963"
|
|
||||||
sodipodi:nodetypes="cssssccccccc" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g969"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,2.9932137,1.4019372)"
|
|
||||||
style="fill:#000000;fill-opacity:1;stroke-width:0.99959033;stroke-miterlimit:4;stroke-dasharray:none;stroke:none;stroke-opacity:1">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 208.874 c 3.928,0 7.142,-3.215 7.142,-7.143 v -323.2 c 0,-3.928 -3.214,-7.144 -7.142,-7.144 H 0 c -3.928,0 -7.142,3.216 -7.142,7.144 v 323.2 C -7.142,-3.215 -3.928,0 0,0 m 0.001,6.179 h 208.872 c 7.328,0 13.323,-5.995 13.323,-13.323 v -323.199 c 0,-7.328 -5.995,-13.321 -13.323,-13.321 H 0.001 c -7.328,0 -13.323,5.993 -13.323,13.321 V -7.144 c 0,7.328 5.995,13.323 13.323,13.323"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99959033;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="path967" />
|
|
||||||
</g>
|
|
||||||
<rect
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.54807706;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="rect1029"
|
|
||||||
width="43.43111"
|
|
||||||
height="69.889442"
|
|
||||||
x="4.7427778"
|
|
||||||
y="4.7427783"
|
|
||||||
rx="2.6795108" />
|
|
||||||
<sodipodi:namedview
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1"
|
|
||||||
objecttolerance="10"
|
|
||||||
gridtolerance="10"
|
|
||||||
guidetolerance="10"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1005"
|
|
||||||
id="namedview878"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="1.8917709"
|
|
||||||
inkscape:cx="89.622571"
|
|
||||||
inkscape:cy="137.14202"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="0"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="svg2964"
|
|
||||||
units="px"
|
|
||||||
inkscape:document-rotation="0" />
|
|
||||||
<defs
|
|
||||||
id="defs2958" />
|
|
||||||
<metadata
|
|
||||||
id="metadata2961">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
<dc:title />
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.4 KiB |
0
src/assets/CV-favicon.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
0
src/assets/MaPhoto.jpg
Executable file → Normal file
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
0
src/assets/arrow up.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
0
src/assets/arrow-list.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
0
src/assets/bulle.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
0
src/assets/burger.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
0
src/assets/by.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
0
src/assets/images/LDC/LDC_screenshot_1.png
Executable file → Normal file
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
0
src/assets/images/LDC/LDC_screenshot_2.png
Executable file → Normal file
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
0
src/assets/images/LDC/LDC_screenshot_3.png
Executable file → Normal file
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
0
src/assets/images/pop/Screenshot_pop1.webp
Executable file → Normal file
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
0
src/assets/images/pop/Screenshot_pop2.webp
Executable file → Normal file
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
0
src/assets/images/pop/Screenshot_pop3.webp
Executable file → Normal file
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
0
src/assets/images/pop/back.webp
Executable file → Normal file
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
0
src/assets/lego_bridge.png
Executable file → Normal file
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 195 KiB |
0
src/assets/legos_maison.jpg
Executable file → Normal file
|
Before Width: | Height: | Size: 277 KiB After Width: | Height: | Size: 277 KiB |
0
src/assets/legos_maison2.jpg
Executable file → Normal file
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
0
src/assets/legos_vrac.jpg
Executable file → Normal file
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
0
src/assets/legos_vrac.png
Executable file → Normal file
|
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 258 KiB |
0
src/assets/legos_vrac_solo.png
Executable file → Normal file
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
0
src/assets/legos_vrac_solo2.png
Executable file → Normal file
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
0
src/assets/mailbox.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
0
src/assets/maison.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
0
src/assets/meme.png
Executable file → Normal file
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
0
src/assets/meme1.png
Executable file → Normal file
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
0
src/assets/memeWink.png
Executable file → Normal file
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
0
src/assets/mika-signe.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
0
src/assets/networks.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
0
src/assets/points.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
0
src/assets/portfolio-mini.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
0
src/assets/question.png
Executable file → Normal file
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
0
src/assets/question3.png
Executable file → Normal file
|
Before Width: | Height: | Size: 843 KiB After Width: | Height: | Size: 843 KiB |
0
src/assets/questionSolo.png
Executable file → Normal file
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
0
src/assets/raffi.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
0
src/assets/vecteezy_set-of-hand-drawn-question-marks-doodle-questions-marks_6058847.jpg
Executable file → Normal file
|
Before Width: | Height: | Size: 420 KiB After Width: | Height: | Size: 420 KiB |
0
src/components/Burger.vue
Executable file → Normal file
0
src/components/Button.vue
Executable file → Normal file
0
src/components/Footer.vue
Executable file → Normal file
0
src/components/Footer_1.vue
Executable file → Normal file
0
src/components/Menu.vue
Executable file → Normal file
0
src/components/Modal.vue
Executable file → Normal file
0
src/components/Name.vue
Executable file → Normal file
0
src/components/Spinner.vue
Executable file → Normal file
0
src/ici.txt
Executable file → Normal file
0
src/main.js
Executable file → Normal file
0
src/reset.css
Executable file → Normal file
25
src/services/form.js
Executable file → Normal file
@@ -3,22 +3,15 @@ import axios from "axios";
|
|||||||
export const formService =
|
export const formService =
|
||||||
{
|
{
|
||||||
// Propriété qui stocke la BASE URL de notre API
|
// Propriété qui stocke la BASE URL de notre API
|
||||||
//base_url : "http://192.168.42.124/projets_wordpress/BOPortfolio/wordpress/wp-json/",
|
base_url : "https://orange-firefly-f5a4.raffiskender.workers.dev/",
|
||||||
//base_url : "http://192.168.1.41/projets_wordpress/BOPortfolio/wordpress/wp-json/",
|
|
||||||
base_url : "https://bo-portfolio.raffiskender.com/wp-json/",
|
|
||||||
//base_url : "http://localhost/projets_wordpress/BOPortfolio/wordpress/wp-json/",
|
|
||||||
|
|
||||||
// Retrieve data from backend
|
// Retrieve data from backend
|
||||||
async sendMessage(token, payload)
|
async sendMessage(token, payload)
|
||||||
{
|
{
|
||||||
//console.log(token, payload);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const response = await axios.post(
|
const response = await axios.post(
|
||||||
this.base_url + "bo-portfolio/v1/submitForm",
|
this.base_url,
|
||||||
{
|
{
|
||||||
token: token,
|
token,
|
||||||
json: payload
|
json: payload
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -27,14 +20,4 @@ export const formService =
|
|||||||
});
|
});
|
||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
// async verifyRecaptcha(token){
|
|
||||||
|
|
||||||
|
|
||||||
// return fetch(VERIFY_URL, {
|
|
||||||
// method: "POST",
|
|
||||||
// headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
||||||
// body: `secret=${SECRET_KEY}&response=${req.body['g-recaptcha-response']}`,
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
0
src/stores/burger.js
Executable file → Normal file
0
src/style/colors.scss
Executable file → Normal file
0
src/style/shared_old.scss
Executable file → Normal file
0
src/style/widths.scss
Executable file → Normal file
0
src/views/404.vue
Executable file → Normal file
1
src/views/Contact.vue
Executable file → Normal file
@@ -59,7 +59,6 @@ const onSubmit = () => {
|
|||||||
{action: 'submit'})
|
{action: 'submit'})
|
||||||
.then( async (token) => {
|
.then( async (token) => {
|
||||||
const response = await formService.sendMessage(token, payload)
|
const response = await formService.sendMessage(token, payload)
|
||||||
//console.log(response)
|
|
||||||
if (response === true){
|
if (response === true){
|
||||||
awaiting.value = false;
|
awaiting.value = false;
|
||||||
name.value = '';
|
name.value = '';
|
||||||
|
|||||||
@@ -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>
|
|
||||||
0
src/views/Index.vue
Executable file → Normal file
0
src/views/Networks.vue
Executable file → Normal file
0
src/views/Profile.vue
Executable file → Normal file
0
src/views/Projects.vue
Executable file → Normal file
@@ -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>
|
|
||||||