Merge pull request #143 from w3bdesign/development

Fix prosjekt images

Author: w3bdesign

README.md

@@ -29,6 +29,8 @@ Fourth version of my personal portfolio website with Next.js, Framer Motion, San
 
 ### General
 
+- Clean, modern, responsive and Matrix-inspired design
+- Matrix canvas rain effect on front page
 - Next.js 14 with Typescript and App router
 - Sanity.io for fetching project information and frontpage text
 - Ladle for component documentation
@@ -46,14 +48,12 @@ Fourth version of my personal portfolio website with Next.js, Framer Motion, San
 - Fully responsive design tested on all devices
 - React Icons for project icons
 - Tailwind CSS for styling
-- Google fonts with Lato (optimized with @next/font for Next.js)
 - Animated reusable input fields
 
 ### Accessibility
 
 - WCAG accessibility tested
 - Accessibility testing with Cypress Axe
-- Accessibility testing with Axe in Storybook for each component
 
 ### Devops / Code quality
 
@@ -64,8 +64,4 @@ Fourth version of my personal portfolio website with Next.js, Framer Motion, San
 - E2E testing with Playwright integrated with Github actions
 - Unit testing with Jest and React Testing Library integrated with CircleCI
 - Test coverage setup with Codecov
-- 97% test coverage with Jest and React testing library
-
-## TODO
-
-- React Hook Form
+- 97% test coverage with Jest and React testing library

src/components/Prosjekter/ProsjektCard.component.tsx

@@ -26,12 +26,11 @@ const ProsjektCard: React.FC<ProjectProps> = ({
     <div className="bg-slate-700 shadow-md rounded-lg overflow-hidden mx-4 md:m-0">
       <BounceInScroll viewAmount={0.3}>
         <div className="relative w-full h-48 md:h-60">
-          <div className="w-full h-full p-5 md:pb-[50px] relative overflow-hidden flex justify-center md:w-[750px] md:h-[350px]">
+          <div className="w-full h-full p-5 md:pb-[20px] relative overflow-hidden flex justify-center md:h-[340px]">
             {projectimage && (
               <Image
-                className="flex justify-center text-center"
                 width="600"
-                height="350"
+                height="340"
                 quality={100}
                 src={urlFor(projectimage).url() as string}
                 alt={name}
@@ -41,14 +40,13 @@ const ProsjektCard: React.FC<ProjectProps> = ({
             )}
           </div>
         </div>
-        <div className="md:mt-12 p-2 flex flex-col justify-between min-h-[250px] xl:min-h-[275px]">
-          <div>
-            <h1 className="xl:mt-4 text-xl text-center font-bold py-2 text-slate-200">
-              {name}
-            </h1>
-            <h2 className="text-md">{description}</h2>
-            <p className="mt-4 text-sm mt-2">{subdescription}</p>
-          </div>
+        <div className="md:mt-16 p-2 flex flex-col justify-between min-h-[250px] xl:min-h-[275px]">
+          <h1 className="xl:mt-4 text-xl text-center font-bold py-2 text-slate-200">
+            {name}
+          </h1>
+          <h2 className="text-md">{description}</h2>
+          <p className="mt-4 text-sm mt-2">{subdescription}</p>
+
           <div className="flex justify-center mt-4">
             {urlwww && urlwww.length > 0 && (
               <Button href={urlwww[0].url} renderAs="a">