[WIP] Adding Resume button, changed images slightly

angular.json

@@ -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
   }
 }

docker-compose.yml

@@ -4,8 +4,8 @@ services:
       context: .
       dockerfile: Dockerfile
       target: production
-    image: website-frontend-prod
+    image: portfolio-website-prod
-    container_name: website-frontend-prod-cont
+    container_name: portfolio-website-prod-cont
     ports:
       - "4400:80"
     restart: always

src/app/about/about.component.html

@@ -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>

src/app/about/about.component.ts

@@ -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();

src/app/header/header.component.html

@@ -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 href="path-to-your-cv.pdf" target="_blank"
-        <a *ngFor="let menuItem of menuItems" href="{{menuItem.href}}" class="hover:text-gray-400">{{menuItem.name}}</a>
+          class="ml-6 border-2 border-white text-white font-semibold py-2 px-4 rounded-sm hover:bg-white hover:text-black 
-      </nav>
+          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>

src/app/projects/projects.component.html

@@ -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>

src/app/projects/projects.component.ts

@@ -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({

src/app/skills/skills.component.ts

@@ -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);

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: true,  
+};

src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: false,
+  };