Add testimonials

michaelcarter · Nov 12, 2021 · 94232dd · 94232dd · vercel · Nov 12, 2021
1 parent c52e7db
commit 94232dd
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 122 deletions.
diff --git a/src/assets/images/testimonials/bradleypost.jpeg b/src/assets/images/testimonials/bradleypost.jpeg
diff --git a/src/assets/images/testimonials/charlesholdsworth.jpeg b/src/assets/images/testimonials/charlesholdsworth.jpeg
diff --git a/src/assets/styles/_button.scss b/src/assets/styles/_button.scss
@@ -8,12 +8,7 @@
   margin: 0 0 $spacing-2 0;
   text-align: center;
   text-decoration: none;
-  padding: 1.3rem $spacing-3;
-
-  &--small {
-    font-size: $font-size-base;
-    padding: 0.8rem $spacing-2;
-  }
+  padding: 0.8rem $spacing-2;
 
   &--primary {
     background: $pink-dark;

diff --git a/src/assets/styles/_company-logos.scss b/src/assets/styles/_company-logos.scss
@@ -3,9 +3,9 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin: $spacing-2 0 0 0;
+  margin: $spacing-2 0;
 
-  @media only screen and (max-width: $bp-sm) {
+  @media only screen and (max-width: $bp-md) {
     justify-content: center;
   }
 

diff --git a/src/assets/styles/_testimonials.scss b/src/assets/styles/_testimonials.scss
@@ -1,9 +1,17 @@
 .testimonials {
   display: flex;
-  margin: 0;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: $spacing-2 0 $spacing-4 0;
 
   &__item {
-    margin: 0 $spacing-3;
+    width: auto;
+    flex: 1 1 100%;
+
+    @media only screen and (min-width: $bp-sm) {
+      max-width: 45%;
+    }
+
     &:first-child {
       margin-left: 0;
     }
@@ -15,34 +23,61 @@
 }
 
 .testimonial {
-  position: relative;
+  display: flex;
+  margin-bottom: $spacing-3;
+  text-align: left;
+
+  @media only screen and (min-width: $bp-sm) {
+    display: block;
+    margin-bottom: 0;
+    text-align: center;
+  }
 
   &__image {
-    box-shadow: 0 0 1rem $purple-lighter;
+    border: 1px solid $purple-lighter;
+    box-shadow: 0 0 $spacing-3 lighten($grey-lighter, 10%);
     display: block;
     border-radius: 10rem;
-    max-width: 7rem;
-    margin: 0 auto;
+    max-height: 5rem;
+    max-width: 5rem;
+    margin: 0 $spacing-3 $spacing-3 0;
+
+    @media only screen and (min-width: $bp-sm) {
+      margin: 0 auto;
+      max-height: 6rem;
+      max-width: 6rem;
+    }
   }
 
   &__text {
-    margin: 0;
+  }
+
+  &__quote {
+    margin: $spacing-2 0;
+    font-size: $font-size-base;
+    font-style: italic;
+    line-height: $font-size-xl;
+
     &:before {
       color: lighten($purple-lighter, 4%);
       content: '“';
       font-family: $serif-font-family;
       font-weight: bold;
-      font-size: 8rem;
+      font-size: 6rem;
+      margin-left: -1rem;
+      margin-top: 1rem;
       position: absolute;
-      left: -0.5rem;
-      top: 8rem;
       z-index: -1;
     }
   }
 
   &__citation {
     font-weight: bold;
-    font-size: $font-size-xs;
-    text-decoration: none;
+    font-size: $font-size-sm;
+    line-height: $font-size-sm;
+
+    cite {
+      font-style: normal;
+    }
   }
 }
diff --git a/src/assets/styles/_two-thirds-section.scss b/src/assets/styles/_two-thirds-section.scss
@@ -73,6 +73,10 @@
       flex: 1 1 100%;
       max-width: 45rem;
 
+      &--right {
+        flex: 0 0 25rem;
+      }
+
       p:first-child {
         margin-top: 0;
       }

diff --git a/src/assets/styles/_typography.scss b/src/assets/styles/_typography.scss
@@ -2,6 +2,17 @@ body {
   color: $grey-dark;
 }
 
+h1,
+h2,
+h3,
+h4 {
+  &.hidden {
+    @media only screen and (min-width: $bp-sm) {
+      display: none;
+    }
+  }
+}
+
 h1 {
   @include rainbow-text;
 

diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
@@ -46,7 +46,7 @@ $border-radius-3: 1rem;
 $font-size-xl: 1.8rem;
 $font-size-lg: 1.5rem;
 $font-size-base: 1.2rem;
-$font-size-md: 1rem;
+$font-size-md: 1.1rem;
 $font-size-sm: 0.9rem;
 $font-size-xs: 0.8rem;
 

diff --git a/src/pages/index.pug b/src/pages/index.pug
@@ -20,10 +20,10 @@ block pageContent
 
   +header(
     "Digital products<br/> derisked",
-    "I’m Mike Carter, a web application development consultant who brings digital products to market with solid foundations, room to scale, and costs under control.",
+    "I’m Mike Carter, a <strong>web application development consultant</strong> who brings digital products to market with solid foundations, room to scale, and costs under control.",
     true
   )
-    +contactButton()
+    a.button.button--primary(href="/services") Services &amp; Contact
 
   main
     section.half-section
@@ -46,104 +46,79 @@ block pageContent
           p I’ve spent the past decade working to become adept at delivering software in these conditions. I’ll work closely with the relevant stakeholders in your business to make sure there’s a clear shared vision for your product that's aligned with your strategic objectives.
 
     section.full-section.wrapper-semi-wide
-      h2.capitalised Services
-      .full-section__content
-        .full-section__sub-section
-          h3 Product development
-          p.lead For a fixed price or daily rate, I’ll work on your digital product directly, helping you to achieve a clear return on investment.
-          p I’ll coordinate with stakeholders to establish clear requirements, and then deliver expertly crafted software that fully realises your vision for launch, but with solid foundations for further development and scaling. <a href="/services">Read more...</a>
+      h3.hidden Testimonials
+
+      +testimonials([
+        {
+          src: "/assets/images/testimonials/bradleypost.jpeg",
+          alt: "Bradley Post",
+          author: "Bradley Post, CEO of RIFT",
+          text: "Mike has been brilliant for RIFT; he has led numerous successful development projects, and his calm, measured and pragmatic delivery approach immediately instils confidence. He quickly understands the business issues we’re trying to solve and develops practical solutions to drive the business forwards."
+        },
+        {
+          src: "/assets/images/testimonials/charlesholdsworth.jpeg",
+          alt: "Charles Holdsworth",
+          author: "Charles Holdsworth, Director of Airspace Software",
+          text: "Mike has not only performed exceptionally well on two projects for me, but stepped in to help when an issue arose with a former developer.  Without assistance he methodically unravelled older systems in order to understand their structure and setup. His assistance has been invaluable."
+        }
+      ])
+
+      h4.hidden Trusted by
 
-        .full-section__sub-section
-          h3 Product consultancy
-          p.lead If you’re looking to build something new, or would like long-term technical help, I can help guide decision making.
-          p I'll work closely with you to help you deliver top quality digital products in less time, at less cost, and to a higher quality. I'll speak a language you understand, and keep your return on investment front of mind. <a href="/services">Read more...</a>
-
-      .full-section__footer
-        h4 Testimonials
-        +testimonials([
-          {
-            src: "/assets/images/testimonials/annadivers.jpeg",
-            alt: "Anna Divers",
-            author: "Anna Divers, Product Director at Holiday Extras (now Purple Bricks)",
-            text: "Mike's a super genius engineer and you should definitely hire him."
-          },
-          {
-            src: "/assets/images/testimonials/bradleypost.jpeg",
-            alt: "Bradley Post",
-            author: "Bradley Post, CEO at RIFT Group",
-            text: "Mike's a pretty good at what he does, you wouldn't regret hiring him."
-          },
-          {
-            src: "/assets/images/testimonials/chrisgibbons.jpg",
-            alt: "Chris Gibbons",
-            author: "Chris Gibbons, CEO and Founder at Laced",
-            text: "Mike's a pretty good at what he does, you wouldn't regret hiring him."
-          },
-          {
-            src: "/assets/images/testimonials/charlesholdsworth.jpeg",
-            alt: "Charles Holdsworth",
-            author: "Charles Holdsworth, CEO at Airspace Software",
-            text: "Mike's not that great, you might want to give him a miss."
-          }
-        ])
+      +companyLogos([
+        {
+          alt: "RIFT’s website",
+          url: "https://riftrefunds.co.uk",
+          fileName: "client-logos/myrift.svg",
+          ariaLabel: "RIFT",
+          width: 138,
+          height: 56,
+        },
+        {
+          alt: "Allocate’s website",
+          url: "https://allocate.co.uk",
+          fileName: "client-logos/allocate.svg",
+          ariaLabel: "Allocate",
+          width: 123,
+          height: 56
+        },
+        {
+          alt: "Laced’s website",
+          url: "https://laced.co.uk",
+          fileName: "client-logos/laced.svg",
+          ariaLabel: "Laced",
+          width: 160,
+          height: 32
+        },
+        {
+          alt: "Holiday Extras’ website",
+          url: "https://holidayextras.co.uk",
+          fileName: "client-logos/holiday-extras.svg",
+          ariaLabel: "Holiday Extras",
+          width: 160,
+          height: 27
+        },
+        {
+          alt: "HEHA’s website",
+          url: "https://heha.com",
+          fileName: "client-logos/heha.svg",
+          ariaLabel: "HEHA",
+          width: 84,
+          height: 48
+        },
+        {
+          alt: "Zendesk’s website",
+          url: "https://zendesk.co.uk",
+          fileName: "client-logos/zendesk.svg",
+          ariaLabel: "Zendesk",
+          width: 136,
+          height: 28
+        }
+      ])
 
     +twoThirdsSection("A safe pair of hands", "desk", false)
       p.lead It’s all too common for software development projects to go off the rails. Typically losing time, money and opportunity with with an inexperienced development partner.
-
       p I’ve built products for businesses of many different sizes and in many different sectors over the past decade. I know my onions, but I also know when there's value in defering to subject matter experts for a second opinion or additional development support.
-
-      +contactButton()
-
-      +companyLogos([
-          {
-            alt: "RIFT’s website",
-            url: "https://riftrefunds.co.uk",
-            fileName: "client-logos/myrift.svg",
-            ariaLabel: "RIFT",
-            width: 138,
-            height: 56,
-          },
-          {
-            alt: "Allocate’s website",
-            url: "https://allocate.co.uk",
-            fileName: "client-logos/allocate.svg",
-            ariaLabel: "Allocate",
-            width: 123,
-            height: 56
-          },
-          {
-            alt: "Laced’s website",
-            url: "https://laced.co.uk",
-            fileName: "client-logos/laced.svg",
-            ariaLabel: "Laced",
-            width: 160,
-            height: 32
-          },
-          {
-            alt: "Holiday Extras’ website",
-            url: "https://holidayextras.co.uk",
-            fileName: "client-logos/holiday-extras.svg",
-            ariaLabel: "Holiday Extras",
-            width: 160,
-            height: 27
-          },
-          {
-            alt: "HEHA’s website",
-            url: "https://heha.com",
-            fileName: "client-logos/heha.svg",
-            ariaLabel: "HEHA",
-            width: 84,
-            height: 48
-          },
-          {
-            alt: "Zendesk’s website",
-            url: "https://zendesk.co.uk",
-            fileName: "client-logos/zendesk.svg",
-            ariaLabel: "Zendesk",
-            width: 136,
-            height: 28
-          }
-        ])
-
+      a.button.button--primary(href="/services") Services &amp; Contact
 
   include includes/footer.pug
diff --git a/src/pages/mixins/testimonials.pug b/src/pages/mixins/testimonials.pug
@@ -4,8 +4,9 @@ mixin testimonials(testimonials)
       li.testimonials__item
         figure.testimonial
           img.testimonial__image(src=testimonial.src alt=testimonial.alt)
-          p.testimonial__text=testimonial.text
-          figcaption.testimonial__citation
-            cite=testimonial.author
+          .testimonial__text
+            p.testimonial__quote=testimonial.text
+            figcaption.testimonial__citation
+              cite=testimonial.author
 
 
diff --git a/src/pages/services.pug b/src/pages/services.pug
@@ -32,13 +32,13 @@ block pageContent
       p.lead For a fixed price or daily rate, I’ll work on your digital product directly, helping you to achieve a clear return on investment for your business.
       p I’ll coordinate with stakeholders to establish clear requirements, and then deliver expertly crafted software that fully realises your vision for launch, but with solid foundations for further development and scaling.
       p All of my work is carefully documented, and uses technologies with a proven track record and promising trajectory in order to ensure you're able to continue to find talented developers to grow your product long into the future.
-      a.button.button--primary.button--small(href="mailto:[email protected]") Email me
+      a.button.button--primary(href="mailto:[email protected]") Email me
 
     +twoThirdsSection("Product consultancy", "consulting", false)
       p.lead If you’re looking to build something new, or would like long-term technical help, I can help guide decision making.
       p I'll work closely with you to help you deliver top quality digital products in less time, at less cost, and to a higher quality. I'll speak a language you understand, and keep your return on investment front of mind.
       p By constantly re-assessing the needs and constraints in your business, I'll ensure your development team or agency continue smoothly towards their goal as new issues and blockers are uncovered, and keep you informed of progress along the way.
-      a.button.button--primary.button--small(href="mailto:[email protected]") Email me
+      a.button.button--primary(href="mailto:[email protected]") Email me
 
 
     section.full-section.wrapper-semi-wide