Skip to content

Commit f1609fa

Browse files
author
Carms Ng
authored
Merge pull request #27 from coderbunker/imp-scroll
Address Issues on scroll, xs screen styling, content overflow, and translation
2 parents 8f053e9 + fdc2e7a commit f1609fa

File tree

15 files changed

+121
-98
lines changed

15 files changed

+121
-98
lines changed

‎gatsby-config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module.exports = {
33
siteMetadata: {
44
title: `Coderbunker Canada`,
55
author: `Carms Ng`,
6-
description: `Coderbunker Canada Website`,
6+
description: `Coderbunker Canada Website`,
77
},
88
plugins: [
99
`gatsby-plugin-postcss`,

‎locales/fr/index.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"Customize": "Personnalisez",
99
" Your Dev Team": " votre équipe de développement",
1010
"Consult": "Consultez",
11-
" Your Tech Lead": " votre responsable tech",
11+
" Your Tech Lead": " votre responsable technique",
1212
"Let's Get To ": "Mettons-nous au ",
1313
"Work": "travail",
1414
"Join": "Rejoignez",
@@ -33,8 +33,7 @@
3333
"Built with Gatsby": "Développé avec Gatsby",
3434
"Retainer Based Projects": "Des conventions d'honoraires pour vos projets",
3535
"CTO On-demand": "Direction technique à la demande",
36-
"Consolidate your HR & IT budget": "Consolidez vos budgets de RH et de TI",
37-
" towards direct actions to solve your problems.": " pour mieux résoudre vos problèmes.",
36+
"Consolidate your HR & IT budget towards direct actions to solve your problems.": "Consolidez vos budgets de RH et de TI pour mieux résoudre vos problèmes.",
3837
"Help you make informed decisions in choosing the right technology.": "Vous aider à prendre des décisions éclairées en choisissant la bonne technologie.",
3938
"At your pace": "A votre rythme",
4039
"Your budget is fully refundable": "Votre budget est entièrement remboursable",

‎src/components/carousel-card.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ export default function CarouselCard({pic, index, count, activeIndex, setActiveI
5454
</ul>
5555
</div>
5656
</div>
57-
<ul className="py-4 block md:hidden" style={{height: `312px`}}>
58-
{person.highlights.map((hl, i) => {
57+
<ul className="py-4 block md:hidden">
58+
{person.highlights.slice(0, 3).map((hl, i) => {
5959
return (
6060
<li key={hl + i}>
6161
<Trans>{hl}</Trans>
@@ -92,7 +92,7 @@ const CarouselCardStyles = styled.div`
9292
ul {
9393
list-style-type: "→";
9494
padding-left: 2rem;
95-
padding-bottom: 8rem;
95+
padding-bottom: 6rem;
9696
li {
9797
padding-left: 0.5rem;
9898
}
@@ -115,7 +115,7 @@ const CarouselCardStyles = styled.div`
115115
color: var(--white);
116116
}
117117
}
118-
118+
119119
button:disabled {
120120
background-color: var(--lightred)
121121
}

‎src/components/contact.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import ContactForm from "./contact-form";
1313
export default function Contact() {
1414
return (
1515
<ContactStyles>
16-
<SiteBorderStyles>
16+
<SiteBorderStyles className="wrapper">
1717
{/* section-header */}
18-
<div className="text-left md:text-center py-4 md:py-12">
19-
<h2 className="text-3xl lg:text-4xl">
18+
<div className="text-left md:text-center py-4 md:pt-12">
19+
<h2 className="text-2xl lg:text-4xl">
2020
<span className="highlight-red" style={{ whiteSpace: `nowrap` }}>
2121
<Trans>Connect</Trans>
2222
</span>
@@ -49,7 +49,7 @@ export default function Contact() {
4949
</SiteBorderStyles>
5050
<Footer />
5151
<div
52-
className="absolute"
52+
className="absolute"
5353
style={{zIndex: `-1`, width: `50vw`, left: `0`, bottom: `5vh`}}>
5454
<StaticImage
5555
placeholder="blurred"
@@ -70,4 +70,4 @@ const ContactStyles = styled.section`
7070
p, svg {
7171
color: var(--darkgrey);
7272
}
73-
`;
73+
`;

‎src/components/header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const HeaderStyles = styled.header`
6464
padding: 1rem 0;
6565
position: fixed;
6666
width: 100%;
67-
background: rgba(255, 255, 255, 0.5);
67+
background: rgb(255, 255, 255);
6868
z-index: 999;
6969
.header-content {
7070
display: grid;

‎src/components/hero.js

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,31 @@ export default function Hero() {
1111
return (
1212
<HeroStyles>
1313
<SiteBorderStyles>
14-
<div className="hero flex flex-col md:flex-row items-center">
14+
<div className="hero">
1515
{/* Hero Content */}
16-
<div className="flex-1 flex flex-col justify-center items-start">
17-
<h1 className="text-3xl md:text-4xl leading-relaxed md:leading-12 mb-3">
16+
<div>
17+
<h1 className="text-2xl md:text-4xl">
1818
<span>
1919
<Trans>Introducing Coderbunker in the </Trans>
2020
</span>
2121
<span className="inline highlight-red uppercase">
2222
<Trans>North</Trans>
2323
</span>
2424
</h1>
25-
<p className="text-2xl">
25+
<p className="text-1xl md:text-2xl mt-2">
2626
<Trans>We empower freelancer community to excel in long term projects.</Trans>
2727
</p>
2828
<StackedAvatar />
2929

30-
{/* stats */}
31-
{/* <div className="stats p-2 md:p-4 mb-10 flex">
32-
<div className="px-12">
33-
<small className="uppercase">
34-
<Trans># coders</Trans>
35-
</small>
36-
<h3 className="text-2xl">50+</h3>
37-
</div>
38-
<div className="px-12">
39-
<small className="uppercase">
40-
<Trans># bunkers</Trans>
41-
</small>
42-
<h3 className="text-2xl">3</h3>
43-
</div>
44-
</div> */}
4530
</div>
4631

4732
{/* Hero Image*/}
48-
<div className="flex-1 hidden md:block p-16">
49-
<StaticImage placeholder="blurred" src="../assets/images/coders.png" alt="Coderbunker Coders"/>
33+
<div className="hidden md:block p-16">
34+
<StaticImage
35+
placeholder="blurred"
36+
src="../assets/images/coders.png"
37+
alt="Coderbunker Coders"
38+
/>
5039
</div>
5140
</div>
5241

@@ -62,10 +51,13 @@ const HeroStyles = styled.section`
6251
position: relative;
6352
.hero {
6453
height: calc(80vh - 100px);
54+
display: grid;
55+
align-items: center;
6556
p {
6657
color: var(--darkgrey);
6758
}
6859
}
60+
6961
.quarter-circle-bottom-left{
7062
position: absolute;
7163
bottom: 0;
@@ -79,16 +71,9 @@ const HeroStyles = styled.section`
7971
-webkit-border-radius: 0 70vw 0 0;
8072
z-index: -1;
8173
}
82-
.stats {
83-
background: var(--white);
84-
border-radius: 10px;
85-
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
86-
text-align: center;
87-
div:first-child {
88-
border-right: 1px solid var(--lightgrey);
89-
}
90-
small {
91-
color: var(--darkgrey);
74+
@media (min-width: 768px) {
75+
.hero {
76+
grid-template-columns: 1fr 1fr;
9277
}
9378
}
9479
`;

‎src/components/join.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import BackgroundImage from "./bg-image";
99
export default function Join() {
1010
return (
1111
<JoinStyles>
12-
<SiteBorderStyles className="flex flex-col">
12+
<SiteBorderStyles className="wrapper">
1313
{/* section-header */}
14-
<div className="text-left md:text-center py-4 md:pt-16 md:pb-8 lg:pt-24 md:pb-8">
15-
<h2 className="text-3xl lg:text-4xl">
14+
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
15+
<h2 className="text-2xl lg:text-4xl">
1616
<span className="highlight-red">
1717
<Trans>Join</Trans>
1818
</span>
@@ -21,11 +21,11 @@ export default function Join() {
2121
<p className="hidden md:block text-xl lg:text-2xl md:my-4">
2222
<Trans>We are 50+ International Digital Talents and growing!</Trans>
2323
</p>
24-
</div>
24+
</div>
2525
{/* hashtags */}
26-
<div className="hash-tags" style={{maxWidth: `800px`, margin: `0 auto`}}>
27-
<p className="text-lg lg:text-xl md:my-4 md:pb-8 text-center">#SoftwareDevelopment #EmbeddedSystems #Blockchain #DigitalIdentity #PublicKeyInfrastructure #SystemAdministration #Cybersecurity #Encryption #Linux #FPGA #ARM #RISC-V #Ethereum #PGP #PostgreSQL #AWS #Azure #GoogleCloud #etc</p>
28-
<div style={{maxWidth: `70vw`, width: `500px`, margin: `0 auto`, padding: `2rem`}}>
26+
<div className="hash-tags" style={{ maxWidth: `800px`, margin: `0 auto` }}>
27+
<p className="lg:text-xl md:my-4 md:pb-8 text-center">#SoftwareDevelopment #EmbeddedSystems #Blockchain #DigitalIdentity #PublicKeyInfrastructure #SystemAdministration #Cybersecurity #Encryption #Linux #FPGA #ARM #RISC-V #Ethereum #PGP #PostgreSQL #AWS #Azure #GoogleCloud #etc</p>
28+
<div style={{ maxWidth: `70vw`, width: `500px`, margin: `0 auto`, padding: `2rem` }}>
2929
<StaticImage
3030
placeholder="blurred"
3131
src="../assets/images/coders.png"
@@ -35,9 +35,9 @@ export default function Join() {
3535
</div>
3636
</SiteBorderStyles>
3737
<div className="bg-img-wrapper flex">
38-
<BackgroundImage style={{width: `45vw`}} imgStyle={{height: `auto`}}/>
39-
<BackgroundImage style={{width: `30vw`, transform: `translate(-1vw, 10vw)`}} imgStyle={{height: `auto`}}/>
40-
<BackgroundImage style={{width: `10vw`, transform: `translate(5vw, 10vw)`}} imgStyle={{height: `auto`}}/>
38+
<BackgroundImage style={{ width: `45vw` }} imgStyle={{ height: `auto` }} />
39+
<BackgroundImage style={{ width: `30vw`, transform: `translate(-1vw, 10vw)` }} imgStyle={{ height: `auto` }} />
40+
<BackgroundImage style={{ width: `10vw`, transform: `translate(5vw, 10vw)` }} imgStyle={{ height: `auto` }} />
4141
</div>
4242
</JoinStyles>
4343
);
@@ -58,7 +58,7 @@ const JoinStyles = styled.section`
5858
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
5959
background: rgba(255, 255, 255, 0.5);
6060
}
61-
61+
6262
.icon-wrapper {
6363
background-color: var(--lightgrey);
6464
padding: 0.75rem;

‎src/components/logo-garden.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ const LogoGardenStyles = styled.div`
5858
scroll-snap-type: x mandatory;
5959
display: grid;
6060
grid-template-columns: repeat(4, 1fr);
61-
height: 15vh;
61+
margin-top: 5px;
62+
height: 13vh;
6263
place-items: center center;
6364
-webkit-overflow-scrolling: touch;
6465
overflow-x: scroll;

‎src/components/seo.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ Seo.defaultProps = {
7777
lang: `en`,
7878
meta: [],
7979
description: ``,
80+
author: ``,
8081
}
8182

8283
Seo.propTypes = {

‎src/components/service.js

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import BackgroundImage from "./bg-image";
88
export default function Service() {
99
return (
1010
<ServiceStyles>
11-
<SiteBorderStyles className="flex flex-col">
11+
<SiteBorderStyles className="wrapper">
1212
{/* section-header */}
13-
<div className="text-left md:text-center py-4 md:py-16 lg:py-24">
14-
<h2 className="text-3xl lg:text-4xl">
13+
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
14+
<h2 className="text-2xl lg:text-4xl">
1515
<span className="highlight-red">
1616
<Trans>Customize</Trans>
1717
</span>
@@ -35,14 +35,11 @@ export default function Service() {
3535
</div>
3636
<p className="my-3 lg:text-xl">
3737
<span className="inline">
38-
<Trans>Consolidate your HR & IT budget</Trans>
39-
</span>
40-
<span className="hidden md:inline">
41-
<Trans> towards direct actions to solve your problems.</Trans>
38+
<Trans>Consolidate your HR & IT budget towards direct actions to solve your problems.</Trans>
4239
</span>
4340
</p>
44-
<ul className="lg:my-3 lg:text-xl">
45-
<li className="hidden md:list-item">
41+
<ul className="hidden md:block lg:my-3 lg:text-xl">
42+
<li>
4643
<Trans>At your pace</Trans>
4744
</li>
4845
<li>
@@ -66,7 +63,7 @@ export default function Service() {
6663
<p className="my-3 lg:text-xl">
6764
<Trans>Help you make informed decisions in choosing the right technology.</Trans>
6865
</p>
69-
<ul className="lg:my-3 lg:text-xl">
66+
<ul className="hidden md:block lg:my-3 lg:text-xl">
7067
<li>
7168
<Trans>Pay by the hour</Trans>
7269
</li>

‎src/components/steps.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { FaSignature, FaRocket, FaCubes } from "react-icons/fa";
77
export default function Steps() {
88
return (
99
<StepsStyles>
10-
<SiteBorderStyles className="flex flex-col">
10+
<SiteBorderStyles className="wrapper">
1111
{/* section-header */}
12-
<div className="text-left md:text-center py-4 md:py-16 lg:py-24">
13-
<h2 className="text-3xl lg:text-4xl">
12+
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
13+
<h2 className="text-2xl lg:text-4xl">
1414
<Trans>Let's Get To </Trans>
1515
<span className="highlight-red">
1616
<Trans>Work</Trans>
@@ -21,14 +21,14 @@ export default function Steps() {
2121
</p>
2222
</div>
2323
{/* cards */}
24-
<div className="cards flex flex-col md:flex-row pt-4">
24+
<div className="cards flex flex-col md:flex-row">
2525
{/* card */}
2626
<div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 md:my-2 p-2 md:p-8" data-aos="fade-up">
2727
<div className="icon-wrapper text-xl lg:text-2xl mr-4 sm:m-4">
2828
<FaSignature />
2929
</div>
3030
<div>
31-
<h3 className="text-xl lg:text-2xl pb-2">
31+
<h3 className="lg:text-2xl sm:pb-2">
3232
<Trans>Retain Us</Trans>
3333
</h3>
3434
<p className="lg:text-xl">
@@ -42,7 +42,7 @@ export default function Steps() {
4242
<FaRocket />
4343
</div>
4444
<div>
45-
<h3 className="text-xl lg:text-2xl pb-2">
45+
<h3 className="lg:text-2xl sm:pb-2">
4646
<Trans>Start Building</Trans>
4747
</h3>
4848
<p className="lg:text-xl">
@@ -56,7 +56,7 @@ export default function Steps() {
5656
<FaCubes />
5757
</div>
5858
<div>
59-
<h3 className="text-xl lg:text-2xl pb-2">
59+
<h3 className="lg:text-2xl sm:pb-2">
6060
<Trans>Iteratively develop</Trans>
6161
</h3>
6262
<p className="lg:text-xl">
@@ -98,7 +98,7 @@ const StepsStyles = styled.section`
9898
}
9999
.icon-wrapper {
100100
background-color: var(--red);
101-
padding: 1rem 1.5rem;
101+
padding: 0.75rem 1rem;
102102
transform: skew(-16deg);
103103
width: min-content;
104104
height: min-content;
@@ -116,14 +116,14 @@ const StepsStyles = styled.section`
116116
}
117117
.cards {
118118
.card:first-child {
119-
transform: translateX(10px);
120-
}
121-
.card:nth-child(2) {
122-
transform: translateY(40px);
119+
transform: translate(10px, -40px);
123120
}
124121
.card:last-child {
125-
transform: translate(-10px, 80px)
122+
transform: translate(-10px, 40px)
126123
}
127124
}
125+
.icon-wrapper {
126+
padding: 1rem 1.5rem;
127+
}
128128
}
129129
`;

‎src/components/team.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import Carousel from "./carousel";
99
export default function Team() {
1010
return (
1111
<TeamStyles>
12-
<SiteBorderStyles className="flex flex-col">
12+
<SiteBorderStyles className="wrapper">
1313
{/* section-header */}
14-
<div className="text-left md:text-center py-4 md:py-16 lg:py-24">
15-
<h2 className="text-3xl lg:text-4xl">
14+
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
15+
<h2 className="text-2xl lg:text-4xl">
1616
<span className="highlight-red">
1717
<Trans>Consult</Trans>
1818
</span>

0 commit comments

Comments
 (0)