finishing and fine-tuning TODO NEXT : project page
This commit is contained in:
@@ -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