[WIP] Adding Resume button, changed images slightly

2024-11-22 18:21:09 +01:00
parent 176ab06ca8
commit 76906c606c
16 changed files with 62 additions and 19 deletions
@@ -50,6 +50,12 @@
                  "maximumError": "8kB"
                }
              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
              "outputHashing": "all"
            },
            "development": {
@@ -98,5 +104,8 @@
        }
      }
    }
+  },
+  "cli": {
+    "analytics": false
  }
 }
@@ -4,8 +4,8 @@ services:
      context: .
      dockerfile: Dockerfile
      target: production
-    image: website-frontend-prod
-    container_name: website-frontend-prod-cont
+    image: portfolio-website-prod
+    container_name: portfolio-website-prod-cont
    ports:
      - "4400:80"
    restart: always
@@ -1,10 +1,12 @@
 <section id="about" class="py-20 bg-white text-center">
  <div class="container mx-auto px-4">
+
    <div class="mb-6">
      <h2 class="text-3xl font-semibold italic text-gray-800 relative mb-1">Introducing, Ian Vink</h2>
      <p class="text-xl font-medium text-gray-500 text-center">
        Full-Stack Developer with a strong interest in efficiency and automation
      </p>
+
      <div class="flex justify-center md:items-center space-x-6 mt-6">
        <div *ngFor="let iconItem of iconItems" class="flex flex-col md:flex-row items-center text-gray-600">
          <i class="bi {{iconItem.icon}} text-2xl md:mr-2"></i>
@@ -12,17 +14,23 @@
        </div>
      </div>
    </div>
-    <!-- <br> -->
-    <!-- <br> -->
+
    <p class="text-xl text-gray-600 text-center">
-      <!-- Full-Stack Developer with a strong interest in efficiency and reproduceability<br> -->
      Here you'll find some of my projects, with a demo and the source code linked inside (unless there is a NDA)<br>
      Contact details can be found below. Cheers!
    </p>
+
+
    <!-- <pre class="text-xl text-gray-600 text-center text-wrap">
      Full-Stack Developer with a strong interest in efficiency and reproduceability
      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 
+      hover:border-transparent flex items-center transition duration-300 ease-in-out">
+        Resume
+      </a>
+    </div>
  </div>
 </section>
@@ -17,14 +17,15 @@ export class AboutComponent {
  iconItems: IconItem[] = [];

  constructor() {
-    this.iconItems.push({icon: "bi-globe", text: "Dutch, English"});
+    //bi-chat bi-globe bi-translate
+    this.iconItems.push({icon: "bi-translate", text: "Dutch, English"});
    this.iconItems.push({icon: "bi-geo-alt-fill", text: "Limburg, The Netherlands"});
-    this.iconItems.push({icon: "bi-cake2-fill", text: "28 years old"});
+    this.iconItems.push({icon: "bi-cake2-fill", text: this.getAge() +" years old"});
    // this.iconItems.push({icon: "bi-file-person-fill", text: "View my CV"});
  }

  getAge(): number {
-    const birthdate: Date = new Date(1995, 11, 15);
+    const birthdate: Date = new Date(1995, 10, 15);
    const today = new Date();
    let age = today.getFullYear() - birthdate.getFullYear();
    const monthDifference = today.getMonth() - birthdate.getMonth();
@@ -2,22 +2,38 @@
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center">
      <div class="text-2xl font-bold">Ian Vink</div>
+      <div class="flex items-center">
+        <nav class="hidden md:flex space-x-6">
+          <a *ngFor="let menuItem of menuItems" href="{{menuItem.href}}" class="hover:text-gray-400">{{menuItem.name}}</a>
+        </nav>
+  
+        <div class="md:hidden">
+          <button (click)="toggleMenu()" class="focus:outline-none">
+            <i class="bi bi-list text-3xl"></i>
+          </button>
+        </div>

-      <nav class="hidden md:flex space-x-6">
-        <a *ngFor="let menuItem of menuItems" href="{{menuItem.href}}" class="hover:text-gray-400">{{menuItem.name}}</a>
-      </nav>
+        <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>
+      </div>

-      <div class="md:hidden">
+
+
+      <!-- <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>

    <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>
+      <a *ngFor="let menuItem of menuItems" href="{{menuItem.href}}" class="block hover:text-gray-400"
+        (click)="closeMenu()">{{menuItem.name}}</a>
    </div>
  </div>
 </header>
@@ -4,10 +4,11 @@

    <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-lg shadow-lg hover:scale-105 transition-all 
+        class="bg-white/10 backface-hidden rounded-md overflow-hidden shadow-lg hover:scale-105 transition-all 
        duration-300 group relative fade-in-up">

-        <img src="{{project.image}}" alt="{{project.title}}" class="w-full h-56 rounded-sm object-cover">
+        <!-- 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">
            <h3 class="text-2xl font-semibold text-teal-400 mb-4">{{project.title}}</h3>
@@ -24,12 +24,13 @@ export class ProjectsComponent{
      year: '2021',
      description:
        'An application that combines key-value detection and multiclass-classification, to identify the correct supplier for an invoice. It uses online machine learning to keep improving itself as the user provides feedback.',
-      image: 'Supplier Recognition - Demo.png',
+      image: 'Supplier Recognition - Demo2.png',
      technologies: [
        'Angular (Typescript, HTML, CSS)',
        'ASP.NET Core (C#)',
        'MS SQL Server',
        'Python',
+        'Machine Learning'
      ],
    });
    this.projects.push({
@@ -45,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: 'black.png',//'Particle Flow - Demonstration4.png', //"black.png",
+      image: 'black2.png',//'Particle Flow - Demonstration.png', //"black.png",
      technologies: ['Java', 'Swing', 'IntelliJ'],
    });
    this.projects.push({
@@ -59,7 +59,8 @@ export class SkillsComponent {
      'Bash',
      'Nginx',
      'Windows',
-      'PowerShell'
+      'PowerShell',
+      'Wireguard',
    );
    // this.other.skills.push("MS Office", "Machine Learning", "Computer Vision");
    this.categories.push(this.frontend, this.backend, this.devOps);
@@ -0,0 +1,3 @@
+export const environment = {
+    production: true,  
+};
@@ -0,0 +1,3 @@
+export const environment = {
+    production: false,
+  };