main version that works
This commit is contained in:
@@ -1,13 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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>
|
||||
<!-- FontAwesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -10,19 +10,11 @@ import Navbar from './components/Navbar.vue'
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
.app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -2,20 +2,31 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<router-link to="/" class="logo-text">Niels</router-link>
|
||||
<router-link to="/" class="logo-text">
|
||||
<span class="logo-icon"><i class="fas fa-bolt" style="color: #64b5f6;"></i></span>
|
||||
nielsm.xyz
|
||||
</router-link>
|
||||
</div>
|
||||
<ul class="nav-menu" :class="{ active: isMenuOpen }">
|
||||
<li class="nav-item">
|
||||
<router-link to="/" class="nav-link" @click="closeMenu">Home</router-link>
|
||||
<router-link to="/" class="nav-link" @click="closeMenu">
|
||||
<span class="nav-text">Home</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/about" class="nav-link" @click="closeMenu">About</router-link>
|
||||
<router-link to="/about" class="nav-link" @click="closeMenu">
|
||||
<span class="nav-text">About</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/projects" class="nav-link" @click="closeMenu">Projects</router-link>
|
||||
<router-link to="/projects" class="nav-link" @click="closeMenu">
|
||||
<span class="nav-text">Projects</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/contact" class="nav-link" @click="closeMenu">Contact</router-link>
|
||||
<router-link to="/contact" class="nav-link" @click="closeMenu">
|
||||
<span class="nav-text">Contact</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="hamburger" :class="{ active: isMenuOpen }" @click="toggleMenu">
|
||||
@@ -24,13 +35,15 @@
|
||||
<span class="bar"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-background"></div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const isMenuOpen = ref(false)
|
||||
const isScrolled = ref(false)
|
||||
|
||||
const toggleMenu = () => {
|
||||
isMenuOpen.value = !isMenuOpen.value
|
||||
@@ -39,87 +52,256 @@ const toggleMenu = () => {
|
||||
const closeMenu = () => {
|
||||
isMenuOpen.value = false
|
||||
}
|
||||
|
||||
const handleScroll = () => {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
isScrolled.value = scrollTop > 100
|
||||
|
||||
// Update the navbar class directly
|
||||
const navbar = document.querySelector('.navbar')
|
||||
if (navbar) {
|
||||
if (scrollTop > 100) {
|
||||
navbar.classList.add('scrolled')
|
||||
} else {
|
||||
navbar.classList.remove('scrolled')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll, { passive: true })
|
||||
// Initial check
|
||||
handleScroll()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: rgba(15, 15, 15, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
top: 1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 4rem);
|
||||
max-width: 1200px;
|
||||
background: rgba(10, 10, 10, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(100, 181, 246, 0.2);
|
||||
border-radius: 20px;
|
||||
z-index: 1000;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-color: rgba(100, 181, 246, 0.3);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
transform: translateX(-50%) scale(0.98);
|
||||
}
|
||||
|
||||
.nav-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(102, 126, 234, 0.05) 0%,
|
||||
rgba(118, 75, 162, 0.05) 50%,
|
||||
rgba(102, 126, 234, 0.05) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 20px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navbar:hover .nav-background {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(45deg, #64b5f6, #42a5f5);
|
||||
background: linear-gradient(45deg, #64b5f6, #42a5f5, #1e88e5);
|
||||
background-size: 200% auto;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logo-text:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 1.6rem;
|
||||
filter: drop-shadow(0 0 10px rgba(100, 181, 246, 0.5));
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, rgba(100, 181, 246, 0.1), rgba(118, 75, 162, 0.1));
|
||||
border-radius: 12px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-link:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #64b5f6;
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(100, 181, 246, 0.3);
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link.router-link-active {
|
||||
color: #64b5f6;
|
||||
background: rgba(100, 181, 246, 0.15);
|
||||
border: 1px solid rgba(100, 181, 246, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(100, 181, 246, 0.2);
|
||||
}
|
||||
|
||||
.nav-link.router-link-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(45deg, #64b5f6, #42a5f5);
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #64b5f6;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px rgba(100, 181, 246, 0.8);
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.hamburger:hover {
|
||||
background: rgba(100, 181, 246, 0.1);
|
||||
border-color: rgba(100, 181, 246, 0.3);
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: linear-gradient(45deg, #64b5f6, #42a5f5);
|
||||
margin: 3px 0;
|
||||
transition: 0.3s;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% center;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 10px rgba(100, 181, 246, 0.5));
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 0 15px rgba(100, 181, 246, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
top: 0.5rem;
|
||||
width: calc(100% - 2rem);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
@@ -127,30 +309,86 @@ const closeMenu = () => {
|
||||
.nav-menu {
|
||||
position: fixed;
|
||||
left: -100%;
|
||||
top: 70px;
|
||||
top: 75px;
|
||||
flex-direction: column;
|
||||
background: rgba(15, 15, 15, 0.98);
|
||||
width: 100%;
|
||||
background: rgba(10, 10, 10, 0.98);
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
width: calc(100% - 2rem);
|
||||
max-width: 1200px;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
|
||||
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
|
||||
padding: 2rem 0;
|
||||
border: 1px solid rgba(100, 181, 246, 0.2);
|
||||
border-radius: 16px;
|
||||
gap: 0.5rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.nav-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 1rem 1.5rem;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hamburger.active .bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger.active .bar:nth-child(1) {
|
||||
transform: translateY(8px) rotate(45deg);
|
||||
transform: translateY(7px) rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger.active .bar:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
padding: 0.8rem 1.5rem;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar {
|
||||
top: 0.5rem;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +1,70 @@
|
||||
/* Global Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Remove default button styles */
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
/* Remove default heading styles */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
/* Remove default list styles */
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -1,35 +1,927 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<div class="container">
|
||||
<h1>About Me</h1>
|
||||
<p>More content coming soon...</p>
|
||||
<!-- Hero Section -->
|
||||
<section class="about-hero">
|
||||
<div class="hero-background">
|
||||
<div class="floating-elements">
|
||||
<div class="element element-1"></div>
|
||||
<div class="element element-2"></div>
|
||||
<div class="element element-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="profile-section">
|
||||
<div class="profile-avatar">
|
||||
<div class="avatar-ring"></div>
|
||||
<div class="avatar-inner">
|
||||
<span class="avatar-text">NM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<h1 class="profile-name">Niels</h1>
|
||||
<p class="profile-title">Cybersecurity Student & Full Stack Developer</p>
|
||||
<p class="profile-location"><i class="fas fa-map-marker-alt" style="color: #64b5f6;"></i> Belgium</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Content -->
|
||||
<section class="about-content">
|
||||
<div class="container">
|
||||
<!-- Introduction -->
|
||||
<div class="intro-section">
|
||||
<h2 class="section-title">About Me</h2>
|
||||
<div class="intro-grid">
|
||||
<div class="intro-text">
|
||||
<p class="intro-paragraph">
|
||||
I'm a passionate cybersecurity student with hands-on experience in web design and software development.
|
||||
Currently working at <span class="highlight">Stellarnode VOF</span>, I combine my academic knowledge
|
||||
in cybersecurity with practical skills in modern web technologies.
|
||||
</p>
|
||||
<p class="intro-paragraph">
|
||||
My journey in tech began with a curiosity about how things work behind the scenes. This led me to
|
||||
explore both the creative side of web development and the analytical side of cybersecurity,
|
||||
giving me a unique perspective on building secure, user-friendly applications.
|
||||
</p>
|
||||
<p class="intro-paragraph">
|
||||
I believe in continuous learning and staying updated with the latest technologies and security practices.
|
||||
Whether it's developing responsive web applications or analyzing security vulnerabilities,
|
||||
I approach every challenge with enthusiasm and attention to detail.
|
||||
</p>
|
||||
</div>
|
||||
<div class="intro-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon"><i class="fas fa-graduation-cap" style="color: #64b5f6;"></i></div>
|
||||
<div class="stat-info">
|
||||
<h3>Education</h3>
|
||||
<p>Cybersecurity Student</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon"><i class="fas fa-briefcase" style="color: #64b5f6;"></i></div>
|
||||
<div class="stat-info">
|
||||
<h3>Work</h3>
|
||||
<p>Stellarnode VOF</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon"><i class="fas fa-crosshairs" style="color: #64b5f6;"></i></div>
|
||||
<div class="stat-info">
|
||||
<h3>Focus</h3>
|
||||
<p>Security & Development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<div class="skills-section">
|
||||
<h2 class="section-title">Technical Skills</h2>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">
|
||||
<h3 class="category-title">
|
||||
<span class="category-icon"><i class="fas fa-lock" style="color: #667eea;"></i></span>
|
||||
Cybersecurity
|
||||
</h3>
|
||||
<div class="skills-list">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Network Security</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="75"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Penetration Testing</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Security Analysis</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Risk Assessment</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="65"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-category">
|
||||
<h3 class="category-title">
|
||||
<span class="category-icon"><i class="fas fa-code" style="color: #667eea;"></i></span>
|
||||
Frontend Development
|
||||
</h3>
|
||||
<div class="skills-list">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Vue.js</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="85"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">React</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">JavaScript/TypeScript</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="90"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">CSS/SASS</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="85"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-category">
|
||||
<h3 class="category-title">
|
||||
<span class="category-icon"><i class="fas fa-server" style="color: #667eea;"></i></span>
|
||||
Backend & Tools
|
||||
</h3>
|
||||
<div class="skills-list">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Node.js</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="75"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Python</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Git/GitHub</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="85"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Linux</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-progress" data-progress="75"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Experience Timeline -->
|
||||
<div class="timeline-section">
|
||||
<h2 class="section-title">Experience & Education</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-icon"><i class="fas fa-briefcase" style="color: #64b5f6;"></i></div>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">2023 - Present</div>
|
||||
<h3 class="timeline-title">Web Designer & Software Developer</h3>
|
||||
<h4 class="timeline-company">Stellarnode VOF</h4>
|
||||
<p class="timeline-description">
|
||||
Developing modern web applications and software solutions. Working with cutting-edge technologies
|
||||
to create user-friendly interfaces and robust backend systems. Collaborating with clients to
|
||||
deliver high-quality digital products.
|
||||
</p>
|
||||
<div class="timeline-tags">
|
||||
<span class="tag">Vue.js</span>
|
||||
<span class="tag">React</span>
|
||||
<span class="tag">Node.js</span>
|
||||
<span class="tag">UI/UX Design</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-icon"><i class="fas fa-graduation-cap" style="color: #64b5f6;"></i></div>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">2022 - Present</div>
|
||||
<h3 class="timeline-title">Cybersecurity Studies</h3>
|
||||
<h4 class="timeline-company">University/College</h4>
|
||||
<p class="timeline-description">
|
||||
Pursuing comprehensive education in cybersecurity, including network security, ethical hacking,
|
||||
risk management, and security architecture. Gaining hands-on experience with security tools
|
||||
and methodologies.
|
||||
</p>
|
||||
<div class="timeline-tags">
|
||||
<span class="tag">Network Security</span>
|
||||
<span class="tag">Ethical Hacking</span>
|
||||
<span class="tag">Risk Management</span>
|
||||
<span class="tag">Security Analysis</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-icon"><i class="fas fa-laptop-code" style="color: #64b5f6;"></i></div>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">2021 - 2022</div>
|
||||
<h3 class="timeline-title">Self-taught Development</h3>
|
||||
<h4 class="timeline-company">Personal Projects</h4>
|
||||
<p class="timeline-description">
|
||||
Started my journey in web development through self-learning. Built various projects using
|
||||
modern web technologies and frameworks. Developed strong foundation in programming
|
||||
and software engineering principles.
|
||||
</p>
|
||||
<div class="timeline-tags">
|
||||
<span class="tag">HTML/CSS</span>
|
||||
<span class="tag">JavaScript</span>
|
||||
<span class="tag">React</span>
|
||||
<span class="tag">Python</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interests Section -->
|
||||
<div class="interests-section">
|
||||
<h2 class="section-title">Interests & Hobbies</h2>
|
||||
<div class="interests-grid">
|
||||
<div class="interest-card">
|
||||
<div class="interest-icon"><i class="fas fa-shield-alt" style="color: #667eea;"></i></div>
|
||||
<h3>Cybersecurity Research</h3>
|
||||
<p>Staying updated with latest security threats and defense mechanisms</p>
|
||||
</div>
|
||||
<div class="interest-card">
|
||||
<div class="interest-icon"><i class="fas fa-bolt" style="color: #667eea;"></i></div>
|
||||
<h3>Tech Innovation</h3>
|
||||
<p>Exploring emerging technologies and their practical applications</p>
|
||||
</div>
|
||||
<div class="interest-card">
|
||||
<div class="interest-icon"><i class="fas fa-bullseye" style="color: #667eea;"></i></div>
|
||||
<h3>Problem Solving</h3>
|
||||
<p>Tackling complex challenges through analytical thinking</p>
|
||||
</div>
|
||||
<div class="interest-card">
|
||||
<div class="interest-icon"><i class="fab fa-github" style="color: #667eea;"></i></div>
|
||||
<h3>Open Source</h3>
|
||||
<p>Contributing to open source projects and learning from the community</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
// Animate skill bars when they come into view
|
||||
const observerOptions = {
|
||||
threshold: 0.5,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const progressBars = entry.target.querySelectorAll('.skill-progress')
|
||||
progressBars.forEach(bar => {
|
||||
const progress = bar.getAttribute('data-progress')
|
||||
bar.style.width = progress + '%'
|
||||
})
|
||||
}
|
||||
})
|
||||
}, observerOptions)
|
||||
|
||||
const skillsSection = document.querySelector('.skills-section')
|
||||
if (skillsSection) {
|
||||
observer.observe(skillsSection)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f0f0f 100%);
|
||||
color: #ffffff;
|
||||
padding: 6rem 2rem 2rem;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.about-hero {
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 6rem 0 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.element {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, rgba(100, 181, 246, 0.1), rgba(118, 75, 162, 0.1));
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.element-1 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 20%;
|
||||
left: 15%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.element-2 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: 60%;
|
||||
right: 20%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.element-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 20%;
|
||||
left: 70%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
animation: fadeInUp 1s ease-out;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-ring {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 3px solid rgba(100, 181, 246, 0.3);
|
||||
border-radius: 50%;
|
||||
animation: rotate 20s linear infinite;
|
||||
border-top-color: #64b5f6;
|
||||
border-right-color: #42a5f5;
|
||||
}
|
||||
|
||||
.avatar-inner {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(102, 126, 234, 0.4),
|
||||
inset 0 2px 10px rgba(255, 255, 255, 0.2);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 4rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(45deg, #ffffff, #64b5f6, #ffffff);
|
||||
background-size: 200% auto;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.profile-title {
|
||||
font-size: 1.5rem;
|
||||
color: #64b5f6;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.profile-location {
|
||||
font-size: 1.1rem;
|
||||
color: #b0b0b0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* About Content */
|
||||
.about-content {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
background: linear-gradient(45deg, #ffffff, #64b5f6);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: linear-gradient(45deg, #64b5f6, #42a5f5);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Introduction Section */
|
||||
.intro-section {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.intro-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.intro-paragraph {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #b0b0b0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #64b5f6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.intro-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
background: rgba(100, 181, 246, 0.1);
|
||||
border-color: rgba(100, 181, 246, 0.3);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.stat-info p {
|
||||
color: #64b5f6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills-section {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.skill-category:hover {
|
||||
background: rgba(100, 181, 246, 0.08);
|
||||
border-color: rgba(100, 181, 246, 0.3);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 1.4rem;
|
||||
color: #ffffff;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-size: 1rem;
|
||||
color: #b0b0b0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.skill-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.skill-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, #64b5f6, #42a5f5);
|
||||
border-radius: 4px;
|
||||
width: 0%;
|
||||
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.skill-progress::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
animation: shine 2s infinite;
|
||||
}
|
||||
|
||||
/* Timeline Section */
|
||||
.timeline-section {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, #64b5f6, #42a5f5);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.marker-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
flex: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.timeline-content:hover {
|
||||
background: rgba(100, 181, 246, 0.08);
|
||||
border-color: rgba(100, 181, 246, 0.3);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
color: #64b5f6;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.timeline-company {
|
||||
color: #42a5f5;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.timeline-description {
|
||||
color: #b0b0b0;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.timeline-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(100, 181, 246, 0.2);
|
||||
color: #64b5f6;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid rgba(100, 181, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Interests Section */
|
||||
.interests-section {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.interests-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.interest-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.interest-card:hover {
|
||||
background: rgba(100, 181, 246, 0.08);
|
||||
border-color: rgba(100, 181, 246, 0.3);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.interest-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.interest-card h3 {
|
||||
color: #ffffff;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.interest-card p {
|
||||
color: #b0b0b0;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% center;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.profile-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.intro-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-name {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.marker-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.interests-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
padding: 6rem 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.profile-name {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.avatar-inner {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-ring {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -83,12 +83,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Indicator -->
|
||||
<div class="scroll-indicator">
|
||||
<div class="scroll-arrow"></div>
|
||||
<span class="scroll-text">Scroll Down</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -101,10 +95,9 @@ const typingText = ref(null)
|
||||
onMounted(() => {
|
||||
const texts = [
|
||||
'Cybersecurity Student',
|
||||
'Full Stack Developer',
|
||||
'Co-Founder Stellarnode VOF',
|
||||
'Security Enthusiast',
|
||||
'Problem Solver',
|
||||
'Creative Thinker'
|
||||
'Aviation Enthusiast'
|
||||
]
|
||||
|
||||
let textIndex = 0
|
||||
@@ -467,35 +460,6 @@ onMounted(() => {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Scroll Indicator */
|
||||
.scroll-indicator {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #64b5f6;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
.scroll-arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #64b5f6;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.scroll-text {
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
@@ -600,6 +564,11 @@ onMounted(() => {
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.preview-stats {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
Reference in New Issue
Block a user