Ninjaws/Portfolio-Website
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

[Added] Resume, fixed the menu

Browse Source
This commit is contained in:
Ninjaws
2024-11-23 00:06:39 +01:00
parent 76906c606c
commit 76f87f63be
13 changed files with 164 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/about/about.component.html
+5 -2
View File
@@ -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
-11
View File
@@ -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
-11
View File
@@ -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
+9 -14
View File
@@ -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>
</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
+16 -1
View File
@@ -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
+4 -6
View File
@@ -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
duration-300 group relative fade-in-up">
<!-- rounded-sm -->
class="backface-hidden rounded-md overflow-hidden shadow-lg hover:scale-105 transition-all
duration-300 group relative fade-in-up bg-white/5 border-none ">
<!-- no backdrop-blur, that causes the text to go blurry -->
<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
+53 -10
View File
@@ -1,11 +1,54 @@
$distance: 14rem;
h2:before {
left: -$distance;
}
h2:after {
left: $distance;
}
.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;
}
.metallic-card:hover {
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 */
}
/* Optional - Adding a reflective highlight */
.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
+4 -4
View File
@@ -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 -1
View File
@@ -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
-9
View File
@@ -1,9 +0,0 @@
$distance: 11rem;
h2:before {
left: -$distance;
}
h2:after {
left: $distance;
}
src/styles.scss
+1 -1
View File
@@ -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;