[Added] Resume, fixed the menu

src/app/about/about.component.html

@@ -16,7 +16,7 @@
     </div>
 
     <p class="text-xl text-gray-600 text-center">
-      Here you'll find some of my projects, with a demo and the source code linked inside (unless there is a NDA)<br>
+      Here you'll find some of my projects, with a demo and the source code linked inside (unless there is an NDA)<br>
       Contact details can be found below. Cheers!
     </p>
 
@@ -26,8 +26,11 @@
       Below you'll find some noteworthy projects, with a demo and the source code linked inside (unless there is a NDA)
       Contact details can be found below. Cheers!
     </pre> -->
+
+
     <div class="flex justify-center mt-6">
-      <a href="path-to-your-cv.pdf" target="_blank" class=" border-2 border-black text-black font-semibold py-2 px-4 w-fit rounded-sm hover:bg-black hover:text-white 
+      <a href="Ian Vink - Curriculum Vitae 2024.pdf" target="_blank" class=" border-2 border-black text-black font-semibold 
+      py-2 px-4 w-fit rounded-sm hover:bg-gray-800 hover:text-white 
       hover:border-transparent flex items-center transition duration-300 ease-in-out">
         Resume
       </a>

src/app/about/about.component.scss

@@ -1,11 +0,0 @@
-$distance: 15.5rem;
-
-h2:before {
-    display:none;
-    left: -$distance;
-}
-
-h2:after {
-    display:none;
-    left: $distance;
-}

src/app/contact/contact.component.scss

@@ -1,11 +0,0 @@
-$distance: 13.5rem;
-
-h2:before {
-    display:none;
-    left: -$distance;
-}
-
-h2:after {
-    display:none;
-    left: $distance;
-}

src/app/header/header.component.html

@@ -1,4 +1,4 @@
-<header class="bg-gray-800 text-white py-6 relative">
+<header class="bg-gray-800 text-white py-6 relative z-50">
   <div class="container mx-auto px-4">
     <div class="flex justify-between items-center">
       <div class="text-2xl font-bold">Ian Vink</div>
@@ -13,27 +13,22 @@
           </button>
         </div>
 
-        <a href="path-to-your-cv.pdf" target="_blank"
+        <!-- <a href="path-to-your-cv.pdf" target="_blank"
           class="ml-6 border-2 border-white text-white font-semibold py-2 px-4 rounded-sm hover:bg-white hover:text-black 
           hover:border-transparent flex items-center transition duration-300 ease-in-out">
           Resume
-        </a>
+        </a> -->
       </div>
-
-
-
-      <!-- <div class="md:hidden">
-        <button (click)="toggleMenu()" class="text-white focus:outline-none">
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-          </svg>
-        </button>
-      </div> -->
     </div>
 
     <div *ngIf="isMenuOpen" class="absolute top-full left-0 w-full bg-gray-800 text-white space-y-4 p-6 z-50">
       <a *ngFor="let menuItem of menuItems" href="{{menuItem.href}}" class="block hover:text-gray-400"
         (click)="closeMenu()">{{menuItem.name}}</a>
     </div>
+
   </div>
 </header>
+<div *ngIf="isMenuOpen" class="fixed w-full h-full bg-black bg-opacity-50 z-40" (click)="closeMenu()">
+
+</div>
+<!-- bg-opacity-50 --->

src/app/header/header.component.ts

@@ -27,9 +27,24 @@ export class HeaderComponent {
 
   toggleMenu() {
     this.isMenuOpen = !this.isMenuOpen;
+    this.handleChange();
   }
   
   closeMenu() {
     this.isMenuOpen = false;
+    this.handleChange();
+  }
+  
+  /**
+   * Prevents scrolling and clicking when the mobile menu is open
+   */
+  private handleChange() {
+    const body = document.body;
+    if (this.isMenuOpen) {
+      body.style.overflow = 'hidden';
+    }
+    else {
+      body.style.overflow = 'auto';
+    }
   }
 }

src/app/projects/projects.component.html

@@ -1,13 +1,12 @@
 <section id="projects" class="py-16 bg-gray-800 text-white">
   <div class="container mx-auto px-6">
-    <h2 class="text-4xl font-semibold text-center mb-12 relative fade-in-left">Projects</h2>
+    <h2 class="text-4xl font-semibold text-center mb-12 fade-in-left winged-14">Projects</h2>
 
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
       <div *ngFor="let project of projects"
-        class="bg-white/10 backface-hidden rounded-md overflow-hidden shadow-lg hover:scale-105 transition-all 
+        class="backface-hidden rounded-md overflow-hidden shadow-lg hover:scale-105 transition-all 
-        duration-300 group relative fade-in-up">
+        duration-300 group relative fade-in-up bg-white/5 border-none ">
-
+        <!-- no backdrop-blur, that causes the text to go blurry -->
-        <!-- rounded-sm -->
         <img src="{{project.image}}" alt="{{project.title}}" class="w-full h-56 object-cover">
         <div class="p-6">
           <div class="flex justify-between">
@@ -19,7 +18,6 @@
             <span *ngFor="let technology of project.technologies"
               class="bg-gray-800 text-white text-sm px-2 py-1 rounded-md">{{technology}}</span>
           </div>
-
         </div>
       </div>
     </div>

src/app/projects/projects.component.scss

@@ -1,11 +1,54 @@
-$distance: 14rem;
+.metallic-card {
+    background: linear-gradient(145deg, #6e7d7f, #4b5457); /* Gradient to mimic brushed metal */
+    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1); /* Inner shadow for depth */
+    transition: all 0.3s ease-in-out;
+  }
   
-h2:before {
+  .metallic-card:hover {
-    left: -$distance;
+    transform: scale(1.05); /* Slight zoom effect */
-}
+    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3), 0 15px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
+    filter: brightness(1.2); /* Enhance brightness on hover */
+  }
   
-h2:after {
+  /* Optional - Adding a reflective highlight */
-    left: $distance;
+  .metallic-card::before {
-}
+    content: '';
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    width: 70%;
+    height: 10px;
+    background: rgba(255, 255, 255, 0.4);
+    transform: translateX(-50%) rotate(45deg);
+    border-radius: 50%;
+    pointer-events: none;
+  }
 
+  /* Metallic effect for project cards */
+.project-card {
+    background: linear-gradient(145deg, #4c4f52, #3a3d40); /* Darker gray gradient */
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle inner and outer shadows */
+    transition: all 0.3s ease-in-out;
+    position: relative;
+  }
   
+  .project-card:hover {
+    transform: scale(1.03); /* Subtle zoom on hover */
+    box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.5), 0 12px 18px rgba(0, 0, 0, 0.25); /* Darker shadow on hover */
+  }
+  
+  /* Optional - Adding a subtle highlight effect */
+  .project-card::before {
+    content: '';
+    position: absolute;
+    top: 5%;
+    left: 50%;
+    width: 80%;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.15); /* Less intense highlight */
+    transform: translateX(-50%) rotate(45deg);
+    border-radius: 50%;
+    pointer-events: none;
+  }

src/app/projects/projects.component.ts

@@ -15,7 +15,7 @@ interface Project {
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss',
 })
-export class ProjectsComponent{
+export class ProjectsComponent {
   projects: Project[] = [];
 
   constructor() {
@@ -30,7 +30,7 @@ export class ProjectsComponent{
         'ASP.NET Core (C#)',
         'MS SQL Server',
         'Python',
-        'Machine Learning'
+        'Machine Learning',
       ],
     });
     this.projects.push({
@@ -46,7 +46,7 @@ export class ProjectsComponent{
       year: '2018',
       description:
         'The application uses a vector field to direct particles towards a target. The vectors are calculated using a heatmap, which centers on the position of the target. \nThe particles collide with the environment, which can be edited and saved/loaded using the GUI.',
-      image: 'black2.png',//'Particle Flow - Demonstration.png', //"black.png",
+      image: 'black2.png', //'Particle Flow - Demonstration.png', //"black.png",
       technologies: ['Java', 'Swing', 'IntelliJ'],
     });
     this.projects.push({
@@ -74,7 +74,7 @@ export class ProjectsComponent{
       title: 'Augmented Reality game (group project)',
       year: '2019',
       description:
-        'The game uses computer vision to track a red ball, which serves as the controller. I created a system for the rigging and animations for the player character and the opponents. The math for OpenGL has been handwritten.',
+        'The game uses computer vision to track a red ball, which serves as the controller. A system has been created for the rigging and animations for the player character and the opponents. The math for OpenGL is written by hand.',
       image: 'AR Game.png',
       technologies: ['C++', 'OpenCV', 'OpenGL', 'IrrKlang'],
     });

src/app/skills/skills.component.html

@@ -1,6 +1,6 @@
 <section id="skills" class="py-16 bg-gray-900 text-white">
   <div class="container mx-auto px-6">
-    <h2 class="text-4xl font-semibold text-center mb-12 relative fade-in-left">Skills</h2>
+    <h2 class="text-4xl font-semibold text-center mb-12 relative fade-in-left winged-11">Skills</h2>
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 

src/app/skills/skills.component.scss

@@ -1,9 +0,0 @@
-$distance: 11rem;
-
-h2:before {
-    left: -$distance;
-}
-
-h2:after {
-    left: $distance;
-}

src/styles.scss

@@ -7,7 +7,7 @@ html {
 }
 
 /** Orange wings shown on each h2 element */
-h2:before, h2:after {
+.teste:before, .teste:after {
   content: "";
   width: 4rem;
   height: 2px;

tailwind.config.js

@@ -1,26 +1,82 @@
 /** @type {import('tailwindcss').Config} */
 
+const plugin = require("tailwindcss/plugin");
 
-const plugin = require('tailwindcss/plugin')
+const backfaceVisibility = plugin(function ({ addUtilities }) {
-
-const backfaceVisibility = plugin(function({addUtilities}) {
   addUtilities({
-    '.backface-visible': {
+    ".backface-visible": {
-      'backface-visibility': 'visible',
+      "backface-visibility": "visible",
     },
-    '.backface-hidden': {
+    ".backface-hidden": {
-      'backface-visibility': 'hidden',
+      "backface-visibility": "hidden",
+    },
+  });
+});
+
+// const winged = plugin(function({addUtilities}) {
+//   addUtilities({
+//     '.winged': {
+//       'position': 'relative',
+//       '&::before, &::after': {
+//         content: '""',
+//         width: '4rem',
+//         height: '2px',
+//         background: '#ea5f00',
+//         // color: 'white',
+//         // backgroundColor: 'white',
+//         position: 'absolute',
+//         top: '50%',
+//         left: 0,
+//         right: 0,
+//         margin: '0 auto',
+//         transform: 'translateY(-50%)'
+//       },
+//       '&::before': {
+//         // left: '-2.5rem'
+//       },
+//       '&::after': {
+//         // left: '2.5rem'
+//       }
+
+//     }
+//   })
+// });
+
+const winged = plugin(function({ addUtilities }) {
+  const createWingedClass = (position) => {
+    return {
+      'position': 'relative',
+      '&::before, &::after': {
+        content: '""',
+        height: '2px',
+        width: '4rem',
+        background: '#ea5f00',
+        position: 'absolute',
+        top: '50%',
+        left: 0,
+        right: 0,
+        margin: '0 auto',
+        transform: 'translateY(-50%)'
+      },
+      '&::before': {
+        left: `-${position}`,
+      },
+      '&::after': {
+        left: position,//`${position}rem`,
       }
-  })
+    };
+  };
+
+  addUtilities({
+    '.winged-11': createWingedClass('11rem'),
+    '.winged-14': createWingedClass('14rem')
+  });
 });
 
 module.exports = {
-  content: [
+  content: ["./src/**/*.{html,ts}"],
-    "./src/**/*.{html,ts}",
-  ],
   theme: {
     extend: {},
   },
-  plugins: [backfaceVisibility],
+  plugins: [winged, backfaceVisibility],
-}
+};
-