initalizing
This commit is contained in:
sirir
commit
04ffbccb28
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1197
package-lock.json
generated
Normal file
1197
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "my-vue-app",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"format": "prettier --write \"src/**/*.{js,vue,css,html,json}\""
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.5.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"prettier": "^3.5.3",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
133
src/App.vue
Normal file
133
src/App.vue
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app">
|
||||||
|
<Header />
|
||||||
|
<main>
|
||||||
|
<Landing />
|
||||||
|
<div class="content">
|
||||||
|
<Experience />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from "./components/Header.vue";
|
||||||
|
import Landing from "./components/Landing.vue";
|
||||||
|
import Experience from "./components/Experience.vue";
|
||||||
|
import Footer from "./components/Footer.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
components: {
|
||||||
|
Header,
|
||||||
|
Landing,
|
||||||
|
Experience,
|
||||||
|
Footer,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Global Styles */
|
||||||
|
:root {
|
||||||
|
--duck-yellow: #ffdb58;
|
||||||
|
--duck-orange: #f97316;
|
||||||
|
--duck-blue: #4682b4;
|
||||||
|
--duck-dark-blue: #1e3a8a;
|
||||||
|
--duck-green: #228b22;
|
||||||
|
--bg-color: #fffdf7;
|
||||||
|
--text-color: #333;
|
||||||
|
--gray-600: #4b5563;
|
||||||
|
--gray-700: #374151;
|
||||||
|
--gray-500: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family:
|
||||||
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||||
|
Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.content {
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation Classes */
|
||||||
|
@keyframes float {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: rotate(-5deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotate(5deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes splash {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-wave {
|
||||||
|
animation: wave 3s ease-in-out infinite;
|
||||||
|
transform-origin: bottom center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-splash {
|
||||||
|
animation: splash 0.5s ease-out forwards;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/duck-dance.gif
Normal file
BIN
src/assets/duck-dance.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/duck-dance2.gif
Normal file
BIN
src/assets/duck-dance2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
src/assets/duck-dance3.gif
Normal file
BIN
src/assets/duck-dance3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/duck.gif
Normal file
BIN
src/assets/duck.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
311
src/components/DuckTerminal.vue
Normal file
311
src/components/DuckTerminal.vue
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
<template>
|
||||||
|
<div class="duck-terminal">
|
||||||
|
<div class="terminal-header">
|
||||||
|
<div class="terminal-buttons">
|
||||||
|
<span class="terminal-button close"></span>
|
||||||
|
<span class="terminal-button minimize"></span>
|
||||||
|
<span class="terminal-button maximize"></span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-title">portfolio@duck:~</div>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-body">
|
||||||
|
<div class="terminal-content" ref="terminalContent">
|
||||||
|
<div
|
||||||
|
class="terminal-line"
|
||||||
|
v-for="(line, index) in displayedLines"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<template v-if="line.type === 'command'">
|
||||||
|
<span class="terminal-prompt">portfolio@duck:~$</span>
|
||||||
|
<span class="terminal-text">{{ line.text }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="line.type === 'skills'">
|
||||||
|
<div class="terminal-output skills-grid">
|
||||||
|
<div class="skill-item" v-for="(skill, skillIndex) in line.skills" :key="skillIndex">
|
||||||
|
{{ skill }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<span class="terminal-output">{{ line.text }}</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="terminal-line typing-line"
|
||||||
|
v-if="currentLineIndex < terminalLines.length && isTypingCommand"
|
||||||
|
>
|
||||||
|
<span class="terminal-prompt">portfolio@duck:~$</span>
|
||||||
|
<span class="terminal-text typing">{{ currentText }}</span>
|
||||||
|
<span class="terminal-cursor"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "DuckTerminal",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
terminalLines: [
|
||||||
|
{ type: "command", text: "cat profil.txt" },
|
||||||
|
{
|
||||||
|
type: "output",
|
||||||
|
text: "Développeur PHP et Admin Sys/Réseau avec passion pour le web",
|
||||||
|
},
|
||||||
|
{ type: "command", text: "cat experience.txt" },
|
||||||
|
{
|
||||||
|
type: "output",
|
||||||
|
text: "Plus de 4 ans d'expérience dans différents contextes professionnels",
|
||||||
|
},
|
||||||
|
{ type: "command", text: "ls -la skills/" },
|
||||||
|
{
|
||||||
|
type: "skills",
|
||||||
|
skills: [
|
||||||
|
"PHP", "Laravel", "MySQL", "Linux",
|
||||||
|
"Symfony", "Docker", "Git", "Networking",
|
||||||
|
"JavaScript", "REST API", "DevOps", "Cloud"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ type: "command", text: "whoami" },
|
||||||
|
{
|
||||||
|
type: "output",
|
||||||
|
text: "Expert en développement PHP et en administration système/réseau",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
displayedLines: [],
|
||||||
|
currentLineIndex: 0,
|
||||||
|
currentText: "",
|
||||||
|
currentCharIndex: 0,
|
||||||
|
typingSpeed: 40,
|
||||||
|
commandDelay: 300,
|
||||||
|
outputDelay: 300,
|
||||||
|
isTypingCommand: false,
|
||||||
|
isProcessing: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.startTyping();
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
this.scrollToBottom();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
scrollToBottom() {
|
||||||
|
if (this.$refs.terminalContent) {
|
||||||
|
this.$refs.terminalContent.scrollTop = this.$refs.terminalContent.scrollHeight;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
startTyping() {
|
||||||
|
this.processNextLine();
|
||||||
|
},
|
||||||
|
processNextLine() {
|
||||||
|
if (this.currentLineIndex >= this.terminalLines.length || this.isProcessing) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentLine = this.terminalLines[this.currentLineIndex];
|
||||||
|
this.isProcessing = true;
|
||||||
|
|
||||||
|
if (currentLine.type === "command") {
|
||||||
|
// For command lines, animate typing
|
||||||
|
this.isTypingCommand = true;
|
||||||
|
this.currentText = "";
|
||||||
|
this.currentCharIndex = 0;
|
||||||
|
this.typeCurrentLine();
|
||||||
|
} else {
|
||||||
|
// For output and skills lines, just add them after a delay
|
||||||
|
this.isTypingCommand = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.displayedLines.push(currentLine);
|
||||||
|
this.currentLineIndex++;
|
||||||
|
this.isProcessing = false;
|
||||||
|
this.processNextLine();
|
||||||
|
}, this.outputDelay);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
typeCurrentLine() {
|
||||||
|
if (!this.isTypingCommand || this.currentLineIndex >= this.terminalLines.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentLine = this.terminalLines[this.currentLineIndex];
|
||||||
|
|
||||||
|
if (this.currentCharIndex < currentLine.text.length) {
|
||||||
|
// Still typing the current character
|
||||||
|
this.currentText = currentLine.text.substring(
|
||||||
|
0,
|
||||||
|
this.currentCharIndex + 1
|
||||||
|
);
|
||||||
|
this.currentCharIndex++;
|
||||||
|
setTimeout(this.typeCurrentLine, this.typingSpeed);
|
||||||
|
} else {
|
||||||
|
// Finished typing this command
|
||||||
|
setTimeout(() => {
|
||||||
|
// Add the completed command to displayed lines
|
||||||
|
this.displayedLines.push({ ...currentLine });
|
||||||
|
this.currentLineIndex++;
|
||||||
|
this.isTypingCommand = false;
|
||||||
|
this.isProcessing = false;
|
||||||
|
|
||||||
|
// Wait a bit before processing the next line
|
||||||
|
setTimeout(this.processNextLine, this.commandDelay);
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.duck-terminal {
|
||||||
|
width: 620px; /* Fixed width as requested */
|
||||||
|
max-width: 620px;
|
||||||
|
min-width: 620px;
|
||||||
|
background-color: #1a1b26;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: "Courier New", monospace;
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||||
|
border: 1px solid #30374b;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-header {
|
||||||
|
height: 36px;
|
||||||
|
background-color: #24283b;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12px;
|
||||||
|
border-bottom: 1px solid #30374b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button.close {
|
||||||
|
background-color: #ff5f57;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button.minimize {
|
||||||
|
background-color: #febc2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-button.maximize {
|
||||||
|
background-color: #28c840;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-title {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
color: #a9b1d6;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-body {
|
||||||
|
height: calc(100% - 36px);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-content {
|
||||||
|
padding: 1.25rem;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
color: #a9b1d6;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #30374b #1a1b26;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-content::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-content::-webkit-scrollbar-track {
|
||||||
|
background: #1a1b26;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-content::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #30374b;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-line {
|
||||||
|
line-height: 1.6;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-prompt {
|
||||||
|
color: var(--duck-yellow, #ffdb58);
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-text {
|
||||||
|
color: #a9b1d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-output {
|
||||||
|
color: #7aa2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-gap: 0.5rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item {
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-cursor {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #7aa2f7;
|
||||||
|
animation: blink 1s step-start infinite;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0%,
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
51%,
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing {
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make the terminal responsive while maintaining aspect ratio */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.duck-terminal {
|
||||||
|
width: 100%;
|
||||||
|
min-width: auto;
|
||||||
|
max-width: 620px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
501
src/components/Experience.vue
Normal file
501
src/components/Experience.vue
Normal file
@ -0,0 +1,501 @@
|
|||||||
|
<template>
|
||||||
|
<section id="experience" class="experience">
|
||||||
|
<div class="experience-container">
|
||||||
|
<h2 class="section-title">Compétences</h2>
|
||||||
|
<div class="skills-grid">
|
||||||
|
<div class="skill-card animate-splash">
|
||||||
|
<h3 class="skill-title">Langages & Frameworks</h3>
|
||||||
|
<div class="skill-tags">
|
||||||
|
<span class="skill-tag">PHP</span>
|
||||||
|
<span class="skill-tag">Drupal</span>
|
||||||
|
<span class="skill-tag">Symfony</span>
|
||||||
|
<span class="skill-tag">Laravel</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="skill-card animate-splash">
|
||||||
|
<h3 class="skill-title">Systèmes & DevOps</h3>
|
||||||
|
<div class="skill-tags">
|
||||||
|
<span class="skill-tag">Docker</span>
|
||||||
|
<span class="skill-tag">Linux</span>
|
||||||
|
<span class="skill-tag">Git</span>
|
||||||
|
<span class="skill-tag">CI/CD</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="skill-card animate-splash">
|
||||||
|
<h3 class="skill-title">Administration & Sécurité</h3>
|
||||||
|
<div class="skill-tags">
|
||||||
|
<span class="skill-tag">Administration Systèmes</span>
|
||||||
|
<span class="skill-tag">Sécurité Web</span>
|
||||||
|
<span class="skill-tag">Monitoring</span>
|
||||||
|
<span class="skill-tag">SQL</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="experience-section">
|
||||||
|
<h2 class="section-title">Mon Parcours</h2>
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="timeline-title">
|
||||||
|
<h3 class="timeline-heading">Expérience Professionnelle</h3>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="timeline-icon timeline-icon-work"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8 3c.132 0 .263 0 .393 0 7.107.007 10.372 6.167 11.917 11.917.078.287.156.575.234.863"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M20.039 17.39c-.221-.89-.943-1.396-1.871-1.394a1.99 1.99 0 0 0-1.988 1.994v.012a1.998 1.998 0 0 0 2.004 1.998c.464 0 .91-.196 1.244-.548"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M7.05 4.095c-1.815-.407-3.246-.089-4.028 1.007C1.082 7.547 1.603 12.19 4 16c2.492 0 4.623-1.33 6.234-3.219"
|
||||||
|
></path>
|
||||||
|
<path d="M11.167 12c1.174-1.525 2.272-3.747 2.272-6.8V3"></path>
|
||||||
|
<circle cx="16" cy="10" r="1"></circle>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-items">
|
||||||
|
<div
|
||||||
|
class="timeline-card animate-splash"
|
||||||
|
style="animation-delay: 0s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">
|
||||||
|
Administrateur Systèmes et Réseaux Web | STUDIO BESTIO
|
||||||
|
</h3>
|
||||||
|
<p class="card-date">Février 2025 - Aujourd'hui</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Nancy, France</span>
|
||||||
|
<span>· Indépendant</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-tags">
|
||||||
|
<span class="card-tag">Docker</span>
|
||||||
|
<span class="card-tag">Linux</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>
|
||||||
|
Gestion de l'hébergement, de sauvegardes, de la maintenance et
|
||||||
|
de la sécurité des sites web pour Studiobestio. Administration
|
||||||
|
des serveurs, supervision des performances, gestion de la
|
||||||
|
journalisation, mise en place de solutions de sécurité pour
|
||||||
|
assurer une protection contre les cybermenaces. Garantir le
|
||||||
|
bon fonctionnement, la sécurité et la fiabilité des sites web
|
||||||
|
des clients.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="timeline-card animate-splash"
|
||||||
|
style="animation-delay: 0.1s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">Développeur PHP | GIE SIMA</h3>
|
||||||
|
<p class="card-date">Mai 2023 - Aujourd'hui</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Nancy, France</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-tags">
|
||||||
|
<span class="card-tag">PHP</span>
|
||||||
|
<span class="card-tag">Drupal</span>
|
||||||
|
<span class="card-tag">Docker</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>
|
||||||
|
Réecriture et maintenance d'une application pour la vente de
|
||||||
|
contrats de santé ou prévoyance déstinée à des
|
||||||
|
courtiers/conseillers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="timeline-card animate-splash"
|
||||||
|
style="animation-delay: 0.2s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">Consultant | DAVIDSON CONSULTING</h3>
|
||||||
|
<p class="card-date">Février 2023 - Mai 2023</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Nancy, France</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-tags">
|
||||||
|
<span class="card-tag">PHP</span>
|
||||||
|
<span class="card-tag">Drupal</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Développement d'applications clients</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="timeline-card animate-splash"
|
||||||
|
style="animation-delay: 0.3s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">
|
||||||
|
Développeur web | GANTOIS INDUSTRIES
|
||||||
|
</h3>
|
||||||
|
<p class="card-date">Sept. 2021 - Avr. 2022</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Saint-Dié, France</span>
|
||||||
|
<span>· Intérimaire</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-tags">
|
||||||
|
<span class="card-tag">PHP</span>
|
||||||
|
<span class="card-tag">Symfony</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Développement d'applications métier</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="timeline-card animate-splash"
|
||||||
|
style="animation-delay: 0.4s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">
|
||||||
|
Développeur web | GANTOIS INDUSTRIES
|
||||||
|
</h3>
|
||||||
|
<p class="card-date">Nov. 2020 - Sept. 2021</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Saint-Dié, France</span>
|
||||||
|
<span>· Alternance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-tags">
|
||||||
|
<span class="card-tag">PHP</span>
|
||||||
|
<span class="card-tag">Symfony</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>
|
||||||
|
Développement et maintenance d'une application de contrôle
|
||||||
|
qualité pour les pièces industrielles.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="timeline-card animate-splash"
|
||||||
|
style="animation-delay: 0.5s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">
|
||||||
|
Développeur Full Stack | 2110 FINANCE
|
||||||
|
</h3>
|
||||||
|
<p class="card-date">Juillet 2020</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Saint-Dié, France</span>
|
||||||
|
<span>· Stage</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-tags">
|
||||||
|
<span class="card-tag">PHP</span>
|
||||||
|
<span class="card-tag">Laravel</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Application de messagerie interne</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-divider"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="timeline-title">
|
||||||
|
<h3 class="timeline-heading">Formation</h3>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="timeline-icon timeline-icon-education"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M22 12A10 10 0 1 1 12 2a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3.07A8 8 0 1 0 19 12h-3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1"
|
||||||
|
></path>
|
||||||
|
<path d="M11.8 22h.2a3 3 0 0 0 3-3v-1"></path>
|
||||||
|
<path
|
||||||
|
d="M20 19a2 2 0 0 0 2-2v-1a3 3 0 0 0-3-3h-1a2 2 0 0 0-2 2"
|
||||||
|
></path>
|
||||||
|
<circle cx="12" cy="12" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-items">
|
||||||
|
<div
|
||||||
|
class="timeline-card education-card animate-splash"
|
||||||
|
style="animation-delay: 0s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">
|
||||||
|
Licence en application web et mobile | Université de
|
||||||
|
Lorraine
|
||||||
|
</h3>
|
||||||
|
<p class="card-date">2020 - 2021</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Nancy, France</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>
|
||||||
|
Formation en développement d'applications web et mobiles
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="timeline-card education-card animate-splash"
|
||||||
|
style="animation-delay: 0.1s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">
|
||||||
|
DUT informatique | Université de Lorraine
|
||||||
|
</h3>
|
||||||
|
<p class="card-date">2018 - 2020</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Nancy, France</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>
|
||||||
|
Formation en informatique générale avec spécialisation en
|
||||||
|
développement
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="timeline-card education-card animate-splash"
|
||||||
|
style="animation-delay: 0.2s"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="card-title">
|
||||||
|
Baccalauréat Scientifique | Lycée Gaston Bachelard
|
||||||
|
</h3>
|
||||||
|
<p class="card-date">2015 - 2018</p>
|
||||||
|
<div class="card-location">
|
||||||
|
<span>Bar-sur-Aube, France</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Baccalauréat avec option mathématiques</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Experience",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.experience {
|
||||||
|
padding: 2rem 0;
|
||||||
|
scroll-margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-container {
|
||||||
|
max-width: 64rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-card {
|
||||||
|
background-color: white;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--duck-dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-tag {
|
||||||
|
background-color: var(--duck-yellow);
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-section {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-heading {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-icon {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-icon-work {
|
||||||
|
color: var(--duck-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-icon-education {
|
||||||
|
color: var(--duck-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-items {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-left: 4px solid var(--duck-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.education-card {
|
||||||
|
border-left: 4px solid var(--duck-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-date {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-location {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-tag {
|
||||||
|
background-color: rgba(34, 139, 34, 0.2);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content p {
|
||||||
|
color: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-divider {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
margin: 2.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.skills-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/components/Footer.vue
Normal file
174
src/components/Footer.vue
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-left">
|
||||||
|
<DuckSvg svgClass="footer-duck" />
|
||||||
|
<div>
|
||||||
|
<h3 class="footer-title">Romaric SIRI</h3>
|
||||||
|
<p class="footer-subtitle">Développeur PHP | Admin Sys</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-right">
|
||||||
|
<p class="footer-text">
|
||||||
|
Nancy, Grand Est —
|
||||||
|
<a href="tel:0632717245" class="footer-link">06 32 71 72 45</a>
|
||||||
|
</p>
|
||||||
|
<p class="footer-text">
|
||||||
|
<a href="mailto:contact@maric.ro" class="footer-link"
|
||||||
|
>contact@maric.ro</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-duck-right animate-float">
|
||||||
|
<DuckSvg />
|
||||||
|
<div class="duck-shadow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-duck-left animate-float">
|
||||||
|
<DuckSvg />
|
||||||
|
<div class="duck-shadow"></div>
|
||||||
|
</div>
|
||||||
|
<p class="copyright">© 2025 Romaric SIRI. All rights reserved. 🦆</p>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DuckSvg from "./ducks/Duck1.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Footer",
|
||||||
|
components: {
|
||||||
|
DuckSvg,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.footer {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
background-color: rgba(255, 219, 88, 0.2);
|
||||||
|
margin-top: 2rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
max-width: 72rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-duck {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-title {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-subtitle {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-right {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-text {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link {
|
||||||
|
color: var(--gray-600);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-duck-right {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1.25rem;
|
||||||
|
right: 1rem;
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-duck-right svg {
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-duck-left {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1.25rem;
|
||||||
|
left: 1rem;
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 0.3;
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-duck-left svg {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-shadow {
|
||||||
|
position: absolute;
|
||||||
|
width: 6rem;
|
||||||
|
height: 2rem;
|
||||||
|
background-color: rgba(70, 130, 180, 0.3);
|
||||||
|
border-radius: 9999px;
|
||||||
|
bottom: -1rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.footer {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-left {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-duck-right {
|
||||||
|
right: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-duck-left {
|
||||||
|
left: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
240
src/components/Header.vue
Normal file
240
src/components/Header.vue
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="duck-container">
|
||||||
|
<DuckSvg svgClass="duck-svg animate-float" />
|
||||||
|
<div class="bubble animate-wave">
|
||||||
|
<span class="bubble-text">Quack!</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-info">
|
||||||
|
<h1 class="header-title">Romaric SIRI</h1>
|
||||||
|
<p class="header-subtitle">
|
||||||
|
Développeur PHP | Administrateur Systèmes & Réseaux Web
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="mailto:contact@maric.ro" title="Email" class="social-link">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="icon"
|
||||||
|
>
|
||||||
|
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
|
||||||
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="tel:0632717245" title="Téléphone" class="social-link">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="icon"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://linkedin.com/in/romaric-siri-a25949181"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
title="LinkedIn"
|
||||||
|
class="social-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="icon"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
|
||||||
|
></path>
|
||||||
|
<rect width="4" height="12" x="2" y="9"></rect>
|
||||||
|
<circle cx="4" cy="4" r="2"></circle>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
title="GitHub"
|
||||||
|
class="social-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="icon"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
|
||||||
|
></path>
|
||||||
|
<path d="M9 18c-4.51 2-5-2-7-2"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DuckSvg from "./ducks/Duck1.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Header",
|
||||||
|
components: {
|
||||||
|
DuckSvg,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
padding: 2.5rem 1rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-svg {
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateX(80%) translateY(-30%);
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 1rem;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 8px solid transparent;
|
||||||
|
border-right-color: white;
|
||||||
|
border-left: 0;
|
||||||
|
margin-top: -8px;
|
||||||
|
margin-left: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-text {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--duck-dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-subtitle {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
background-color: white;
|
||||||
|
color: var(--text-color);
|
||||||
|
transition:
|
||||||
|
background-color 0.2s,
|
||||||
|
color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.header {
|
||||||
|
padding: 2.5rem 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
332
src/components/Landing.vue
Normal file
332
src/components/Landing.vue
Normal file
@ -0,0 +1,332 @@
|
|||||||
|
<template>
|
||||||
|
<section class="landing">
|
||||||
|
<div class="landing-container">
|
||||||
|
<div class="landing-content animate-splash">
|
||||||
|
<div class="terminal-duck-container">
|
||||||
|
<div class="terminal-wrapper">
|
||||||
|
<DuckTerminal />
|
||||||
|
</div>
|
||||||
|
<div class="duck-container">
|
||||||
|
<div class="duck-placeholder">
|
||||||
|
<img
|
||||||
|
src="../assets/duck.gif"
|
||||||
|
alt="Dancing Duck"
|
||||||
|
class="dancing-duck"
|
||||||
|
@load="duckLoaded = true"
|
||||||
|
:class="{ 'duck-loaded': duckLoaded }"
|
||||||
|
/>
|
||||||
|
<div class="duck-loading" v-if="!duckLoaded">
|
||||||
|
<span class="loading-text">Chargement du canard...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="landing-buttons">
|
||||||
|
<button class="btn btn-primary">
|
||||||
|
Voir mon parcours
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="btn-icon"
|
||||||
|
>
|
||||||
|
<path d="M12 5v14"></path>
|
||||||
|
<path d="m19 12-7 7-7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<a href="mailto:contact@maric.ro" class="btn btn-secondary"
|
||||||
|
>Me contacter</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="duck-container-small">
|
||||||
|
<DuckSvg svgClass="duck-svg animate-float" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Background Duck Elements -->
|
||||||
|
<div class="bg-duck bg-duck-1">
|
||||||
|
<DuckSvg />
|
||||||
|
</div>
|
||||||
|
<div class="bg-duck bg-duck-2">
|
||||||
|
<DuckSvg />
|
||||||
|
</div>
|
||||||
|
<div class="bg-duck bg-duck-3">
|
||||||
|
<DuckSvg />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DuckSvg from "./ducks/Duck1.vue";
|
||||||
|
import DuckTerminal from "./DuckTerminal.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Landing",
|
||||||
|
components: {
|
||||||
|
DuckSvg,
|
||||||
|
DuckTerminal,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
duckLoaded: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.landing {
|
||||||
|
padding: 4rem 1rem;
|
||||||
|
min-height: 80vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-content {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-duck-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-wrapper {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-container {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
height: 2.75rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--duck-yellow);
|
||||||
|
color: black;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: rgba(255, 219, 88, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid var(--duck-blue);
|
||||||
|
color: var(--duck-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: rgba(70, 130, 180, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-container-small {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-svg {
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dancing-duck {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-placeholder {
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-loaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
color: var(--duck-yellow, #ffdb58);
|
||||||
|
font-family: "Courier New", monospace;
|
||||||
|
font-size: 1rem;
|
||||||
|
animation: duck-bounce 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes duck-bounce {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background Duck Elements */
|
||||||
|
.bg-duck {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-duck-1 {
|
||||||
|
top: 8rem;
|
||||||
|
right: 2.5rem;
|
||||||
|
transform: rotate(12deg);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-duck-1 svg {
|
||||||
|
width: 16rem;
|
||||||
|
height: 16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-duck-2 {
|
||||||
|
bottom: 40%;
|
||||||
|
left: 0;
|
||||||
|
transform: rotate(-12deg);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-duck-2 svg {
|
||||||
|
width: 12rem;
|
||||||
|
height: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-duck-3 {
|
||||||
|
bottom: 33.333%;
|
||||||
|
right: 33.333%;
|
||||||
|
opacity: 0.05;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-duck-3 svg {
|
||||||
|
width: 24rem;
|
||||||
|
height: 24rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.landing-content {
|
||||||
|
text-align: left;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-duck-container {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-wrapper {
|
||||||
|
width: 60%;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-container {
|
||||||
|
width: 40%;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-buttons {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duck-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-duck-1,
|
||||||
|
.bg-duck-2 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.bg-duck-3 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
34
src/components/ducks/Duck1.vue
Normal file
34
src/components/ducks/Duck1.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
:class="svgClass"
|
||||||
|
>
|
||||||
|
<ellipse cx="256" cy="256" rx="180" ry="170" fill="#FFDB58" />
|
||||||
|
<circle cx="360" cy="180" r="90" fill="#FFDB58" />
|
||||||
|
<circle cx="390" cy="160" r="15" fill="#333" />
|
||||||
|
<path d="M430 190 L480 180 L430 210 Z" fill="#F97316" />
|
||||||
|
<path d="M180 370 L150 410 L210 410 Z" fill="#F97316" />
|
||||||
|
<path d="M300 370 L270 410 L330 410 Z" fill="#F97316" />
|
||||||
|
<ellipse
|
||||||
|
cx="200"
|
||||||
|
cy="250"
|
||||||
|
rx="60"
|
||||||
|
ry="40"
|
||||||
|
fill="#FFE082"
|
||||||
|
transform="rotate(-10, 200, 250)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "DuckSvg",
|
||||||
|
props: {
|
||||||
|
svgClass: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
0
src/components/ducks/Duck2.vue
Normal file
0
src/components/ducks/Duck2.vue
Normal file
5
src/main.js
Normal file
5
src/main.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import "./style.css";
|
||||||
|
import App from "./App.vue";
|
||||||
|
|
||||||
|
createApp(App).mount("#app");
|
||||||
0
src/style.css
Normal file
0
src/style.css
Normal file
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user