348 lines
7.4 KiB
Vue
348 lines
7.4 KiB
Vue
<template>
|
|
<header class="header">
|
|
<div class="header-container">
|
|
<div class="header-left">
|
|
<div class="duck-container">
|
|
<Duck1 class="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="" class="blog-link">
|
|
<span class="blog-text">Blog</span>
|
|
</a>
|
|
<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 Duck1 from './ducks/Duck1.vue';
|
|
|
|
export default {
|
|
name: "Header",
|
|
components: {
|
|
Duck1
|
|
}
|
|
};
|
|
</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;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.duck-svg {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.bubble {
|
|
padding: 0.5rem 1rem;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
background-color: white;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
z-index: 10;
|
|
}
|
|
|
|
.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;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.header a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* New Blog Link Styles */
|
|
.blog-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 2rem;
|
|
background: linear-gradient(135deg, var(--duck-blue) 0%, var(--duck-dark-blue) 100%);
|
|
color: white;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blog-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.blog-link:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.blog-link:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.blog-text {
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.blog-icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
/* Animation for blog link pulsing effect */
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(var(--duck-blue-rgb), 0.7);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 10px rgba(var(--duck-blue-rgb), 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(var(--duck-blue-rgb), 0);
|
|
}
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
.animate-wave {
|
|
animation: wave 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Updated wave animation for fixed positioning */
|
|
@keyframes wave {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.header {
|
|
padding: 2.5rem 2rem 1rem;
|
|
}
|
|
|
|
.header-container {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-left {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Make Blog link stand out more on desktop */
|
|
.blog-link {
|
|
padding: 0.5rem 1.25rem;
|
|
}
|
|
}
|
|
</style> |