Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 22:54:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

We're re-starting from scratch

Browse Source 
Another plan came out
This commit is contained in:
LJ5O
2025-02-11 22:00:40 +01:00
parent 6629f83eb6
commit 956c324273
23 changed files with 132 additions and 3356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Header.vue
View File

@@ -1,53 +0,0 @@
<script setup lang="ts">
defineProps({
links: {
type: Array<[string, string]>,
required: true
}
})
</script>
<template>
<nav class="head_div">
<ul>
<a v-for="link in links" :href="link[1]"><li ><p>{{ link[0] }}</p></li></a>
</ul>
</nav>
</template>
<style scoped>
.head_div{
min-height: 5vh;
max-height: 20vh;
margin: 0;
width: 100vw;
/*background-color: #022B3A;*/
}
ul{
display: flex;
flex-flow: row;
flex-direction: row;
justify-content: flex-start;
}
a{
list-style: none;
padding: 10px;
margin: 15px;
border-radius: 8px;
width: fit-content;
font-size: 1.4em;
text-decoration: none;
}
a:visited {
color: inherit;
}
a:hover{
background-color: rgb(53, 53, 53);
}
</style>

21
src/components/Home/Projects.vue
View File

@@ -1,21 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div class="projects">
<h1 id="projects">My projects</h1>
</div>
</template>
<style scoped>
.projects{
width: 100%;
border: 2px green dotted;
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
}
</style>

98
src/components/Home/TypewriterWelcome.vue
View File

@@ -1,98 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));
const jobTitles = ["Computer Science student", "AI enthousiast", "Full-stack web developer"];
let currentJob = ref('');
let currentChar = 0;
let currentTitle = 0;
async function startTypewriter(){
let recursive = async ()=>{
if(currentChar > jobTitles[currentTitle].length-1){
//We finished to write this title
//Let's wait a little, so user can read it
await delay(1500);
currentChar = 0;
currentTitle = (currentTitle+1) % jobTitles.length;
currentJob.value = ''; // Clear of wrote value
}
currentJob.value = currentJob.value + jobTitles[currentTitle][currentChar];
currentChar++;
await delay(400);
recursive();
}
recursive();
}
onMounted(() => {
startTypewriter();
});
</script>
<template>
<div class="typewriter_welcome">
<div class="typewriter">
<h1>Hi ! It's Kévin Sailly</h1>
<br><h2 class="job_title">{{currentJob}}</h2>
</div>
<div class="picture">
<img src="@/assets/welcome_picture.jpg" width="100%" height="100%"/>
</div>
</div>
</template>
<style scoped>
.typewriter_welcome{
width: 100%;
border: 2px green dotted;
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
}
.typewriter{
border: 2px yellow dotted;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
margin-left: 5vw;
width: 20vw;
min-width: 350px;
overflow:visible;
}
.typewriter h1{
font-size: 2.8em;
}
.job_title{
width: fit-content;
font-size: 1.8em;
animation: blink-caret .75s step-end infinite;
border-right: .15em solid orange;
}
.picture{
border: 2px greenyellow dotted;
width: 25vw;
margin-right: 10vw;
min-width: 300px;
}
.picture img{
border-radius: 50%;
border: 3px #976391 solid;
}
/* Animation */
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
</style>