diff --git a/public/Ian Vink - Curriculum Vitae 2024.pdf b/public/Ian Vink - Curriculum Vitae 2024.pdf new file mode 100644 index 0000000..612ce41 Binary files /dev/null and b/public/Ian Vink - Curriculum Vitae 2024.pdf differ diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index 29bd9e0..7335e8d 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -16,7 +16,7 @@

- Here you'll find some of my projects, with a demo and the source code linked inside (unless there is a NDA)
+ Here you'll find some of my projects, with a demo and the source code linked inside (unless there is an NDA)
Contact details can be found below. Cheers!

@@ -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! --> + +
- Resume diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index afceaba..e69de29 100644 --- a/src/app/about/about.component.scss +++ b/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; -} \ No newline at end of file diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss index 0e3f1a9..e69de29 100644 --- a/src/app/contact/contact.component.scss +++ b/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; -} \ No newline at end of file diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 0fb695c..faec404 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,4 +1,4 @@ -
+
Ian Vink
@@ -13,27 +13,22 @@
- Resume - + -->
- - - -
{{menuItem.name}}
+ - \ No newline at end of file + +
+ +
+ \ No newline at end of file diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 7782275..d9ce5ef 100644 --- a/src/app/header/header.component.ts +++ b/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'; + } } } diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html index fc49951..f5eea06 100644 --- a/src/app/projects/projects.component.html +++ b/src/app/projects/projects.component.html @@ -1,13 +1,12 @@
-

Projects

+

Projects

- - + 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 "> + {{project.title}}
@@ -19,7 +18,6 @@ {{technology}}
-
diff --git a/src/app/projects/projects.component.scss b/src/app/projects/projects.component.scss index f8dcf5a..d338b40 100644 --- a/src/app/projects/projects.component.scss +++ b/src/app/projects/projects.component.scss @@ -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; + } \ No newline at end of file diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts index dc0441f..4edb5f9 100644 --- a/src/app/projects/projects.component.ts +++ b/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'], }); diff --git a/src/app/skills/skills.component.html b/src/app/skills/skills.component.html index 06772f9..0ab60a1 100644 --- a/src/app/skills/skills.component.html +++ b/src/app/skills/skills.component.html @@ -1,6 +1,6 @@
-

Skills

+

Skills

diff --git a/src/app/skills/skills.component.scss b/src/app/skills/skills.component.scss index 8d7059a..e69de29 100644 --- a/src/app/skills/skills.component.scss +++ b/src/app/skills/skills.component.scss @@ -1,9 +0,0 @@ -$distance: 11rem; - -h2:before { - left: -$distance; -} - -h2:after { - left: $distance; -} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index a0ed87b..4374c54 100644 --- a/src/styles.scss +++ b/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; diff --git a/tailwind.config.js b/tailwind.config.js index 908ba4b..13e13ca 100644 --- a/tailwind.config.js +++ b/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-visibility': 'visible', + ".backface-visible": { + "backface-visibility": "visible", }, - '.backface-hidden': { - 'backface-visibility': 'hidden', - } - }) + ".backface-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: [ - "./src/**/*.{html,ts}", - ], + content: ["./src/**/*.{html,ts}"], theme: { extend: {}, }, - plugins: [backfaceVisibility], -} - + plugins: [winged, backfaceVisibility], +};