From 090e3cd41192ad15b2a9bf6f2f249186e87f4537 Mon Sep 17 00:00:00 2001 From: Niels Maes Date: Mon, 15 Sep 2025 21:29:25 +0200 Subject: [PATCH] main version that works --- portfolio/index.html | 27 +- portfolio/src/App.vue | 14 +- portfolio/src/components/Navbar.vue | 302 ++++++++- portfolio/src/style.css | 99 ++- portfolio/src/views/About.vue | 912 +++++++++++++++++++++++++++- portfolio/src/views/Home.vue | 45 +- 6 files changed, 1243 insertions(+), 156 deletions(-) diff --git a/portfolio/index.html b/portfolio/index.html index 8388c4b..d87e4b2 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -1,13 +1,18 @@ - - - - - Vite + Vue - - -
- - - + + + + + + Vite + Vue + + + + + +
+ + + + \ No newline at end of file diff --git a/portfolio/src/App.vue b/portfolio/src/App.vue index 6245016..23b9f16 100644 --- a/portfolio/src/App.vue +++ b/portfolio/src/App.vue @@ -10,19 +10,11 @@ import Navbar from './components/Navbar.vue' diff --git a/portfolio/src/components/Navbar.vue b/portfolio/src/components/Navbar.vue index bdadb59..a94a697 100644 --- a/portfolio/src/components/Navbar.vue +++ b/portfolio/src/components/Navbar.vue @@ -2,20 +2,31 @@ \ No newline at end of file diff --git a/portfolio/src/style.css b/portfolio/src/style.css index f691315..ffa169c 100644 --- a/portfolio/src/style.css +++ b/portfolio/src/style.css @@ -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; } diff --git a/portfolio/src/views/About.vue b/portfolio/src/views/About.vue index 62af56d..bc030ca 100644 --- a/portfolio/src/views/About.vue +++ b/portfolio/src/views/About.vue @@ -1,35 +1,927 @@ + \ No newline at end of file diff --git a/portfolio/src/views/Home.vue b/portfolio/src/views/Home.vue index d6d921f..181ba89 100644 --- a/portfolio/src/views/Home.vue +++ b/portfolio/src/views/Home.vue @@ -83,12 +83,6 @@ - - -
-
- Scroll Down -
@@ -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) {