leo/0x1eo.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Leandro Afonso
2025-09-27 18:17:32 +01:00
commit 24e7da0447
24 changed files with 18093 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
app/components/ProjectCard.vue Normal file
View File

@@ -0,0 +1,178 @@
<script setup lang="ts">
import { type Project } from '~/data/projects'
// Define the props this component accepts
type Props = {
project: Project
}
const { project } = defineProps<Props>()
</script>
<template>
<NuxtLink
:to="`/projects/${project.slug}`"
class="group relative block overflow-hidden rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 hover:border-blue-400/50 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-blue-500/20">
<!-- Background Gradient Overlay -->
<div
class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<!-- Content -->
<div class="relative p-8 flex flex-col h-full">
<!-- Project Category Badge -->
<div class="flex items-center justify-between mb-4">
<span
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium transition-all duration-300"
:class="
project.group === 'Academic'
? 'bg-purple-500/10 text-purple-400 border border-purple-500/20 rounded-lg group-hover:bg-purple-500/20 group-hover:border-purple-400/40'
: 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-full group-hover:bg-emerald-500/20 group-hover:border-emerald-400/40'
">
<!-- Academic Icon -->
<svg
v-if="project.group === 'Academic'"
class="w-3.5 h-3.5"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M12,3L1,9L12,15L21,9V16H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" />
</svg>
<!-- Freelance Icon -->
<svg
v-else
class="w-3.5 h-3.5"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M20,6H16V4A2,2 0 0,0 14,2H10A2,2 0 0,0 8,4V6H4A2,2 0 0,0 2,8V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V8A2,2 0 0,0 20,6M10,4H14V6H10V4Z" />
</svg>
{{ project.category }}
</span>
<div
class="w-8 h-8 rounded-full opacity-60 group-hover:opacity-100 transition-all duration-300"
:class="
project.group === 'Academic'
? 'bg-gradient-to-br from-purple-400 to-pink-400'
: 'bg-gradient-to-br from-emerald-400 to-teal-400'
" />
</div>
<!-- Project Title -->
<h3
class="text-2xl font-bold text-white mb-3 group-hover:text-blue-400 transition-colors duration-300 h-16">
{{ project.title }}
</h3>
<!-- Project Description -->
<p
class="text-gray-400 line-clamp-3 group-hover:text-gray-300 transition-colors duration-300 mb-6">
{{
project.description_points?.[0] ||
'A fascinating project showcasing technical expertise and innovation.'
}}
</p>
<div class="flex flex-col gap-6 mt-auto">
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span
v-for="(tag, index) in project.tags.slice(0, 4)"
:key="tag"
class="bg-gray-700/50 text-gray-300 text-sm font-medium px-3 py-1 rounded-full border border-gray-600 group-hover:border-gray-500 group-hover:bg-gray-600/50 transition-all duration-300"
:class="{ 'animate-fade-in-tag': true }"
:style="`animation-delay: ${index * 0.1}s`">
{{ tag }}
</span>
<span
v-if="project.tags.length > 4"
class="bg-gray-700/50 text-gray-400 text-sm font-medium px-3 py-1 rounded-full border border-gray-600">
+{{ project.tags.length - 4 }}
</span>
</div>
<!-- Project Link Indicator -->
<div class="flex items-center justify-between">
<div
class="flex items-center space-x-2 text-gray-400 group-hover:text-blue-400 transition-colors duration-300">
<span class="text-sm font-medium">View Project</span>
<svg
class="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
<!-- Live Site Indicator -->
<div
v-if="project.link && !project.link.includes('github.com')"
class="flex items-center space-x-1 text-green-400">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
<span class="text-xs font-medium">Live</span>
</div>
<!-- GitHub Repository Indicator -->
<div
v-else-if="project.link && project.link.includes('github.com')"
class="flex items-center space-x-1 text-gray-400">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<span class="text-xs font-medium">Source</span>
</div>
<!-- Files Available Indicator -->
<div
v-else-if="project.files && project.files.length > 0"
class="flex items-center space-x-1 text-amber-400">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
<path
d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
</svg>
<span class="text-xs font-medium">Files</span>
</div>
</div>
</div>
</div>
<!-- Hover Effect Border -->
<div
class="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
<div
class="absolute inset-0 rounded-2xl blur-sm"
:class="
project.group === 'Academic'
? 'bg-gradient-to-r from-purple-400/20 to-pink-400/20'
: 'bg-gradient-to-r from-emerald-400/20 to-teal-400/20'
" />
</div>
</NuxtLink>
</template>
<style scoped>
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@keyframes fade-in-tag {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-tag {
animation: fade-in-tag 0.5s ease-out forwards;
}
</style>

127
app/components/TheFooter.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<footer class="bg-gradient-to-t from-gray-900 via-gray-800 to-gray-900 text-gray-400 mt-20 border-t border-gray-800">
<div class="container mx-auto p-8">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<!-- Brand Section -->
<div class="space-y-4">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-gradient-to-br from-blue-400 to-purple-400 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">LA</span>
</div>
<span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
Leandro Afonso
</span>
</div>
<p class="text-gray-400 leading-relaxed max-w-md">
Cybersecurity specialist and systems engineer passionate about building secure, scalable solutions.
</p>
</div>
<!-- Quick Links -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-white">Quick Links</h3>
<ul class="space-y-2">
<li>
<NuxtLink to="/" class="hover:text-blue-400 transition-colors duration-300 flex items-center group">
<svg class="w-4 h-4 mr-2 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Home
</NuxtLink>
</li>
<li>
<NuxtLink to="/projects" class="hover:text-blue-400 transition-colors duration-300 flex items-center group">
<svg class="w-4 h-4 mr-2 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
Projects
</NuxtLink>
</li>
<li>
<NuxtLink to="/about" class="hover:text-blue-400 transition-colors duration-300 flex items-center group">
<svg class="w-4 h-4 mr-2 opacity-60 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
About
</NuxtLink>
</li>
</ul>
</div>
<!-- Contact Info -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-white">Get In Touch</h3>
<div class="space-y-3">
<a
href="mailto:leo@0x1eo.dev"
class="flex items-center space-x-3 hover:text-blue-400 transition-colors duration-300 group"
>
<div class="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors duration-300">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<span>leo@0x1eo.dev</span>
</a>
<a
href="https://www.linkedin.com/in/0x1eo"
target="_blank"
rel="noopener noreferrer"
class="flex items-center space-x-3 hover:text-blue-400 transition-colors duration-300 group"
>
<div class="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors duration-300">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</div>
<span>LinkedIn</span>
</a>
<a
href="https://0x1eo.dev/"
target="_blank"
rel="noopener noreferrer"
class="flex items-center space-x-3 hover:text-blue-400 transition-colors duration-300 group"
>
<div class="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors duration-300">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9m0 9c-5 0-9-4-9-9s4-9 9-9" />
</svg>
</div>
<span>Portfolio Website</span>
</a>
<a
href="tel:+351910074564"
class="flex items-center space-x-3 hover:text-blue-400 transition-colors duration-300 group"
>
<div class="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors duration-300">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<span>+351 910 074 564</span>
</a>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p class="text-sm text-gray-500">
&copy; {{ new Date().getFullYear() }} Leandro Afonso. All rights reserved.
</p>
<div class="flex items-center space-x-6 text-sm text-gray-500">
<span>Built with ❤️ using Nuxt & Tailwind</span>
<div class="flex items-center space-x-1">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
<span>Available for new opportunities</span>
</div>
</div>
</div>
</div>
</footer>
</template>

186
app/components/TheHeader.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<header
class="bg-gray-900/80 backdrop-blur-md text-white sticky top-0 z-50 border-b border-gray-800">
<nav class="container mx-auto flex justify-between items-center p-4">
<!-- Logo/Brand -->
<div class="flex flex-1 justify-start">
<NuxtLink to="/" class="group flex items-center space-x-2">
<div
class="w-10 h-10 bg-gradient-to-br from-blue-400 to-purple-400 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<span class="text-white font-bold text-lg">LA</span>
</div>
<span
class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-blue-300 group-hover:to-purple-300 transition-all duration-300">
Leandro Afonso
</span>
</NuxtLink>
</div>
<!-- Desktop Navigation -->
<ul class="hidden md:flex space-x-8 text-lg">
<li>
<NuxtLink
to="/"
class="relative py-2 hover:text-blue-400 transition-colors duration-300 group"
:class="{ 'text-blue-400': $route.path === '/' }">
Home
<span
class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 group-hover:w-full transition-all duration-300" />
</NuxtLink>
</li>
<li>
<NuxtLink
to="/projects"
class="relative py-2 hover:text-blue-400 transition-colors duration-300 group"
:class="{ 'text-blue-400': $route.path.startsWith('/projects') }">
Projects
<span
class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 group-hover:w-full transition-all duration-300" />
</NuxtLink>
</li>
<li>
<NuxtLink
to="/about"
class="relative py-2 hover:text-blue-400 transition-colors duration-300 group"
:class="{ 'text-blue-400': $route.path === '/about' }">
About
<span
class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 group-hover:w-full transition-all duration-300" />
</NuxtLink>
</li>
</ul>
<!-- Contact Button -->
<div class="hidden md:flex flex-1 justify-end">
<a
href="mailto:leo@0x1eo.dev"
class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transform hover:scale-105 transition-all duration-300 shadow-lg">
<svg
class="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Contact
</a>
</div>
<!-- Mobile Menu Button -->
<button
class="md:hidden p-2 rounded-lg hover:bg-gray-800 transition-colors duration-300"
@click="toggleMobileMenu">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
v-if="!mobileMenuOpen"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
<path
v-else
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</nav>
<!-- Mobile Menu -->
<div
v-if="mobileMenuOpen"
class="md:hidden bg-gray-900/95 backdrop-blur-md border-t border-gray-800 animate-fade-in">
<div class="container mx-auto p-4 space-y-4">
<NuxtLink
to="/"
class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition-colors duration-300"
:class="{ 'bg-gray-800 text-blue-400': $route.path === '/' }"
@click="closeMobileMenu">
Home
</NuxtLink>
<NuxtLink
to="/projects"
class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition-colors duration-300"
:class="{
'bg-gray-800 text-blue-400': $route.path.startsWith('/projects')
}"
@click="closeMobileMenu">
Projects
</NuxtLink>
<NuxtLink
to="/about"
class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition-colors duration-300"
:class="{ 'bg-gray-800 text-blue-400': $route.path === '/about' }"
@click="closeMobileMenu">
About
</NuxtLink>
<a
href="mailto:leo@0x1eo.dev"
class="flex items-center justify-center py-3 px-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300">
<svg
class="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Contact Me
</a>
</div>
</div>
</header>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const mobileMenuOpen = ref(false)
const toggleMobileMenu = () => {
mobileMenuOpen.value = !mobileMenuOpen.value
}
const closeMobileMenu = () => {
mobileMenuOpen.value = false
}
// Close mobile menu when route changes
watch(
() => route.path,
() => {
mobileMenuOpen.value = false
}
)
</script>
<style scoped>
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in 0.3s ease-out;
}
</style>