end of project
This commit is contained in:
10
htaccess/.htaccess
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>
|
||||||
13
package-lock.json
generated
13
package-lock.json
generated
@@ -10,6 +10,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
@@ -1744,6 +1745,18 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||||
|
"version": "6.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
|
||||||
|
"integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-common-types": "6.4.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@fortawesome/vue-fontawesome": {
|
"node_modules/@fortawesome/vue-fontawesome": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 562 B |
BIN
public/image.ico
Normal file
BIN
public/image.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -4,7 +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">
|
||||||
<link rel="icon" href="<%= BASE_URL %>icons8-info-16.png">
|
<link rel="icon" href="<%= BASE_URL %>image.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
21
src/App.vue
21
src/App.vue
@@ -43,21 +43,18 @@ const burger = useBurgerStore();
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Courier+Prime&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Courier+Prime&display=swap');
|
||||||
@import "@/style/shared.scss";
|
@import "@/style/widths.scss";
|
||||||
|
@import "@/style/colors.scss";
|
||||||
html {
|
html {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body{
|
body{
|
||||||
//min-height: 100vh;
|
background-color: $body-bg
|
||||||
//background-color: $body-bg;
|
|
||||||
//margin-bottom: 1em;
|
|
||||||
//overflow-y: scroll;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p, li, label{
|
p, li, label{
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
color:$font-color;
|
color:$main-normal;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -90,18 +87,18 @@ p{
|
|||||||
width: 3em;
|
width: 3em;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border : $red-light solid 3px;
|
border : $title-normal solid 3px;
|
||||||
}
|
}
|
||||||
& > h3 {
|
& > h3 {
|
||||||
//display: inline;
|
//display: inline;
|
||||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||||
color: $green;
|
color:$title-normal;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
//filter:drop-shadow(2px 2px 3px $green);
|
//filter:drop-shadow(2px 2px 3px $action-normal);
|
||||||
//transform: translateY(0em);
|
//transform: translateY(0em);
|
||||||
animation: title 0.45s cubic-bezier(0,.37,.27,.94);
|
animation: title 0.45s cubic-bezier(0,.37,.27,.94);
|
||||||
}
|
}
|
||||||
@@ -139,7 +136,6 @@ p{
|
|||||||
//position : relative;
|
//position : relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
//border : 2px solid white;
|
//border : 2px solid white;
|
||||||
background-color: rgb(182, 182, 182);
|
|
||||||
box-shadow: 0px 0px 20px 20px #363636;
|
box-shadow: 0px 0px 20px 20px #363636;
|
||||||
max-width: $maxWidth;
|
max-width: $maxWidth;
|
||||||
padding-bottom: 2em;
|
padding-bottom: 2em;
|
||||||
@@ -149,6 +145,9 @@ p{
|
|||||||
nav.menu-container{
|
nav.menu-container{
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
|
.index{
|
||||||
|
background-color: rgb(182, 182, 182);
|
||||||
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
background-color: $page-bg;
|
background-color: $page-bg;
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ const turnMyCard = (event) => {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
||||||
|
|
||||||
@import "@/style/shared.scss";
|
@import '@/style/colors.scss';
|
||||||
|
|
||||||
.images-grid-gallery {
|
.images-grid-gallery {
|
||||||
//max-width: $maxWidth;
|
//max-width: $maxWidth;
|
||||||
|
|||||||
BIN
src/assets/images/LDC/LDC_screenshot_1.png
Normal file
BIN
src/assets/images/LDC/LDC_screenshot_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/images/LDC/LDC_screenshot_2.png
Normal file
BIN
src/assets/images/LDC/LDC_screenshot_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/assets/images/LDC/LDC_screenshot_3.png
Normal file
BIN
src/assets/images/LDC/LDC_screenshot_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/images/pop/Screenshot_pop1.webp
Normal file
BIN
src/assets/images/pop/Screenshot_pop1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/pop/Screenshot_pop2.webp
Normal file
BIN
src/assets/images/pop/Screenshot_pop2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/images/pop/Screenshot_pop3.webp
Normal file
BIN
src/assets/images/pop/Screenshot_pop3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/pop/back.webp
Normal file
BIN
src/assets/images/pop/back.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
120
src/assets/portfolio-mini.svg
Normal file
120
src/assets/portfolio-mini.svg
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
<?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"
|
||||||
|
version="1.0"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 12 12"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
id="svg939"
|
||||||
|
sodipodi:docname="portfolio-mini.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||||
|
<metadata
|
||||||
|
id="metadata945">
|
||||||
|
<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>
|
||||||
|
<defs
|
||||||
|
id="defs943" />
|
||||||
|
<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="namedview941"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:zoom="6.7346939"
|
||||||
|
inkscape:cx="12.465035"
|
||||||
|
inkscape:cy="14.182917"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g1085" />
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer2"
|
||||||
|
inkscape:label="First Wallet"
|
||||||
|
style="display:none">
|
||||||
|
<g
|
||||||
|
transform="matrix(0.1,0,0,-0.1,0.23462133,637.24871)"
|
||||||
|
fill="#797979"
|
||||||
|
stroke="none"
|
||||||
|
id="g937">
|
||||||
|
<path
|
||||||
|
d="M 2910,6358 C 2289,6306 1680,6060 1185,5664 1044,5551 819,5326 706,5185 -210,4042 -237,2435 641,1270 1161,580 1924,138 2795,24 c 165,-22 580,-25 740,-6 586,72 1097,274 1558,619 692,516 1137,1282 1254,2158 24,181 24,599 0,780 -76,570 -283,1079 -620,1527 -658,875 -1722,1349 -2817,1256 z M 4021,5320 c 48,-13 118,-75 140,-124 16,-36 19,-70 19,-298 v -258 h 259 c 143,0 294,-5 337,-11 151,-21 272,-81 377,-186 76,-77 129,-163 165,-268 l 27,-80 3,-1000 c 2,-651 -1,-1027 -7,-1078 -35,-261 -190,-452 -448,-550 l -58,-22 -1615,-3 c -1810,-3 -1686,-8 -1843,71 -111,55 -227,170 -279,277 -77,157 -73,80 -73,1255 v 1050 l 27,80 c 68,199 214,353 401,421 98,35 196,44 478,44 h 259 v 258 c 0,228 3,262 19,298 21,46 91,111 136,123 43,13 1631,13 1676,1 z"
|
||||||
|
id="path927" />
|
||||||
|
<path
|
||||||
|
d="m 2407,5103 c -4,-3 -7,-109 -7,-235 v -228 h 785 785 l -2,233 -3,232 -776,3 c -426,1 -779,-1 -782,-5 z"
|
||||||
|
id="path929" />
|
||||||
|
<path
|
||||||
|
d="m 1573,4405 c -204,-55 -333,-228 -333,-445 0,-63 2,-68 28,-80 311,-145 567,-254 813,-343 173,-64 463,-157 487,-157 8,0 12,23 12,78 0,53 6,90 19,118 22,48 82,101 131,114 46,13 864,13 910,0 49,-13 109,-66 131,-114 13,-28 19,-65 19,-118 0,-52 4,-78 11,-78 22,0 253,72 409,127 247,87 648,255 883,369 l 37,18 v 66 c 0,218 -131,391 -335,445 -52,13 -248,15 -1615,14 -1305,0 -1563,-3 -1607,-14 z"
|
||||||
|
id="path931" />
|
||||||
|
<path
|
||||||
|
d="m 1240,2847 c 0,-680 2,-812 15,-860 38,-148 136,-254 285,-308 l 65,-24 h 1580 1580 l 65,24 c 155,57 261,178 290,331 16,84 14,1644 -2,1637 -7,-3 -87,-39 -178,-80 -379,-170 -727,-299 -1092,-402 l -58,-16 v -100 c 0,-146 -27,-199 -125,-245 l -50,-24 h -430 -430 l -50,24 c -98,46 -125,99 -125,245 v 100 l -57,16 c -349,98 -759,250 -1136,421 -78,35 -142,64 -144,64 -2,0 -3,-361 -3,-803 z"
|
||||||
|
id="path933" />
|
||||||
|
<path
|
||||||
|
d="m 2790,3240 v -240 h 395 395 v 240 240 h -395 -395 z"
|
||||||
|
id="path935" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer3"
|
||||||
|
inkscape:label="New Wallet"
|
||||||
|
style="display:inline">
|
||||||
|
<g
|
||||||
|
id="g1085"
|
||||||
|
transform="matrix(1.0716333,0,0,1.0716333,-0.10571635,-1.2352784)">
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:0.601028;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="rect1017"
|
||||||
|
width="4.7357831"
|
||||||
|
height="2.570173"
|
||||||
|
x="3.3296895"
|
||||||
|
y="1.8662591"
|
||||||
|
ry="0.81402433" />
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#ce4d03;fill-opacity:1;stroke:#000000;stroke-width:1.20206;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="rect995"
|
||||||
|
width="9.9958"
|
||||||
|
height="7.2557173"
|
||||||
|
x="0.69967973"
|
||||||
|
y="4.0807805"
|
||||||
|
ry="1.2539839" />
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:none;stroke:#000000;stroke-width:0.601028;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 0.28812392,5.6025295 c 0,0 3.41048588,1.774885 5.30693298,1.784842 1.8964474,0.00996 5.4973151,-1.784842 5.4973151,-1.784842"
|
||||||
|
id="path1019"
|
||||||
|
sodipodi:nodetypes="czc" />
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#a8a8a8;fill-opacity:1;stroke:#000000;stroke-width:1.20206;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="rect1013"
|
||||||
|
width="2.1054513"
|
||||||
|
height="1.5281495"
|
||||||
|
x="4.6448545"
|
||||||
|
y="6.4479675"
|
||||||
|
rx="0"
|
||||||
|
ry="0" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.4 KiB |
@@ -61,7 +61,8 @@ const burger = useBurgerStore();
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/style/shared.scss";
|
@import "@/style/colors.scss";
|
||||||
|
@import "@/style/widths.scss";
|
||||||
.button{
|
.button{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top: 0.2em;
|
top: 0.2em;
|
||||||
@@ -83,7 +84,7 @@ const burger = useBurgerStore();
|
|||||||
.line-and-door, .line-middle, .arrow-up, .arrow-down{
|
.line-and-door, .line-middle, .arrow-up, .arrow-down{
|
||||||
transition:1s ;
|
transition:1s ;
|
||||||
stroke-width:10;
|
stroke-width:10;
|
||||||
stroke:$green;
|
stroke:$action-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-and-door{
|
.line-and-door{
|
||||||
@@ -104,18 +105,18 @@ const burger = useBurgerStore();
|
|||||||
& > .arrow-up {
|
& > .arrow-up {
|
||||||
d:path("m 21, 50 15, -9");
|
d:path("m 21, 50 15, -9");
|
||||||
stroke-width:6;
|
stroke-width:6;
|
||||||
stroke:$green;
|
stroke:$action-normal;
|
||||||
|
|
||||||
}
|
}
|
||||||
& > .arrow-down {
|
& > .arrow-down {
|
||||||
d:path("m 21, 50 15, 9");
|
d:path("m 21, 50 15, 9");
|
||||||
stroke-width:6;
|
stroke-width:6;
|
||||||
stroke:$green;
|
stroke:$action-normal;
|
||||||
}
|
}
|
||||||
& > .line-middle{
|
& > .line-middle{
|
||||||
d:path("M 65, 50 H 21");
|
d:path("M 65, 50 H 21");
|
||||||
stroke-width:6;
|
stroke-width:6;
|
||||||
stroke:$green;
|
stroke:$action-normal;
|
||||||
}
|
}
|
||||||
& > .line-and-door{
|
& > .line-and-door{
|
||||||
stroke-dashoffset: 0 ;
|
stroke-dashoffset: 0 ;
|
||||||
@@ -123,7 +124,7 @@ const burger = useBurgerStore();
|
|||||||
//stroke-dasharray: 12 12 38 62 38;
|
//stroke-dasharray: 12 12 38 62 38;
|
||||||
stroke-width:6;
|
stroke-width:6;
|
||||||
stroke-dasharray: 205 ;
|
stroke-dasharray: 205 ;
|
||||||
stroke:$green;
|
stroke:$action-normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (min-width:$maxWidth){
|
@media (min-width:$maxWidth){
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ const show = ref(false)
|
|||||||
@click="show = !show"
|
@click="show = !show"
|
||||||
>
|
>
|
||||||
<circle
|
<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"
|
id="path833"
|
||||||
cx="10"
|
cx="10"
|
||||||
cy="10"
|
cy="10"
|
||||||
@@ -27,7 +27,7 @@ const show = ref(false)
|
|||||||
<div class="footer"
|
<div class="footer"
|
||||||
v-bind:class="show ? '' : 'hide'">
|
v-bind:class="show ? '' : 'hide'">
|
||||||
<h1>
|
<h1>
|
||||||
Design
|
Designed
|
||||||
</h1>
|
</h1>
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 100 100"
|
viewBox="0 0 100 100"
|
||||||
@@ -249,7 +249,8 @@ const show = ref(false)
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/style/shared.scss";
|
@import '@/style/colors.scss';
|
||||||
|
@import '@/style/widths.scss';
|
||||||
|
|
||||||
div.footer{
|
div.footer{
|
||||||
position : fixed;
|
position : fixed;
|
||||||
@@ -259,7 +260,7 @@ const show = ref(false)
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background-color: hsla(0, 0%, 1%, 0.904);
|
background-color: hsla(0, 0%, 0%, 0.904);
|
||||||
min-height:3.5em;
|
min-height:3.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: $maxWidth;
|
max-width: $maxWidth;
|
||||||
@@ -271,6 +272,10 @@ const show = ref(false)
|
|||||||
}
|
}
|
||||||
svg{
|
svg{
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
|
& > circle{
|
||||||
|
fill:$action-normal;
|
||||||
|
transition : 0.25s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
h1{
|
h1{
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
@@ -289,6 +294,12 @@ const show = ref(false)
|
|||||||
&.down{
|
&.down{
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
& > circle{
|
||||||
|
fill:$action-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@supports (backdrop-filter: blur(0.5rem)){
|
@supports (backdrop-filter: blur(0.5rem)){
|
||||||
div.footer{
|
div.footer{
|
||||||
|
|||||||
@@ -100,8 +100,8 @@ const toggleMenu = () => {
|
|||||||
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||||
@click="closeMenu()">
|
@click="closeMenu()">
|
||||||
<router-link
|
<router-link
|
||||||
:to="{name:'whoAmI'}">
|
:to="{name:'profile'}">
|
||||||
Who Am I
|
Profile
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
@@ -145,7 +145,7 @@ const toggleMenu = () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../style/shared.scss';
|
@import '../style/colors.scss';
|
||||||
|
|
||||||
.burger{
|
.burger{
|
||||||
display: none;
|
display: none;
|
||||||
@@ -154,7 +154,7 @@ const toggleMenu = () => {
|
|||||||
& .button{
|
& .button{
|
||||||
width: 3.5em;
|
width: 3.5em;
|
||||||
// height: 4.5em;
|
// height: 4.5em;
|
||||||
background-color:$red-light;
|
background-color:$action-normal;
|
||||||
border: none;
|
border: none;
|
||||||
transition:1s ;
|
transition:1s ;
|
||||||
&:hover{
|
&:hover{
|
||||||
@@ -166,7 +166,7 @@ const toggleMenu = () => {
|
|||||||
transition:1s ;
|
transition:1s ;
|
||||||
-moz-transition:1s ;
|
-moz-transition:1s ;
|
||||||
-webkit-transition:1s ;
|
-webkit-transition:1s ;
|
||||||
stroke:$white;
|
stroke:black;
|
||||||
}
|
}
|
||||||
& .cross{
|
& .cross{
|
||||||
stroke-dashoffset: 0 ;
|
stroke-dashoffset: 0 ;
|
||||||
@@ -215,11 +215,11 @@ a{
|
|||||||
//font-style: italic;
|
//font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color : $white;
|
color : $main-normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&::after{
|
&::after{
|
||||||
content: "";
|
content: "";
|
||||||
background-color: $red-light;
|
background-color: $action-normal;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
margin-left:0;
|
margin-left:0;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
@@ -227,12 +227,12 @@ a{
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &.router-link-exact-active{
|
&:hover, &.router-link-exact-active{
|
||||||
color:$red-light;
|
color:$action-normal;
|
||||||
transition: color 0.25s;
|
transition: color 0.25s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
&.router-link-exact-active{
|
&.router-link-exact-active{
|
||||||
filter: drop-shadow(0 0 3px $red-light);
|
filter: drop-shadow(0 0 3px $action-normal);
|
||||||
transition: filter 0.3s;
|
transition: filter 0.3s;
|
||||||
}
|
}
|
||||||
&:hover::after, &.router-link-exact-active::after{
|
&:hover::after, &.router-link-exact-active::after{
|
||||||
@@ -265,7 +265,7 @@ a{
|
|||||||
|
|
||||||
@media (width < 750px ){
|
@media (width < 750px ){
|
||||||
nav.menu-container{
|
nav.menu-container{
|
||||||
//border: $white solid 3px;
|
//border: $main-normal solid 3px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
& .burger{
|
& .burger{
|
||||||
|
|||||||
@@ -35,7 +35,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/style/shared.scss';
|
@import '../style/colors.scss';
|
||||||
/*Modale annimation*/
|
/*Modale annimation*/
|
||||||
|
|
||||||
.modal-animation-enter-from,
|
.modal-animation-enter-from,
|
||||||
@@ -110,11 +110,11 @@ h1{
|
|||||||
border-radius: 0.75em;
|
border-radius: 0.75em;
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
background-color: #e5e5e5;
|
background-color: #e5e5e5;
|
||||||
color: $red;
|
color: darken($action-normal, 30%);
|
||||||
font-size: 1.7em;
|
font-size: 1.7em;
|
||||||
transition: color 0.25s ease;
|
transition: color 0.25s ease;
|
||||||
&:hover{
|
&:hover{
|
||||||
color: lighten($red, 15%);
|
color: darken($action-normal, 45%);;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -128,23 +128,44 @@ h1{
|
|||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
.button{
|
.button{
|
||||||
border-radius: 0.5em;
|
|
||||||
margin:0.5em auto;
|
display: block;
|
||||||
display: block;
|
margin: 0.5em auto;
|
||||||
padding: 0.5em 1em;
|
border: none;
|
||||||
border:none;
|
border-radius: 7px;
|
||||||
color:$red;
|
font-size:1.3rem;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
background-color: $action-normal;
|
||||||
font-size: 1.2rem;
|
outline : 3px;
|
||||||
font-weight: 600;
|
outline-style: solid;
|
||||||
background-color: $green;
|
outline-offset: -5px;
|
||||||
outline: $red;
|
outline-color: black;
|
||||||
outline-style: solid;
|
color:black;
|
||||||
outline-offset: -5px;
|
padding: 0.3em 0.9em;
|
||||||
transition: 0.25s ease;
|
transition:0.3s;
|
||||||
&:hover{
|
|
||||||
background-color: darken($green, 10%);
|
&:hover{
|
||||||
cursor:pointer;
|
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>
|
</style>
|
||||||
@@ -38,7 +38,7 @@ const burger = useBurgerStore()
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/style/shared.scss";
|
@import '@/style/colors.scss';
|
||||||
|
|
||||||
.name{
|
.name{
|
||||||
display:flex;
|
display:flex;
|
||||||
@@ -47,20 +47,21 @@ const burger = useBurgerStore()
|
|||||||
margin:0 2.4rem;
|
margin:0 2.4rem;
|
||||||
|
|
||||||
// border : #f0f solid 1px;
|
// border : #f0f solid 1px;
|
||||||
& h1{font-family: 'acme', Arial, Helvetica, sans-serif;
|
& h1{
|
||||||
letter-spacing: 0.2em;
|
position :relative;
|
||||||
font-size: 2.7rem;
|
display: flex;
|
||||||
display: flex;
|
flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
justify-content: center;
|
||||||
justify-content: center;
|
margin-top: 0.5em;
|
||||||
position :relative;
|
padding: 0em ;
|
||||||
color: $page-title;
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||||
font-weight: bold;
|
font-size: 2.7rem;
|
||||||
margin-top: 0.5em;
|
font-weight: bold;
|
||||||
padding: 0em ;
|
letter-spacing: 0.2em;
|
||||||
// border : #f0f solid 1px;
|
color: $title-normal;
|
||||||
|
// border : #f0f solid 1px;
|
||||||
animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||||
|
|
||||||
& div {
|
& div {
|
||||||
display:flex;
|
display:flex;
|
||||||
margin:0;
|
margin:0;
|
||||||
@@ -88,7 +89,7 @@ h2{
|
|||||||
font-size:1.7rem;
|
font-size:1.7rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color:$white;
|
color:$main-normal;
|
||||||
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
|
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
|
||||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@@ -99,14 +100,15 @@ h2{
|
|||||||
|
|
||||||
@keyframes title-h1{
|
@keyframes title-h1{
|
||||||
0%{
|
0%{
|
||||||
margin-top: 1.6em
|
margin-top: 1.6em;
|
||||||
|
color:$renforced-normal
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@keyframes title-spans{
|
@keyframes title-spans{
|
||||||
0% {
|
0% {
|
||||||
transform: rotateY(360deg);
|
transform: rotateY(360deg);
|
||||||
// color: $red;
|
// color: $renforced-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
|
|||||||
@@ -7,14 +7,13 @@ import { createPinia } from 'pinia'
|
|||||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import { faCircleXmark } from '@fortawesome/free-regular-svg-icons'
|
import { faCircleXmark } from '@fortawesome/free-regular-svg-icons'
|
||||||
|
import { faLessThan, faGreaterThan } from '@fortawesome/free-solid-svg-icons'
|
||||||
library.add( faCircleXmark )
|
library.add( faCircleXmark, faLessThan, faGreaterThan )
|
||||||
|
|
||||||
|
|
||||||
const pinia = createPinia()
|
const pinia = createPinia()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
createApp(App)
|
createApp(App)
|
||||||
.use(router)
|
.use(router)
|
||||||
.use(pinia)
|
.use(pinia)
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
const page = {
|
|
||||||
template:'<div>Je Sais Pas trop quoi</div>'
|
|
||||||
}
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
|
|
||||||
{
|
{
|
||||||
@@ -11,16 +7,10 @@ const routes = [
|
|||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import('@/views/Index.vue')
|
component: () => import('@/views/Index.vue')
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/footer',
|
path: '/profile',
|
||||||
name: 'footer',
|
name: 'profile',
|
||||||
component: () => import('@/components/Footer.vue')
|
component: () => import('@/views/Profile.vue')
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/whoAmI',
|
|
||||||
name: 'whoAmI',
|
|
||||||
component: () => import('@/views/WhoAmI.vue')
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/technologies',
|
path: '/technologies',
|
||||||
@@ -42,6 +32,11 @@ const routes = [
|
|||||||
name: 'contact',
|
name: 'contact',
|
||||||
component: () => import('@/views/Contact.vue')
|
component: () => import('@/views/Contact.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/:pathMatch(.*)',
|
||||||
|
name: '404',
|
||||||
|
component: () => import('@/views/404.vue')
|
||||||
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export const useBurgerStore = defineStore('Burger', {
|
|||||||
|
|
||||||
//console.log("checked by toggle ? : " + this.checked)
|
//console.log("checked by toggle ? : " + this.checked)
|
||||||
if (this.checked){
|
if (this.checked){
|
||||||
router.push({name:'whoAmI'})
|
router.push({name:'profile'})
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
router.push({name:'home'})
|
router.push({name:'home'})
|
||||||
|
|||||||
@@ -1,34 +0,0 @@
|
|||||||
import { defineStore } from 'pinia'
|
|
||||||
|
|
||||||
export const useCardsStore = defineStore('Cards', {
|
|
||||||
state: () => ({
|
|
||||||
card1: false,
|
|
||||||
card2: false,
|
|
||||||
card3: false,
|
|
||||||
card4: false,
|
|
||||||
}),
|
|
||||||
|
|
||||||
actions:
|
|
||||||
{
|
|
||||||
reset(){
|
|
||||||
this.card1 = false;
|
|
||||||
this.card2 = false;
|
|
||||||
this.card3 = false;
|
|
||||||
this.card4 = false;
|
|
||||||
|
|
||||||
},
|
|
||||||
toggleCard1(){
|
|
||||||
this.card1 = true;
|
|
||||||
},
|
|
||||||
toggleCard2(){
|
|
||||||
this.card2 = true;
|
|
||||||
},
|
|
||||||
toggleCard3(){
|
|
||||||
this.card3 = true;
|
|
||||||
},
|
|
||||||
toggleCard4(){
|
|
||||||
this.card4 = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { defineStore } from 'pinia'
|
|
||||||
|
|
||||||
export const useMenuStore = defineStore('menu', {
|
|
||||||
state: () => ({
|
|
||||||
whoAmI: true,
|
|
||||||
technologies: false,
|
|
||||||
projects: false,
|
|
||||||
networks: false,
|
|
||||||
contact: false,
|
|
||||||
}),
|
|
||||||
|
|
||||||
actions:
|
|
||||||
{
|
|
||||||
selected(event){
|
|
||||||
this.whoAmI = false
|
|
||||||
this.technologies = false
|
|
||||||
this.projects = false
|
|
||||||
this.networks = false
|
|
||||||
this.contact = false
|
|
||||||
|
|
||||||
this[event.currentTarget.dataset.name] = true
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
21
src/style/colors.scss
Normal file
21
src/style/colors.scss
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
$body-bg:hsl(0, 0%, 93%);
|
||||||
|
$page-bg:hsl(234, 20%, 30%);
|
||||||
|
//$page-bg1:hsl(0, 0%, 60%);
|
||||||
|
|
||||||
|
$renforced-light : hsl(13, 68%, 60%);
|
||||||
|
$renforced-normal: hsl(13, 68%, 40%);
|
||||||
|
$renforced-dark : hsl(13, 68%, 20%);
|
||||||
|
|
||||||
|
$hypertext-light : hsl(245, 100%, 87%);
|
||||||
|
$hypertext-normal : hsl(245, 100%, 82%);
|
||||||
|
|
||||||
|
$main-normal: hsl(52, 50%, 90%);
|
||||||
|
$main-dark : hsl(52, 50%, 70%);
|
||||||
|
|
||||||
|
$title-light : hsl(37, 79%, 90%);
|
||||||
|
$title-normal: hsl(37, 79%, 75%);
|
||||||
|
$title-dark : hsl(37, 79%, 60%);
|
||||||
|
|
||||||
|
$action-light : hsl(139, 57%, 85%);
|
||||||
|
$action-normal: hsl(139, 57%, 77%);
|
||||||
|
$action-dark : hsl(139, 57%, 67%);
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
$body-bg:rgb(206, 206, 206);
|
|
||||||
$page-bg:#3D405B;
|
|
||||||
$page-bg1:#999;
|
|
||||||
|
|
||||||
$red:rgba(141, 0, 0, 1);
|
|
||||||
$red-light: #E07A5F;
|
|
||||||
$red-light-transparent: #e07b5fe9;
|
|
||||||
$white:#F4F1DE;
|
|
||||||
$green:#A5E6BA;
|
|
||||||
$page-title: #F2CC8F;
|
|
||||||
|
|
||||||
$font-color:$white;
|
|
||||||
|
|
||||||
$maxWidth: 1200px;
|
|
||||||
$imageWidth: 100%;
|
|
||||||
15
src/style/shared_old.scss
Normal file
15
src/style/shared_old.scss
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
$body-bg:rgb(206, 206, 206);
|
||||||
|
$page-bg:#3D405B;
|
||||||
|
$page-bg1:#999;
|
||||||
|
|
||||||
|
$renforced-normal:rgba(141, 0, 0, 1);
|
||||||
|
$renforced-light: #E07A5F;
|
||||||
|
$renforced-light-transparent: #e07b5fe9;
|
||||||
|
$main-normal:#F4F1DE;
|
||||||
|
$action-normal:#A5E6BA;
|
||||||
|
$title-normal: #F2CC8F;
|
||||||
|
|
||||||
|
$font-color:$main-normal;
|
||||||
|
|
||||||
|
$maxWidth: 1200px;
|
||||||
|
$imageWidth: 100%;
|
||||||
2
src/style/widths.scss
Normal file
2
src/style/widths.scss
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
$maxWidth: 1200px;
|
||||||
|
$imageWidth: 100%;
|
||||||
70
src/views/404.vue
Normal file
70
src/views/404.vue
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
onMounted(() => {
|
||||||
|
burger.check()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<p class="p-404">
|
||||||
|
404...
|
||||||
|
</p>
|
||||||
|
<p class="emoji">🤔<span class="small">(Hmmm...)</span></p>
|
||||||
|
<p>The page you are looking for does not seem to exist!</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/colors.scss';
|
||||||
|
|
||||||
|
|
||||||
|
.content{
|
||||||
|
|
||||||
|
& > p{
|
||||||
|
text-indent:0;
|
||||||
|
color : $main-normal;
|
||||||
|
opacity: 1;
|
||||||
|
font-size : 2em;
|
||||||
|
padding:1rem 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||||
|
&.p-404{
|
||||||
|
padding:1rem 1.25rem;
|
||||||
|
font-size : 7rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
&.emoji{
|
||||||
|
margin-top : 5rem;
|
||||||
|
padding:1rem 1.25rem;
|
||||||
|
font-size : 15rem;
|
||||||
|
line-height: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.small{
|
||||||
|
font-size : 3rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes text{
|
||||||
|
0%{
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
33%{
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width < 600px){
|
||||||
|
.content{
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -92,34 +92,34 @@ const onSubmit = () => {
|
|||||||
<h3><span>contact</span></h3>
|
<h3><span>contact</span></h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<p class="subtitle">Please full up the form to keep in touch !</p>
|
<p class="subtitle">Please full up the form to keep in touch!</p>
|
||||||
<form @submit.prevent="onSubmit()">
|
<form @submit.prevent="onSubmit()">
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label class="first" for="name">Your name</label>
|
<label class="first" for="name">Your name</label>
|
||||||
<input v-model="name" id="name" type="text" placeholder="Name">
|
<input v-model="name" id="name" type="text" placeholder="Name">
|
||||||
<div class="error" v-if="errors.name">
|
<div class="error" v-if="errors.name">
|
||||||
Please enter your name !
|
Please enter your name!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label for="coordinates">Your coordinates</label>
|
<label for="coordinates">Your coordinates</label>
|
||||||
<input v-model="coordinates" id="coordinates" type="text" placeholder="A phone or a mail (or both)">
|
<input v-model="coordinates" id="coordinates" type="text" placeholder="A phone or a mail (or both)">
|
||||||
<div class="error" v-if="errors.coordinates">
|
<div class="error" v-if="errors.coordinates">
|
||||||
Please enter some coordinates !
|
Please enter some coordinates!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label for="company">Your company</label>
|
<label for="company">Your company</label>
|
||||||
<input v-model="company" id="company" type="text" placeholder="Company ">
|
<input v-model="company" id="company" type="text" placeholder="Company ">
|
||||||
<div class="error" v-if="errors.company">
|
<div class="error" v-if="errors.company">
|
||||||
Please enter your company !
|
Please enter your company!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label for="message-content">Your message</label>
|
<label for="message-content">Your message</label>
|
||||||
<textarea v-model="content" id="message-content" rows="5" cols="22" placeholder="Message"></textarea>
|
<textarea v-model="content" id="message-content" rows="5" cols="22" placeholder="Message"></textarea>
|
||||||
<div class="error" v-if="errors.content">
|
<div class="error" v-if="errors.content">
|
||||||
Please write something !
|
Please write something!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="small">
|
<p class="small">
|
||||||
@@ -156,7 +156,7 @@ const onSubmit = () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../style/shared.scss';
|
@import '../style/colors.scss';
|
||||||
.modal-content{
|
.modal-content{
|
||||||
& > .modal-title{
|
& > .modal-title{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -217,12 +217,12 @@ const onSubmit = () => {
|
|||||||
font-size : 0.75em;
|
font-size : 0.75em;
|
||||||
padding: 1em 0.5em;
|
padding: 1em 0.5em;
|
||||||
& > a{
|
& > a{
|
||||||
color: rgb(169, 162, 255);
|
color: $hypertext-normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition : 0.25s;
|
transition : 0.25s;
|
||||||
&:hover{
|
&:hover{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: lighten(rgb(169, 162, 255), 5%);
|
color: $hypertext-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -230,23 +230,27 @@ const onSubmit = () => {
|
|||||||
|
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
border: none;
|
border: none;
|
||||||
//border-radius: 10px;
|
border-radius: 7px;
|
||||||
font-size:1.5rem;
|
font-size:1.5rem;
|
||||||
background-color: darken($green, 10%);
|
background-color: $action-normal;
|
||||||
outline : 3px;
|
outline : 3px;
|
||||||
outline-style: solid;
|
outline-style: solid;
|
||||||
outline-offset: -5px;
|
outline-offset: -5px;
|
||||||
outline-color: black;
|
outline-color: black;
|
||||||
color:black;
|
color:black;
|
||||||
|
outline-color: $page-bg;
|
||||||
|
color:$page-bg;
|
||||||
padding: 0.3em 0.9em;
|
padding: 0.3em 0.9em;
|
||||||
transition:0.3s;
|
transition:0.3s;
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: $green
|
background-color: darken($action-normal, 15%)
|
||||||
}
|
}
|
||||||
&:disabled{
|
&:disabled{
|
||||||
background-color: hsl(0, 0%, 55%);
|
background-color: hsl(0, 0%, 55%);
|
||||||
|
outline-color: $page-bg;
|
||||||
|
color:$page-bg;
|
||||||
&:hover{
|
&:hover{
|
||||||
cursor : default;
|
cursor : default;
|
||||||
}
|
}
|
||||||
@@ -263,7 +267,7 @@ p.subtitle{
|
|||||||
margin: auto 0.5em;
|
margin: auto 0.5em;
|
||||||
}
|
}
|
||||||
.error{
|
.error{
|
||||||
color: $red-light;
|
color: $renforced-light;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ onMounted(() => {
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="logo"></div>
|
<div class="logo"></div>
|
||||||
<h3>Who Am I ?</h3>
|
<h3>Talking about code</h3>
|
||||||
</div>
|
</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>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>
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../style/shared.scss';
|
@import '../style/colors.scss';
|
||||||
|
|
||||||
|
|
||||||
.content{
|
.content{
|
||||||
@@ -34,7 +34,7 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
& > p{
|
& > p{
|
||||||
|
|
||||||
color : $white;
|
color : $main-normal;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
padding:1em 1.25em 0em 1em;
|
padding:1em 1.25em 0em 1em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
@@ -45,7 +45,7 @@ onMounted(()=>{
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/style/shared.scss";
|
@import '@/style/colors.scss';
|
||||||
|
|
||||||
.name{
|
.name{
|
||||||
display:flex;
|
display:flex;
|
||||||
@@ -60,7 +60,7 @@ onMounted(()=>{
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position :relative;
|
position :relative;
|
||||||
color: $red-light;
|
color: $renforced-light;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-top: 1.6em;
|
margin-top: 1.6em;
|
||||||
padding: 0.1em ;
|
padding: 0.1em ;
|
||||||
@@ -129,7 +129,7 @@ h2{
|
|||||||
top:150px;
|
top:150px;
|
||||||
font-size:1.7rem;
|
font-size:1.7rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color:$white;
|
color:$main-normal;
|
||||||
|
|
||||||
|
|
||||||
animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
||||||
@@ -147,7 +147,7 @@ h2{
|
|||||||
-moz-animation: 1400ms image_appear 1200ms ease forwards;
|
-moz-animation: 1400ms image_appear 1200ms ease forwards;
|
||||||
-webkit-animation: 1400ms image_appear 1200ms ease forwards;
|
-webkit-animation: 1400ms image_appear 1200ms ease forwards;
|
||||||
|
|
||||||
background-color: $green;
|
background-color: $action-normal;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin:2em auto 0 auto;
|
margin:2em auto 0 auto;
|
||||||
border: 5px white solid;
|
border: 5px white solid;
|
||||||
|
|||||||
@@ -14,6 +14,14 @@ onMounted(() => {
|
|||||||
<div class="logo"></div>
|
<div class="logo"></div>
|
||||||
<h3>Networks</h3>
|
<h3>Networks</h3>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="list linkedin">
|
||||||
|
<a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
||||||
|
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<p>A Linkedin profile (but be aware I'm not so talkative 😉): <a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">fr.linkedin.com/in/raffi-alexanian</a> </p>
|
||||||
|
</div>
|
||||||
<div class="list github">
|
<div class="list github">
|
||||||
<a href="https://www.github.com/Raffiskender" target="_blank">
|
<a href="https://www.github.com/Raffiskender" target="_blank">
|
||||||
<svg viewBox="0 0 496 512" width="2em">
|
<svg viewBox="0 0 496 512" width="2em">
|
||||||
@@ -21,34 +29,34 @@ onMounted(() => {
|
|||||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
|
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<p>Github page and projects: <a href="https://www.github.com/Raffiskender" target="_blank">github.com/Raffiskender</a> </p>
|
<p>Github page and projects: <a href="https://www.github.com/Raffiskender" target="_blank">github.com/Raffiskender</a> </p>
|
||||||
</div>
|
</div>
|
||||||
<div class="list linkedin">
|
<div class="list code-pen">
|
||||||
<a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">
|
<a href="https://codepen.io/Raffiskender" target="_blank">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
<svg fill="#000000" width="2em" viewBox="0 0 24 24">
|
||||||
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
|
<path d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031c-.005.016-.01.031-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739c0-.028.002-.055.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12 0 18.627 5.373 24 12 24c6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<p>A Linkedin profil: <a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">fr.linkedin.com/in/raffi-alexanian</a> </p>
|
<p>Some CodePen: <a href="https://codepen.io/Raffiskender" target="_blank">codepen.io/Raffiskender</a> </p>
|
||||||
</div>
|
</div>
|
||||||
<div class="list cv">
|
|
||||||
<a href="https://cv.raffiskender.com" target="_blank">
|
<div class="list cv">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
<a href="https://cv.raffiskender.com" target="_blank">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
||||||
<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>
|
<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<p>And also a CV (in french) <a href="https://cv.raffiskender.com" target="_blank">https://cv.raffiskender.com</a> </p>
|
<p>And also a CV (in french): <a href="https://cv.raffiskender.com" target="_blank">https://cv.raffiskender.com</a> </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../style/shared.scss';
|
@import '../style/colors.scss';
|
||||||
.content{
|
.content{
|
||||||
& > .title {
|
& > .title {
|
||||||
& .logo{
|
& .logo{
|
||||||
background-image: url('../assets/networks.svg');
|
background-image: url('../assets/networks.svg');
|
||||||
background-size: 80%;
|
background-size: 80%;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& .list{
|
& .list{
|
||||||
@@ -57,15 +65,15 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 1.25em;
|
padding-left: 1.25em;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
&.github{
|
&.linkedin{
|
||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
}
|
}
|
||||||
& svg{
|
& svg{
|
||||||
fill: $page-title;
|
fill: $title-normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > p{
|
& > p{
|
||||||
color : $white;
|
color : $main-normal;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||||
padding-left:1em;
|
padding-left:1em;
|
||||||
@@ -73,12 +81,16 @@ onMounted(() => {
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
//border: white 2px solid;
|
//border: white 2px solid;
|
||||||
& a{
|
& a{
|
||||||
color:inherit;
|
color: $hypertext-normal;
|
||||||
cursor: pointer;
|
text-decoration: none;
|
||||||
text-decoration: none;
|
transition : 0.25s;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
color: $hypertext-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
86
src/views/Profile.vue
Normal file
86
src/views/Profile.vue
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<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>Profile</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>As you guessed, my name is Raffi. I am a full-stack web developer. I'm comfortable with both back-end and front-end programming (with a slight preference for front-end). While I can code many things in vanilla (pure) HTML, CSS, and JavaScript, I commonly use frameworks for both front-end and back-end development. For example, the portfolio you are currently viewing was coded with Vue.js. It provides all the necessary tools to easily build, organize, and maintain applications. It utilizes a store and a router, as well as some services to communicate with the backend. Yes, this portfolio also includes a small backend specifically for handling form submissions. It is actually a WordPress plugin I developed to send the form via email.
|
||||||
|
</p>
|
||||||
|
<h4>Security</h4>
|
||||||
|
<p>I always rigorously test my code and push it to its limits because I am highly concerned about security. Therefore, the contact form on this portfolio incorporates various security measures both on the front-end and back-end. For example, if you try to manipulate the sending button through the console, you will see what happens... And if you manage to find the backend address and attempt to send a contact form request there, you will see what happens...
|
||||||
|
</p>
|
||||||
|
<h4>My Journey...</h4>
|
||||||
|
<p>I have always been fascinated by coding and programming. I started when I was young, around 9 years old. I picked up a book from my father and read about the basics of programming languages. That's how I began. Then came Turbo Pascal, and it continued from there. While working in maintenance, I continued programming, but this time focusing on electronic devices, stepper motors, programmable logic controllers (PLCs), and various other components. Logic has always been my stronghold. In 2022, I had the opportunity to participate in a five-month training course to enhance my knowledge of web programming. During this period, I delved deeper into HTML, CSS, JavaScript, PHP, WordPress, Vue.js, SQL, database management, object-oriented programming, project management, and much more!
|
||||||
|
</p>
|
||||||
|
<p>I am accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me beyond my comfort zone and demand quick thinking. As a native French speaker, I am also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy exploring new horizons and seizing opportunities for learning and personal growth. With my experience and language skills, I am prepared to embrace fresh challenges and contribute to inspiring projects.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/colors.scss';
|
||||||
|
|
||||||
|
|
||||||
|
.content{
|
||||||
|
& .title{
|
||||||
|
& > .logo{
|
||||||
|
background-image: url('../assets/questionSolo.png');
|
||||||
|
background-size: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& h4{
|
||||||
|
color: $title-normal;
|
||||||
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||||
|
font-size:1.5em;
|
||||||
|
margin-left: 2em;
|
||||||
|
margin-top: 1.25em;
|
||||||
|
}
|
||||||
|
& > 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,29 +1,213 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { useBurgerStore } from '@/stores/burger'
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
//import { faThermometerQuarter } from '@fortawesome/free-solid-svg-icons';
|
||||||
const burger = useBurgerStore();
|
const burger = useBurgerStore();
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
burger.check();
|
burger.check();
|
||||||
|
const allTabs = document.querySelector('.all-tabs')
|
||||||
|
allTabs.addEventListener('scrollLeft', handleLeftArrow)
|
||||||
|
allTabs.addEventListener('scrollRight', handleRightArrow)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
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 : "Liste de course",
|
||||||
|
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||||
|
},
|
||||||
|
{ id:3,
|
||||||
|
selected : false,
|
||||||
|
name : "Memory",
|
||||||
|
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||||
|
},
|
||||||
|
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleLeftArrow = () =>{
|
||||||
|
for (const item of items.value) {
|
||||||
|
if (item.selected){
|
||||||
|
item.id - 1 == 0 ? changeSelectedTab(items.value.length) : changeSelectedTab(item.id - 1)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRightArrow = () =>{
|
||||||
|
let exit = false ;
|
||||||
|
for (const item of items.value) {
|
||||||
|
if (item.selected && !exit){
|
||||||
|
item.id == items.value.length ? changeSelectedTab(1) : changeSelectedTab(item.id + 1)
|
||||||
|
exit = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeSelectedTab = (id) => {
|
||||||
|
for(const item of items.value){
|
||||||
|
item.selected = item.id == id ? true : false
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="content">
|
<!-- faire un v-for sur le tableau pour avoir le nom des onglets -->
|
||||||
|
<div class="content">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="logo">
|
<div class="logo"></div>
|
||||||
</div>
|
<h3>projects</h3>
|
||||||
<h3><span>Projects</span></h3>
|
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<div class="tabs-bar">
|
||||||
|
<button class="left-arrow arrow" @click="handleLeftArrow()">
|
||||||
here are some projects I made.</p>
|
<font-awesome-icon icon="fa-solid fa-less-than" />
|
||||||
<p>And bla and bla and bla</p>
|
</button>
|
||||||
|
<ul class="all-tabs">
|
||||||
|
<li
|
||||||
|
v-for="item in items"
|
||||||
|
v-bind:key="item.id"
|
||||||
|
class="tab"
|
||||||
|
v-bind:class="{'active': item.selected}"
|
||||||
|
:style="{opacity : item.selected ? 1 : 0}"
|
||||||
|
:id = "'tab-' + item.id">
|
||||||
|
{{ item.name }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="right-arrow arrow"
|
||||||
|
@click="handleRightArrow()"
|
||||||
|
>
|
||||||
|
<font-awesome-icon icon="fa-solid fa-greater-than" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<Transition name="fade">
|
||||||
|
<div class="project"
|
||||||
|
v-if="items[0].selected">
|
||||||
|
<p>Watch a presentation of this (awesome) project... But in the French language</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>
|
||||||
|
<h4>The project</h4>
|
||||||
|
<p class="project-summary">
|
||||||
|
<a href="https://poilsopattes.raffiskender.com" target="blank">
|
||||||
|
"Poils O'Pattes"</a> is 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>
|
||||||
|
<div class="image-container">
|
||||||
|
<div class="image-description">
|
||||||
|
<p>Here you can see the main page (Oh! there is a connection system!)</p>
|
||||||
|
<img src="../assets/images/pop/Screenshot_pop1.webp" alt="print screen of Poils O pattes weeb site">
|
||||||
|
</div>
|
||||||
|
<div class="image-description">
|
||||||
|
<p>Here you can see the page to fix an appointement to the salon</p>
|
||||||
|
<img src="../assets/images/pop/Screenshot_pop2.webp" alt="print screen of Poils O pattes weeb site">
|
||||||
|
</div>
|
||||||
|
<div class="image-description">
|
||||||
|
<p>Services page</p>
|
||||||
|
<img src="../assets/images/pop/Screenshot_pop3.webp" alt="print screen of Poils O pattes weeb site">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-explanation">
|
||||||
|
<p>
|
||||||
|
The front-end was created by an awesome crew of 3 girls: <a href="#">Laura Pécheux</a>, <a href="#">Xénia Onescu</a>, and <a href="#">Mélodie Yamashita</a>. They built it using React, and they gaves it a really girly, catchy and vibrant design I really do appreciate.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
But I didn't worked too much on the front, I worked hard on...
|
||||||
|
</p>
|
||||||
|
<h4>The back-end</h4>
|
||||||
|
<p>I have been working with <a href="#">Hocine Rehab</a> to design and code the back-end. Being two wasn't too much! This back-end controls:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Users (their animals, their appointments, their status as stakeholders, clients, or admins).</li>
|
||||||
|
<li>Animals (their owners, breeds, and weights).</li>
|
||||||
|
<li>Appointments (which user with which stakeholder at what time and for which animal).</li>
|
||||||
|
<li>The services provided by the salon.</li>
|
||||||
|
<li>The products available in the salon.</li>
|
||||||
|
</ul>
|
||||||
|
<p>And we had one month to achieve and make it operational, stable, and efficient.</p>
|
||||||
|
<p>I won't describe every single detail (CPT, Taxonomies, Roles, Capabilities, ACL, or Custom Tables) because it would be too long. However, let me talk about the part I preferred: The schedule management.</p>
|
||||||
|
<img src="../assets/images/pop/back.webp" alt="image of the back-office">
|
||||||
|
<p>Please note the following:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Past appointments are grayed out and cannot be modified.</li>
|
||||||
|
<li>Only one appointment can be modified at a time. The others are grayed out when one of them is being modified (as in the current case).</li>
|
||||||
|
<li>The dynamically generated dates are in French.</li>
|
||||||
|
<li>Some appointments are called "orphans." This is because when making an appointment on the front-end, they are not assigned. By clicking "honor this appointment," the groomer assigns it to themselves. It is then visible only to them (and the client on the front-end).</li>
|
||||||
|
<li>We have the ability to modify an appointment.</li>
|
||||||
|
<li>As a result, unavailable time slots are grayed out and cannot be selected. In the example above, 2 slots are taken on September 30th. If the date is changed, the time slots for the selected day automatically appear, and the unavailable time slots are grayed out. This mechanism is implemented using a JS-written API request.</li>
|
||||||
|
<li>The client select box is populated using a WordPress function, but...</li>
|
||||||
|
<li>The dog select box is automatically filled by fetching the client's dogs via the API for the currently selected client.</li>
|
||||||
|
</ol>
|
||||||
|
<p>One more detail: Everything you see has been programmed in vanilla JavaScript, vanilla CSS, HTML, and PHP (with WordPress functions). I hope you like it, as it has been quite challenging for us.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 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>
|
||||||
|
<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>
|
||||||
|
<p>
|
||||||
|
Finally, I am the one who uses it... But not as a shopping list: as a to-do list, and even more, as multiple to-do lists / reminders.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="image-container">
|
||||||
|
<div class="image-description">
|
||||||
|
<p>You have to create an account, or you can use your own Google account.</p>
|
||||||
|
<img src="../assets/images/LDC/LDC_screenshot_1.png" alt="screenshot of shopping list web application">
|
||||||
|
</div>
|
||||||
|
<div class="image-description">
|
||||||
|
<p>Here are tabs you can name whatever you want, with lists inside.</p>
|
||||||
|
<img src="../assets/images/LDC/LDC_screenshot_2.png" alt="screenshot of shopping list web application">
|
||||||
|
</div>
|
||||||
|
<div class="image-description">
|
||||||
|
<p>Profile page.</p>
|
||||||
|
<img src="../assets/images/LDC/LDC_screenshot_3.png" alt="screenshot of shopping list web application">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-explanation">
|
||||||
|
<h4>The front-end</h4>
|
||||||
|
<p>
|
||||||
|
The front-end was created in Vue. It incorporates a store, services to communicate with the backend (which happens often), a router, and plugins to sanitize the text, among other things.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4>The back-end</h4>
|
||||||
|
<p>The back-end manages:</p>
|
||||||
|
<ul>
|
||||||
|
<li>User management (with or without the Google sign-in API)</li>
|
||||||
|
<li>User's lists (encrypted json in a custom table)</li>
|
||||||
|
<li>Password reinitialization with custom tokens</li>
|
||||||
|
<li>Email sending for email verification</li>
|
||||||
|
</ul>
|
||||||
|
<p>In fact, this small application has all the features of a big one!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="project"
|
||||||
|
v-else-if ="items[2].selected">
|
||||||
|
<p>
|
||||||
|
That's a little project I made to keep my daughter occupied (but it worked only 2 weeks...). All pictures are fetched randomly from the Lorem Picsum free image bank (more details on my codepen for this part).
|
||||||
|
</p>
|
||||||
|
<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>
|
||||||
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/colors.scss';
|
||||||
|
|
||||||
.content{
|
.content{
|
||||||
|
//position : relative;
|
||||||
& > .title {
|
& > .title {
|
||||||
& .logo{
|
& .logo{
|
||||||
background-image: url('../assets/maison.svg');
|
background-image: url('../assets/maison.svg');
|
||||||
@@ -31,4 +215,217 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
h4{
|
||||||
|
color: $title-normal;
|
||||||
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||||
|
font-size:1.5em;
|
||||||
|
//margin-left: 2em;
|
||||||
|
margin-top: 1.25em;
|
||||||
|
text-align : center;
|
||||||
|
}
|
||||||
|
.project{
|
||||||
|
//position : absolute;
|
||||||
|
opacity : 1;
|
||||||
|
margin-top:1em;
|
||||||
|
transition : opacity 0.5s ease;
|
||||||
|
& .video{
|
||||||
|
display: block;
|
||||||
|
margin: 1.5em auto 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 20em;
|
||||||
|
aspect-ratio : 16/9;
|
||||||
|
}
|
||||||
|
& .unavailable{
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
& a{
|
||||||
|
color: $hypertext-normal;
|
||||||
|
text-decoration: none;
|
||||||
|
transition : 0.25s;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
color: $hypertext-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.show{
|
||||||
|
opacity : 1;
|
||||||
|
}
|
||||||
|
.tabs-bar {
|
||||||
|
height: 3em;
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 2em calc(100% - 4em) 2em;
|
||||||
|
|
||||||
|
}
|
||||||
|
.project-explanation {
|
||||||
|
& > img{
|
||||||
|
display: block;
|
||||||
|
margin: 1em auto;
|
||||||
|
width: 90%;
|
||||||
|
aspect-ratio:1165/887
|
||||||
|
}
|
||||||
|
& ul{
|
||||||
|
margin: 0 0.75em 0 1.75em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
& >li{
|
||||||
|
padding-left: 0.55em;
|
||||||
|
|
||||||
|
&::marker{
|
||||||
|
content: "•";
|
||||||
|
color: $title-normal;
|
||||||
|
// margin-:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& ol{
|
||||||
|
margin: 1em 0.75em 0 2.5em;
|
||||||
|
line-height: 1.6em;
|
||||||
|
& >li{
|
||||||
|
padding-left: 0.55em;
|
||||||
|
list-style:decimal;
|
||||||
|
&::marker{
|
||||||
|
// content: "•";
|
||||||
|
color: $title-normal;
|
||||||
|
// margin-:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
ul.all-tabs {
|
||||||
|
//border:#ffffff 1px solid;
|
||||||
|
//flex-grow property to 2, flex-shrink to 1 and flex-basis to auto.
|
||||||
|
//display: flex;
|
||||||
|
position : relative;
|
||||||
|
//align-items: center;
|
||||||
|
//OverFlow is auto to keep scrolling on touching devices.
|
||||||
|
overflow-x: auto;
|
||||||
|
//Managing scroll bar
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
//FireFox
|
||||||
|
scrollbar-width: none;
|
||||||
|
//Edge
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
//Chrome & Safari
|
||||||
|
&::-webkit-scrollbar{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
& li.tab{
|
||||||
|
position : absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
height:100%;
|
||||||
|
padding: 1.5em auto;
|
||||||
|
min-width: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 1.75em;
|
||||||
|
//border:#0f0 solid 2px;
|
||||||
|
background-color:$page-bg;
|
||||||
|
color:$title-normal;
|
||||||
|
//color:rgb(0, 0, 0);
|
||||||
|
transition : opacity 1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 1.3em;
|
||||||
|
background-color: #ffffff00;
|
||||||
|
transition: 0.3s;
|
||||||
|
border: none;
|
||||||
|
&.arrow{
|
||||||
|
margin: 0;
|
||||||
|
color:$action-normal;
|
||||||
|
transition : 0.25s;
|
||||||
|
&:hover{
|
||||||
|
color:$action-light;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
//border:1px red solid
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container{
|
||||||
|
margin:auto;
|
||||||
|
& p {
|
||||||
|
min-height:100px;
|
||||||
|
padding: 0 0.75em;
|
||||||
|
text-indent:0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
//border : solid 1px lime;
|
||||||
|
}
|
||||||
|
& img{
|
||||||
|
display: block;
|
||||||
|
margin:1em auto;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.15s ease-out;
|
||||||
|
}
|
||||||
|
.fade-enter-active{
|
||||||
|
transition: opacity 0.35s ease-out;
|
||||||
|
transition-delay: 0.15s;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
@keyframes text{
|
||||||
|
0%{
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
33%{
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (width > 370px){
|
||||||
|
.image-container{
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content:space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
& .image-description{
|
||||||
|
flex-basis: 300px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
// aspect-ratio: ;
|
||||||
|
// height: 400px;
|
||||||
|
& > p{
|
||||||
|
// min-height:7em;
|
||||||
|
text-align: center;
|
||||||
|
text-indent:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
130
src/views/Projects1.vue
Normal file
130
src/views/Projects1.vue
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
<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>
|
||||||
@@ -33,7 +33,7 @@ const showWordpressUnderList=ref(false)
|
|||||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Vue2 / Vue3</li>
|
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Vue2 / Vue3</li>
|
||||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Option api / Composition api</li>
|
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Option api / Composition api</li>
|
||||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Nuxt</li>
|
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Nuxt</li>
|
||||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li last">Vuetify <span class=red>💚</span></li>
|
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li last">Vuetify <span>💚</span></li>
|
||||||
<li @click="showWordpressUnderList = !showWordpressUnderList" v-bind:class="{ open : showWordpressUnderList }" class="under-listed">Worpress</li>
|
<li @click="showWordpressUnderList = !showWordpressUnderList" v-bind:class="{ open : showWordpressUnderList }" class="under-listed">Worpress</li>
|
||||||
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom plugins</li>
|
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom plugins</li>
|
||||||
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom themes</li>
|
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom themes</li>
|
||||||
@@ -48,7 +48,7 @@ const showWordpressUnderList=ref(false)
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../style/shared.scss';
|
@import '../style/colors.scss';
|
||||||
|
|
||||||
.content{
|
.content{
|
||||||
& > .title {
|
& > .title {
|
||||||
@@ -62,7 +62,7 @@ const showWordpressUnderList=ref(false)
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > p, & li{
|
& > p, & li{
|
||||||
//color : $white;
|
//color : $main-normal;
|
||||||
//opacity : 0;
|
//opacity : 0;
|
||||||
line-height: 1.25em;
|
line-height: 1.25em;
|
||||||
// animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
|
// animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
|
||||||
@@ -84,7 +84,7 @@ const showWordpressUnderList=ref(false)
|
|||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
content: "•";
|
content: "•";
|
||||||
word-spacing: 0.5em;
|
word-spacing: 0.5em;
|
||||||
color: $green;
|
color: $action-normal;
|
||||||
}
|
}
|
||||||
&.under-listed{
|
&.under-listed{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -111,7 +111,7 @@ const showWordpressUnderList=ref(false)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
color: $red-light;
|
color: $renforced-light;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -127,16 +127,13 @@ const showWordpressUnderList=ref(false)
|
|||||||
font-size:small;
|
font-size:small;
|
||||||
content: "■";
|
content: "■";
|
||||||
word-spacing: 0.5em;
|
word-spacing: 0.5em;
|
||||||
color: $green;
|
color: $action-normal;
|
||||||
}
|
}
|
||||||
&.hide{
|
&.hide{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
span.red{
|
|
||||||
color:$red;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes text{
|
@keyframes text{
|
||||||
0%{
|
0%{
|
||||||
|
|||||||
Reference in New Issue
Block a user