diff --git a/src/assets/images/testimonials/bradleypost.jpeg b/src/assets/images/testimonials/bradleypost.jpeg index 1f6cf35..019cc9e 100644 Binary files a/src/assets/images/testimonials/bradleypost.jpeg and b/src/assets/images/testimonials/bradleypost.jpeg differ diff --git a/src/assets/images/testimonials/charlesholdsworth.jpeg b/src/assets/images/testimonials/charlesholdsworth.jpeg index 758963e..81aaf3a 100644 Binary files a/src/assets/images/testimonials/charlesholdsworth.jpeg and b/src/assets/images/testimonials/charlesholdsworth.jpeg differ diff --git a/src/assets/styles/_button.scss b/src/assets/styles/_button.scss index b517270..1306b36 100644 --- 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 index dbab452..6a84360 100644 --- 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 index b0c92c9..4114055 100644 --- 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 index affa13d..3632eda 100644 --- 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 index 1ad86e2..ed95e66 100644 --- 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 index 600ad40..553ab36 100644 --- 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 index f246d27..93241ca 100755 --- a/src/pages/index.pug +++ b/src/pages/index.pug @@ -20,10 +20,10 @@ block pageContent +header( "Digital products
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 web application development consultant 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 & 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. Read more... + 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. Read more... - - .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 & Contact include includes/footer.pug diff --git a/src/pages/mixins/testimonials.pug b/src/pages/mixins/testimonials.pug index 3c8113a..c7bc2f1 100644 --- 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 index defefa1..0bcc1aa 100755 --- 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:mike@mcarter.me") Email me + a.button.button--primary(href="mailto:mike@mcarter.me") 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:mike@mcarter.me") Email me + a.button.button--primary(href="mailto:mike@mcarter.me") Email me section.full-section.wrapper-semi-wide