[Fixed] Project styling for small devices

src/app/header/header.component.html

@@ -1,7 +1,7 @@
 <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>
+      <div class="text-2xl font-bold">Vink Development</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>

src/app/projects/projects.component.html

@@ -1,4 +1,39 @@
-<section id="projects" class="py-16 bg-gray-800 text-white">
+<section id="projects" class="py-16 bg-gray-800 text-white flex justify-center">
+  <div class="container mx-none px-2 md:px-4 lg:px-6">
+    <h2 class="text-4xl font-semibold text-center mb-12 fade-in-left winged-14">Projects</h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-6">
+      <div *ngFor="let project of projects"
+        class="backface-hidden rounded-sm 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 as well -->
+        <img src="{{project.image}}" alt="{{project.title}}" class="w-full max-h-56 aspect-[3/2] object-cover">
+        <div class="p-2 xs:p-3 xl:px-6">
+          <div class="flex flex-wrap mb-2 xs:mb-4 items-center">
+            <!-- justify-center -->
+            <h3 class="text-xl sm:text-2xl font-semibold text-teal-400 flex-grow">{{project.title}}</h3>
+            <!-- font-semibold -->
+            <p class="pl-2 ml-auto w-auto text-right text-sm xs:text-base text-gray-400">{{project.year}}</p>
+          </div>
+          <p class="text-gray-300 mb-4 whitespace-pre-line">{{project.description}}</p>
+          <div class="flex flex-wrap gap-1">
+            <span *ngFor="let technology of project.technologies"
+              class="bg-gray-800 text-white text-sm sm:text-md px-1 sm:px-2 py-1 rounded-md">{{technology}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+
+
+
+
+
+
+
+<!-- <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 fade-in-left winged-14">Projects</h2>
 
@@ -6,7 +41,6 @@
       <div *ngFor="let project of 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 ">
-        <!-- 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">
@@ -22,4 +56,4 @@
       </div>
     </div>
   </div>
-</section>
+</section> -->

src/app/projects/projects.component.ts

@@ -20,7 +20,7 @@ export class ProjectsComponent {
 
   constructor() {
     this.projects.push({
-      title: 'Continuously learning Supplier-identification module',
+      title: 'AI supplier identification',
       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.',
@@ -35,14 +35,14 @@ export class ProjectsComponent {
     });
     this.projects.push({
       title: 'Seabed modification tool',
-      year: '2019 - 2020',
+      year: '2019-2020',
       description:
         'A tool to edit the seabed mesh of a maritime simulator. The collisionmap is also updated, to allow ships to interact with this update terrain. \nThis tool allows instructors to rapidly create new terrain, for training shipcrews',
       image: 'Seabed Modification.png',
       technologies: ['Unigine (C#)', 'AGC Dynamics (C++)', 'Qt Creator'],
     });
     this.projects.push({
-      title: 'Goal-based vector field pathfinding algorithm',
+      title: 'Flow Field pathfinding algorithm',
       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.',
@@ -58,7 +58,7 @@ export class ProjectsComponent {
       technologies: ['C++', 'SFML2.0', 'Platformer', 'Visual Studio'],
     });
     this.projects.push({
-      title: 'Microcontroller Tetris (group project)',
+      title: 'Microcontroller Tetris',
       year: '2019',
       description:
         'Tetris written in C, visualized on dot-matrix displays, with the score visible on a 7-segment display and a menu system visible on the ATMega128.',
@@ -68,15 +68,16 @@ export class ProjectsComponent {
         'ATmega128',
         '7-segment display',
         'Dot-matrix displays',
+        'Group project'
       ],
     });
     this.projects.push({
-      title: 'Augmented Reality game (group project)',
+      title: 'Augmented Reality game',
       year: '2019',
       description:
         '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'],
+      technologies: ['C++', 'OpenCV', 'OpenGL', 'IrrKlang', 'Group project'],
     });
   }
 }

src/styles.scss

@@ -6,20 +6,6 @@ html {
   scroll-behavior: smooth;
 }
 
-/** Orange wings shown on each h2 element */
-.teste:before, .teste:after {
-  content: "";
-  width: 4rem;
-  height: 2px;
-  background: #ea5f00;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  transform: translateY(-50%);
-}
 
 @keyframes fadeInUp {
   0% {

tailwind.config.js

@@ -13,35 +13,6 @@ const backfaceVisibility = plugin(function ({ addUtilities }) {
   });
 });
 
-// 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 {
@@ -76,7 +47,11 @@ const winged = plugin(function({ addUtilities }) {
 module.exports = {
   content: ["./src/**/*.{html,ts}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: '375px'
+      }
+    },
   },
   plugins: [winged, backfaceVisibility],
 };