Merge pull request #216 from w3bdesign/dev

Prettier

README.md

@@ -31,13 +31,13 @@ Third version of my portfolio website with Next.js with Typescript instead of Ga
 -   Display CV with React-PDF
 -   Responsive design
 
-### Animations:
+### Animations
 
 -   Animations with GSAP 3 and ScrollPlugin for the majority of animations
 -   CSS hover animations in navigation menu
 -   GSAP and ScrollPlugin for revealing content on portfolio (projects)
 
-### Accessibility and design:
+### Accessibility and design
 
 -   WCAG accessibility tested
 -   Fully responsive design tested on all devices
@@ -46,7 +46,7 @@ Third version of my portfolio website with Next.js with Typescript instead of Ga
 -   Tailwind CSS for styling
 -   Google fonts with Lato (optimized for Next.js)
 
-### Code quality:
+### Code quality
 
 -   Continuous Integration with CircleCI
 -   Code quality analysis with Codacy, Sonarcloud, Codefactor, LGTM and Codeclimate 

package.json

@@ -37,7 +37,7 @@
     "@storybook/manager-webpack5": "^6.4.18",
     "@storybook/react": "^6.4.18",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",   
+    "@testing-library/react": "^12.1.2",
     "@types/classnames": "^2.3.1",
     "@types/node": "^17.0.15",
     "@types/react": "17.0.39",

src/components/Index/Hero.component.tsx

@@ -22,7 +22,8 @@ const Hero = (): JSX.Element => {
       aria-label="Kontainer for animasjoner av introtekst"
       id="main-hero"
       data-testid="main-hero"
-      className="flex flex-col justify-center text-lg invisible">
+      className="flex flex-col justify-center text-lg invisible"
+    >
       <div className="p-2 mt-10 mb-4 bg-white opacity-75 lg:mt-4 md:mt-4 xl:mt-4">
         <div className="text-black rounded">
           <section role="intro" aria-label="Introduksjonstekst">

src/components/Index/IndexContent.component.tsx

@@ -37,7 +37,8 @@ const IndexContent = ({ post }: TData): JSX.Element => (
             key={content._id}
             role="contentinfo"
             aria-label={content.title}
-            data-testid="sanity-section">
+            data-testid="sanity-section"
+          >
             <div className="mt-4 p-8 text-lg text-black bg-white rounded shadow min-h-full">
               <h2 className="text-3xl text-center">{content.title}</h2>
               <PortableText

src/components/Prosjekter/ProsjektIndividualProjects.component.tsx

@@ -39,10 +39,8 @@ const ProsjektIndividualProjects = ({ projects }: IProject): JSX.Element => {
   useIsomorphicLayoutEffect(() => {
     gsap.registerPlugin(ScrollTrigger);
     const boxes = gsap.utils.toArray("#projectdiv");
-
     boxes.forEach((box: any, _i: number) => {
       const anim = gsap.from(box, { duration: 0.5, autoAlpha: 0, y: 50, paused: true });
-
       ScrollTrigger.create({
         trigger: box,
         end: "bottom bottom",
@@ -64,7 +62,8 @@ const ProsjektIndividualProjects = ({ projects }: IProject): JSX.Element => {
           <div
             id="projectdiv"
             key={id}
-            className="p-6 text-lg text-black  bg-white rounded shadow invisible">
+            className="p-6 text-lg text-black  bg-white rounded shadow invisible"
+          >
             <h2 className="text-xl font-black text-center">{name}</h2>
             <div className="mt-6 text-lg text-left lg:text-left md:text-left">
               <p>{description}</p>

src/components/Prosjekter/ProsjekterListings.component.tsx

@@ -48,14 +48,16 @@ const ProsjekterListings = ({ projects, categories }: IProjectCategory): JSX.Ele
               <label
                 className="p-2 mr-4 text-lg"
                 aria-label="kategorifilter"
-                htmlFor="kategorifilter">
+                htmlFor="kategorifilter"
+              >
                 Filtrer kategori:
               </label>
               <select
                 id="kategorifilter"
                 name="kategorifilter"
                 onChange={handleFilterChange}
-                className="w-40 p-2 leading-tight text-black border rounded shadow appearance-none focus:outline-none focus:shadow-outline">
+                className="w-40 p-2 leading-tight text-black border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
+              >
                 <option label="" value="">
                   Ingen filtrering
                 </option>
@@ -69,7 +71,8 @@ const ProsjekterListings = ({ projects, categories }: IProjectCategory): JSX.Ele
           </span>
           <div
             id="prosjektgrid"
-            className="grid gap-4 pt-4 pb-4 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-2 sm:grid-cols-1 md:grid-cols-1 xs:grid-cols-1">
+            className="grid gap-4 pt-4 pb-4 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-2 sm:grid-cols-1 md:grid-cols-1 xs:grid-cols-1"
+          >
             {prosjekt && <ProsjektIndividualProjects projects={prosjekt} />}
           </div>
         </div>

src/styles/custom.css

@@ -1,51 +1,51 @@
 /* Global font */
 body {
-    font-family: Lato, sans-serif;
-    background-color: #f2f2f2;
-  }
-  
-  /* Custom styling for main hero image */
-  #main-hero {
-    background-image: url("../assets/images/blue-hero.jpg");
-    height: 450px;
-  }
-  
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-  
-  * {
-    box-sizing: border-box;
-  }
-  
-  /* Hero animations */
-  
-  .text-reveal {
-    transition: all 1.5s;
-    transform: translateY(-3em);
-    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  }
-  
-  .icon-reveal {
-    transition: all 1.5s;
-    transform: translateX(4em);
-    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  }
-  
-  /* Navbar animations */
-  
-  .navbar-link::after {
-    content: "";
-    display: block;
-    bottom: -0.45rem;
-    height: 0.2575rem;
-    width: 0;
-    margin: 0 auto;
-    background: #fff;
-    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
-  }
-  
-  .navbar-link:hover::after {
-    width: 100%;
-  }
+  font-family: Lato, sans-serif;
+  background-color: #f2f2f2;
+}
+
+/* Custom styling for main hero image */
+#main-hero {
+  background-image: url("../assets/images/blue-hero.jpg");
+  height: 450px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Hero animations */
+
+.text-reveal {
+  transition: all 1.5s;
+  transform: translateY(-3em);
+  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+}
+
+.icon-reveal {
+  transition: all 1.5s;
+  transform: translateX(4em);
+  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+}
+
+/* Navbar animations */
+
+.navbar-link::after {
+  content: "";
+  display: block;
+  bottom: -0.45rem;
+  height: 0.2575rem;
+  width: 0;
+  margin: 0 auto;
+  background: #fff;
+  transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.navbar-link:hover::after {
+  width: 100%;
+}