mirror of
https://github.com/LucasVbr/LucasVbr.git
synced 2026-05-16 17:11:50 +00:00
Update
This commit is contained in:
LucasVbr
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@@ -0,0 +1,8 @@
|
||||
<svg class="scroll">
|
||||
<rect x="4" y="4"
|
||||
width="40" height="70"
|
||||
rx="25" ry="25"
|
||||
stroke="#fff" stroke-width="2"
|
||||
fill="#fff0"/>
|
||||
<circle class="" cx="24" cy="24" r="4" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 212 B |
+12
-8
@@ -11,24 +11,28 @@
|
||||
<ul>
|
||||
<li><a href="#accueil">Accueil</a></li>
|
||||
<li><a href="#a_propos">A Propos</a></li>
|
||||
<li><a href="#competences">Compétences</a></li>
|
||||
<li><a href="#projets">Projets</a></li>
|
||||
<li><a href="#experiences">Expériences</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="accueil">
|
||||
<div class="content">
|
||||
<h1 id="nom">Lucas Vabre</h1>
|
||||
<h2 id="status">Etudiant en Programmation</h2>
|
||||
<!-- <xmp id="code"></xmp> -->
|
||||
<div class="center">
|
||||
<h1>Lucas Vabre</h1>
|
||||
<h2>Etudiant en Programmation</h2>
|
||||
<svg class="scroll" width="44" height="74">
|
||||
<rect x="2" y="2"
|
||||
width="40" height="70"
|
||||
rx="25" ry="25"
|
||||
stroke="#fff" stroke-width="2"
|
||||
fill="#fff0"/>
|
||||
<circle class="" cx="22" cy="22" r="4" fill="#fff"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="a_propos"></section>
|
||||
<section id="competences"></section>
|
||||
<section id="projets"></section>
|
||||
<section id="experiences"></section>
|
||||
<section id="contact"></section>
|
||||
|
||||
<script src="scripts/data.json"></script>
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
var data = {
|
||||
"language": {
|
||||
"french": {
|
||||
"nav": [
|
||||
"Accueil",
|
||||
"A Propos",
|
||||
"Projets",
|
||||
"Contact"
|
||||
]
|
||||
},
|
||||
"english": {
|
||||
"nav": [
|
||||
"Home",
|
||||
"About",
|
||||
"Projects",
|
||||
"Contact"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
var data = [
|
||||
{
|
||||
"id": "accueil",
|
||||
"name": "Lucas VABRE",
|
||||
"status": "Etudiant en Informatique"
|
||||
},
|
||||
{
|
||||
"id": "a_propos",
|
||||
"info": "Ad incididunt occaecat Lorem enim tempor sit veniam eu elit.",
|
||||
"cv": ""
|
||||
},
|
||||
{
|
||||
"id": "competences",
|
||||
"langage": [
|
||||
{
|
||||
"name": "HTML/CSS",
|
||||
"value": 95
|
||||
},
|
||||
{
|
||||
"name": "Java",
|
||||
"value": 60
|
||||
},
|
||||
{
|
||||
"name": "Python",
|
||||
"value": 50
|
||||
},
|
||||
{
|
||||
"name": "Javascript",
|
||||
"value": 20
|
||||
},
|
||||
{
|
||||
"name": "C",
|
||||
"value": 10
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "projets",
|
||||
"projets": [
|
||||
{
|
||||
"name": "Projet 1",
|
||||
"image": "link",
|
||||
"link": "link"
|
||||
},
|
||||
{
|
||||
"name": "Projet 2",
|
||||
"image": "link",
|
||||
"link": "link"
|
||||
},
|
||||
{
|
||||
"name": "Projet 3",
|
||||
"image": "link",
|
||||
"link": "link"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "experiences",
|
||||
"experiences": [
|
||||
{
|
||||
"name": "experience 1",
|
||||
"date": "10/10/10",
|
||||
"description": "Infos"
|
||||
},
|
||||
{
|
||||
"name": "experience 2",
|
||||
"date": "10/10/10",
|
||||
"description": "Infos"
|
||||
},
|
||||
{
|
||||
"name": "experience 3",
|
||||
"date": "10/10/10",
|
||||
"description": "Infos"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "contact",
|
||||
"reseaux": [
|
||||
{
|
||||
"name": "Twitter",
|
||||
"image": "link",
|
||||
"link": "link"
|
||||
},
|
||||
{
|
||||
"name": "Github",
|
||||
"image": "link",
|
||||
"link": "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
+74
-46
@@ -1,72 +1,100 @@
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
/* Variables */
|
||||
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Hide scroll bar */
|
||||
*::-webkit-scrollbar { display: none; }
|
||||
|
||||
body {
|
||||
width: 100wh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100wh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Top Bar de Navigation */
|
||||
nav {
|
||||
|
||||
/* Tool box */
|
||||
.center {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/***** Navigation Top Bar *****/
|
||||
nav {
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
float: top;
|
||||
position: fixed;
|
||||
background-color: #fff3;
|
||||
}
|
||||
}
|
||||
|
||||
nav li {
|
||||
padding: 0 25px;
|
||||
nav li {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
nav a {
|
||||
nav a {
|
||||
padding: 16px 0;
|
||||
margin: 0 25px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
/***** End Navigation Top Bar *****/
|
||||
|
||||
section {
|
||||
padding: 0 calc(100vw / 10);
|
||||
min-height: 100vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Contenu de la page */
|
||||
|
||||
.content {
|
||||
padding: 50px 0;
|
||||
width: calc(100vw - 40px);
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
#accueil {
|
||||
background-color: red;
|
||||
min-height: 100vh;
|
||||
background: center no-repeat url("../images/accueil-bg.jpg") #ef476f;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#a_propos {
|
||||
background-color: blue;
|
||||
min-height: 100vh;
|
||||
}
|
||||
/***** Scroll *****/
|
||||
.scroll {
|
||||
left: 50%;
|
||||
transform: translateX(calc(50% - 24px));
|
||||
}
|
||||
|
||||
#competences {
|
||||
background-color: violet;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.scroll circle {
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-duration: 1.5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-name: scroll;
|
||||
animation-name: scroll;
|
||||
}
|
||||
|
||||
#projets {
|
||||
background-color: yellow;
|
||||
min-height: 100vh;
|
||||
}
|
||||
/* Animation */
|
||||
@-webkit-keyframes scroll {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
}
|
||||
|
||||
#experiences {
|
||||
background-color: purple;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
}
|
||||
/***** End Scroll *****/
|
||||
|
||||
#contact {
|
||||
background-color: green;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#a_propos {background-color: #ffd166}
|
||||
|
||||
#projets {background-color: #06d6a0}
|
||||
|
||||
#contact {background-color: #118ab2}
|
||||
Reference in New Issue
Block a user