finishing and fine-tuning TODO NEXT : project page
This commit is contained in:
@@ -42,6 +42,7 @@ const burger = useBurgerStore();
|
||||
<style lang="scss">
|
||||
@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=Acme&family=Courier+Prime&display=swap');
|
||||
@import "@/style/shared.scss";
|
||||
html {
|
||||
font-size: 16px;
|
||||
@@ -93,7 +94,7 @@ p{
|
||||
}
|
||||
& > h3 {
|
||||
//display: inline;
|
||||
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
color: $green;
|
||||
opacity: 1;
|
||||
font-size: 3rem;
|
||||
|
||||
60
src/assets/arrow-list.svg
Normal file
60
src/assets/arrow-list.svg
Normal file
@@ -0,0 +1,60 @@
|
||||
<?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="10mm"
|
||||
height="20mm"
|
||||
viewBox="0 0 10 20"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="arrow-list.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="2.8"
|
||||
inkscape:cx="78.255282"
|
||||
inkscape:cy="123.82238"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1559"
|
||||
inkscape:window-height="908"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<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
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:#a5e6ba;stroke:none;stroke-width:0.0685365px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
|
||||
d="M 0,0 V 20 L 10,10 Z"
|
||||
id="path833"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -164,6 +164,8 @@ const toggleMenu = () => {
|
||||
& .cross, & .middle {
|
||||
stroke-width:7;
|
||||
transition:1s ;
|
||||
-moz-transition:1s ;
|
||||
-webkit-transition:1s ;
|
||||
stroke:$white;
|
||||
}
|
||||
& .cross{
|
||||
@@ -209,7 +211,8 @@ ul.nav-menu{
|
||||
}
|
||||
a{
|
||||
font-size:1em;
|
||||
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
//font-style: italic;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color : $white;
|
||||
@@ -229,7 +232,7 @@ a{
|
||||
cursor: pointer;
|
||||
}
|
||||
&.router-link-exact-active{
|
||||
filter: drop-shadow(0 0 4px $red-light);
|
||||
filter: drop-shadow(0 0 3px $red-light);
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
&:hover::after, &.router-link-exact-active::after{
|
||||
@@ -243,18 +246,20 @@ a{
|
||||
//This transition fires on hover-out class
|
||||
transition:0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
li {
|
||||
padding: 0 0.3em;
|
||||
transform: translateY(1.25em);
|
||||
opacity:0;
|
||||
overflow: hidden;
|
||||
font-style: italic;
|
||||
@for $i from 1 to 6 {
|
||||
&:nth-child(#{$i}){
|
||||
animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -334,7 +339,7 @@ li {
|
||||
}
|
||||
|
||||
@media (height < 650px) and (width < 750px) {
|
||||
div.menu-container .burger{
|
||||
nav.menu-container .burger{
|
||||
position : fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
|
||||
@@ -47,7 +47,8 @@ const burger = useBurgerStore()
|
||||
margin:0 2.4rem;
|
||||
|
||||
// border : #f0f solid 1px;
|
||||
& h1{
|
||||
& h1{font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
letter-spacing: 0.2em;
|
||||
font-size: 2.7rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -89,7 +90,9 @@ h2{
|
||||
text-align: right;
|
||||
color:$white;
|
||||
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
|
||||
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.2ch;
|
||||
}
|
||||
|
||||
|
||||
@@ -118,18 +121,21 @@ h2{
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px){
|
||||
@media (width < 400px){
|
||||
.name{
|
||||
margin : 0;
|
||||
}
|
||||
}
|
||||
@media (width < 520px){
|
||||
|
||||
@media (max-width: 520px){
|
||||
.name h1 .r-letter{
|
||||
margin-left:2ch;
|
||||
}
|
||||
.name h1 .i-letter{
|
||||
margin-right:2ch;
|
||||
}
|
||||
.come-in h2{
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,7 @@ name : 'SpinnerCpnt'
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
//display: inline-block;
|
||||
width: 1.0em;
|
||||
margin-right: 1ch;
|
||||
aspect-ratio: 1;
|
||||
|
||||
@@ -30,7 +30,6 @@ const toggleModal = () => {
|
||||
modalActive.value = ! modalActive.value
|
||||
}
|
||||
const onSubmit = () => {
|
||||
//document.getElementById("demo-form").submit();
|
||||
// initializing forms erors :
|
||||
errors.value = {
|
||||
name : false,
|
||||
@@ -93,34 +92,34 @@ const onSubmit = () => {
|
||||
<h3><span>contact</span></h3>
|
||||
</div>
|
||||
<div class="form">
|
||||
<p>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()">
|
||||
<div class="form-item">
|
||||
<label class="first" for="name">Your name</label>
|
||||
<input v-model="name" id="name" type="text" placeholder="Name">
|
||||
<div class="error" v-if="errors.name">
|
||||
Please enter your name
|
||||
Please enter your name !
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="coordinates">Your coordinates</label>
|
||||
<input v-model="coordinates" id="coordinates" type="text" placeholder="A phone or a mail (or both)">
|
||||
<div class="error" v-if="errors.coordinates">
|
||||
Please enter some coordinates
|
||||
Please enter some coordinates !
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="company">Your company</label>
|
||||
<input v-model="company" id="company" type="text" placeholder="Company ">
|
||||
<div class="error" v-if="errors.company">
|
||||
Please enter your company
|
||||
Please enter your company !
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="message-content">Your message</label>
|
||||
<textarea v-model="content" id="message-content" rows="5" cols="22" placeholder="Message"></textarea>
|
||||
<div class="error" v-if="errors.content">
|
||||
Please write something
|
||||
Please write something !
|
||||
</div>
|
||||
</div>
|
||||
<p class="small">
|
||||
@@ -173,6 +172,7 @@ const onSubmit = () => {
|
||||
margin: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
& > .title {
|
||||
& .logo{
|
||||
@@ -259,6 +259,9 @@ const onSubmit = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
p.subtitle{
|
||||
margin: auto 0.5em;
|
||||
}
|
||||
.error{
|
||||
color: $red-light;
|
||||
text-align: center;
|
||||
|
||||
@@ -76,11 +76,26 @@ onMounted(()=>{
|
||||
& span:nth-child(#{$i}){
|
||||
position : relative;
|
||||
transform:rotateY(90deg);
|
||||
-moz-transform:rotateY(90deg);
|
||||
-webkit-transform:rotateY(90deg);
|
||||
|
||||
animation-duration: 1000ms;
|
||||
animation-name: title-last-name;
|
||||
animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
animation-delay: $i*50 + 300ms;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
-moz-animation-duration: 1000ms;
|
||||
-moz-animation-name: title-last-name;
|
||||
-moz-animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
-moz-animation-delay: $i*50 + 300ms;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
|
||||
-webkit-animation-duration: 1000ms;
|
||||
-webkit-animation-name: title-last-name;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
-webkit-animation-delay: $i*50 + 300ms;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -91,6 +106,8 @@ onMounted(()=>{
|
||||
position : relative;
|
||||
right:0ch;
|
||||
animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
-moz-animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
-webkit-animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -113,7 +130,11 @@ h2{
|
||||
font-size:1.7rem;
|
||||
text-align: right;
|
||||
color:$white;
|
||||
|
||||
|
||||
animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
||||
-moz-animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
||||
-webkit-animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
||||
|
||||
}
|
||||
.face{
|
||||
@@ -123,6 +144,9 @@ h2{
|
||||
max-width:450px;
|
||||
opacity : 0;
|
||||
animation: 1400ms image_appear 1200ms ease forwards;
|
||||
-moz-animation: 1400ms image_appear 1200ms ease forwards;
|
||||
-webkit-animation: 1400ms image_appear 1200ms ease forwards;
|
||||
|
||||
background-color: $green;
|
||||
border-radius: 50%;
|
||||
margin:2em auto 0 auto;
|
||||
@@ -153,6 +177,26 @@ h2{
|
||||
right : 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes title-name{
|
||||
0% {
|
||||
right:1ch;
|
||||
//opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right : 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes title-name{
|
||||
0% {
|
||||
right:1ch;
|
||||
//opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right : 0px;
|
||||
}
|
||||
}
|
||||
@keyframes title-last-name{
|
||||
0%{
|
||||
transform : rotateX(270deg);
|
||||
@@ -162,7 +206,41 @@ h2{
|
||||
|
||||
}
|
||||
}
|
||||
@-moz-keyframes title-last-name{
|
||||
0%{
|
||||
transform : rotateX(270deg);
|
||||
}
|
||||
100%{
|
||||
transform : rotateX(0deg);
|
||||
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes title-last-name{
|
||||
0%{
|
||||
transform : rotateX(270deg);
|
||||
}
|
||||
100%{
|
||||
transform : rotateX(0deg);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes subtitle{
|
||||
0% {
|
||||
top:150px;
|
||||
}
|
||||
100% {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes subtitle{
|
||||
0% {
|
||||
top:150px;
|
||||
}
|
||||
100% {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
@keyframes subtitle{
|
||||
0% {
|
||||
top:150px;
|
||||
@@ -180,6 +258,22 @@ h2{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes image_appear{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes image_appear{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px){
|
||||
.name{
|
||||
|
||||
@@ -15,6 +15,7 @@ onMounted(() => {
|
||||
<h3><span>Projects</span></h3>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
here are some projects I made.</p>
|
||||
<p>And bla and bla and bla</p>
|
||||
</div>
|
||||
|
||||
@@ -15,13 +15,14 @@ const showWordpressUnderList=ref(false)
|
||||
<div class="title">
|
||||
<div class="logo">
|
||||
</div>
|
||||
<h3><span>technos</span></h3>
|
||||
<h3><span>techno</span></h3>
|
||||
</div>
|
||||
<p class="first">Technologies are just like Legos. I mean, they consist of a variety of bricks you can put together to build amazing things. Here are certain languages I feel comfortable with:</p>
|
||||
<ul>
|
||||
<li>html</li>
|
||||
<li>css / scss</li>
|
||||
<li>js</li>
|
||||
<li>JavaScript</li>
|
||||
<li>SQL</li>
|
||||
<li>php</li>
|
||||
</ul>
|
||||
<p>And also some other stuff:</p>
|
||||
@@ -55,6 +56,9 @@ const showWordpressUnderList=ref(false)
|
||||
background-image: url('../assets/legos_vrac_solo2.png');
|
||||
background-size: 120%;
|
||||
}
|
||||
& > h3 > span::after{
|
||||
content:"s"
|
||||
}
|
||||
}
|
||||
|
||||
& > p, & li{
|
||||
@@ -75,8 +79,9 @@ const showWordpressUnderList=ref(false)
|
||||
}
|
||||
li{
|
||||
&::before{
|
||||
margin-left: 1em;
|
||||
//margin-left: 0em;
|
||||
margin-right: 0.5em;
|
||||
font-size: 1em;
|
||||
content: "•";
|
||||
word-spacing: 0.5em;
|
||||
color: $green;
|
||||
@@ -86,24 +91,32 @@ const showWordpressUnderList=ref(false)
|
||||
transition: 0.25s;
|
||||
&::before{
|
||||
display:inline-block;
|
||||
content:"⏵";
|
||||
//margin-left: 0px;
|
||||
//content:"\0023F5";
|
||||
|
||||
width: 7px;
|
||||
aspect-ratio: 1/2;
|
||||
background-image: url('../assets/arrow-list.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
font-size: 0.85em;
|
||||
transform: rotate(0deg);
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.open{
|
||||
&::before{
|
||||
content:"⏵";
|
||||
//content:"⏵";
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color: $red;
|
||||
color: $red-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.under-li{
|
||||
margin-left: 2em;
|
||||
margin-left: 1em;
|
||||
|
||||
&.last{
|
||||
margin-bottom: 0.5em;
|
||||
@@ -147,5 +160,10 @@ span.red{
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media (width > 450px){
|
||||
.content > .title > h3 > span::after{
|
||||
content:"logies"
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user