Skip to content

Commit 1a4e77b

Browse files
ajeetchaulagainajeetchaulagain
authored
Merge pull request #217 from ajeetchaulagain/rebranding-website
Rebranding website and Styling improvements
2 parents 2814bc2 + b10a783 commit 1a4e77b

66 files changed

Lines changed: 412 additions & 205 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎playwright.config.ts‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,40 +38,39 @@ export default defineConfig({
3838
},
3939

4040
// Single template for all assertions
41-
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
41+
snapshotPathTemplate:
42+
'{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
4243

4344
expect: {
4445
toHaveScreenshot: {
4546
maxDiffPixelRatio: 0.02, // Allow 2% pixels diff ratio
4647
},
4748
},
4849

49-
/* Configure projects for major browsers */
50+
/* Viewport-based projects aligned to the project's breakpoints:
51+
* xs:0, xsm:370, sm:480, md:640, lg:800, xl:992, xxl:1120, xxxl:1200 */
5052
projects: [
5153
{
52-
name: 'firefox',
53-
use: { ...devices['Desktop Firefox'] },
54+
name: 'mobile',
55+
use: {
56+
...devices['Desktop Firefox'],
57+
viewport: { width: 375, height: 812 }, // xs / xsm range
58+
},
59+
},
60+
{
61+
name: 'tablet',
62+
use: {
63+
...devices['Desktop Firefox'],
64+
viewport: { width: 768, height: 1024 }, // md / lg range
65+
},
66+
},
67+
{
68+
name: 'desktop',
69+
use: {
70+
...devices['Desktop Firefox'],
71+
viewport: { width: 1280, height: 800 }, // xl / xxl / xxxl range
72+
},
5473
},
55-
56-
/* Test against mobile viewports. */
57-
// {
58-
// name: 'Mobile Chrome',
59-
// use: { ...devices['Pixel 5'] },
60-
// },
61-
// {
62-
// name: 'Mobile Safari',
63-
// use: { ...devices['iPhone 12'] },
64-
// },
65-
66-
/* Test against branded browsers. */
67-
// {
68-
// name: 'Microsoft Edge',
69-
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
70-
// },
71-
// {
72-
// name: 'Google Chrome',
73-
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
74-
// },
7574
],
7675

7776
/* Run your local dev server before starting the tests */

‎src/components/form/styles.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ import { mb, px, py, ml } from 'styled-components-spacing';
33
import breakpoint from 'styled-components-breakpoint';
44

55
export const Input = styled.input`
6-
border: 2px solid
7-
${({ theme }) =>
8-
theme.name === 'lightTheme'
9-
? theme.colors.primaryBorder
10-
: theme.colors.oldSilver50};
6+
border: 2px solid ${({ theme }) => theme.colors.primaryBorder};
117
${mb(5)};
128
${px(4)}
139
${py(4)}
@@ -45,11 +41,7 @@ export const TextArea = styled.textarea`
4541
font-size: ${({ theme }) => theme.fontSizes.xmedium};
4642
font-family: ${({ theme }) => theme.fonts.body};
4743
color: ${({ theme }) => theme.colors.primaryText};
48-
border: 2px solid
49-
${({ theme }) =>
50-
theme.name === 'lightTheme'
51-
? theme.colors.primaryBorder
52-
: theme.colors.oldSilver50};
44+
border: 2px solid ${({ theme }) => theme.colors.primaryBorder};
5345
background-color: ${({ theme }) =>
5446
theme.name === 'lightTheme'
5547
? theme.colors.primaryBackground

‎src/components/get-in-touch-section/GetInTouchSection.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { Paragraph } from '../paragraph/Paragraph';
3+
import { socialMediaLinks } from '../social-media-icons/socialMediaLinks';
4+
import { Container, SocialLinksList, SocialLinkItem } from './styles';
5+
import { Heading } from 'components/heading/Heading';
6+
import { ButtonLink } from 'components/button-link';
7+
8+
export const GetInTouchSection = () => {
9+
return (
10+
<Container>
11+
<Heading level="h2" size="xlarge" type="serif">
12+
Get in touch
13+
</Heading>
14+
<Paragraph>
15+
Follow along for updates, what I’m building, and new posts, or just say
16+
hello — I’m always open to a good conversation about software.
17+
</Paragraph>
18+
19+
<SocialLinksList>
20+
{socialMediaLinks.map(({ url, ariaLabel, IconComponent }) => (
21+
<li key={url as string}>
22+
<SocialLinkItem to={url as string}>
23+
<IconComponent />
24+
{ariaLabel as string}
25+
</SocialLinkItem>
26+
</li>
27+
))}
28+
</SocialLinksList>
29+
30+
<Paragraph>Want new articles straight to your inbox?</Paragraph>
31+
<ButtonLink
32+
to="/newsletter"
33+
text="Subscribe to my newsletter →"
34+
variant="text"
35+
color="primary"
36+
size="large"
37+
/>
38+
</Container>
39+
);
40+
};

‎src/components/get-in-touch-section/styles.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import styled from 'styled-components';
2+
import { mb, mt, pl } from 'styled-components-spacing';
3+
import breakpoint from 'styled-components-breakpoint';
4+
import { Link } from '../link/Link';
5+
6+
export const Container = styled.div``;
7+
8+
export const SocialLinksList = styled.ul`
9+
display: flex;
10+
flex-direction: row;
11+
flex-wrap: wrap;
12+
gap: 0.75rem;
13+
${mt(1)};
14+
${mb(6)};
15+
16+
${breakpoint('xs', 'md')`
17+
flex-direction: column;
18+
`}
19+
`;
20+
21+
export const SocialLinkItem = styled(Link)`
22+
display: inline-flex;
23+
align-items: center;
24+
gap: 0.75rem;
25+
padding: 0.6rem 1rem;
26+
border: 1px solid ${({ theme }) => theme.colors.cardBorder};
27+
border-radius: ${({ theme }) => theme.borderRadius.base};
28+
font-family: ${({ theme }) => theme.fonts.body};
29+
font-size: ${({ theme }) => theme.fontSizes.small};
30+
color: ${({ theme }) => theme.colors.primaryText};
31+
width: fit-content;
32+
transition: border-color 0.15s ease, color 0.15s ease;
33+
34+
svg {
35+
font-size: 1rem;
36+
flex-shrink: 0;
37+
color: ${({ theme }) => theme.colors.brandPrimary};
38+
}
39+
40+
&:hover {
41+
border-color: ${({ theme }) => theme.colors.brandPrimary};
42+
color: ${({ theme }) => theme.colors.brandPrimary};
43+
}
44+
`;

‎src/components/header-footer/Footer.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { FooterContainer } from './styles';
44
import { GradientOverlay } from '../landing-page-hero/styles';
55
import { navItems } from './navItems';
66
import {
7-
NavMenuWrapper,
87
Nav,
98
NavItem,
109
FooterContentWrapper,
10+
FooterRow,
1111
StyledParagraph,
1212
SocialMediaLinksWrapper,
1313
} from './styles';
@@ -25,11 +25,13 @@ export const Footer = () => {
2525
}
2626
`);
2727

28+
const { author } = data.site.siteMetadata;
29+
2830
return (
2931
<FooterContainer>
3032
<GradientOverlay>
3133
<FooterContentWrapper>
32-
<NavMenuWrapper>
34+
<FooterRow>
3335
<Nav>
3436
{navItems.map(({ title, url }) => (
3537
<NavItem key={url}>
@@ -39,12 +41,14 @@ export const Footer = () => {
3941
</NavItem>
4042
))}
4143
</Nav>
42-
</NavMenuWrapper>
43-
<SocialMediaLinksWrapper>
44-
<SocialMediaIcons />
45-
</SocialMediaLinksWrapper>
44+
45+
<SocialMediaLinksWrapper>
46+
<SocialMediaIcons />
47+
</SocialMediaLinksWrapper>
48+
</FooterRow>
49+
4650
<StyledParagraph>
47-
© 2026 {data.site.siteMetadata.author}.
51+
© 2020–{new Date().getFullYear()} {author}
4852
</StyledParagraph>
4953
</FooterContentWrapper>
5054
</GradientOverlay>

‎src/components/header-footer/Header.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from 'react';
2-
import Logo from '../../images/logo.svg';
1+
import React, { useContext } from 'react';
2+
import GreyLogo from '../../images/logo-grey.svg';
3+
import WhiteLogo from '../../images/logo-white.svg';
34
import {
45
HeaderWrapper,
56
HeaderContent,
@@ -18,18 +19,19 @@ import { Link } from '../link/Link';
1819
import { GradientOverlay } from '../landing-page-hero/styles';
1920
import { Icon } from '../icon/Icon';
2021
import { useSiteMetadata } from 'hooks';
22+
import { GlobalStateContext } from 'contexts/GlobalContextProvider';
2123

2224
export const Header = (): JSX.Element => {
2325
const { title } = useSiteMetadata();
2426
const [{ url: homePageUrl }, ...navItemsWithoutHomePageLink] = navItems;
25-
27+
const { theme } = useContext(GlobalStateContext);
2628
return (
2729
<HeaderWrapper>
2830
<GradientOverlay>
2931
<HeaderContent>
3032
<LogoWrapper>
3133
<LogoLink to="/">
32-
<Logo />
34+
{theme === 'lightTheme' ? <GreyLogo /> : <WhiteLogo />}
3335
<span>{title}</span>
3436
</LogoLink>
3537
</LogoWrapper>

‎src/components/header-footer/navItems.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const navItems: Record<string, string>[] = [
22
{ title: 'Home', url: '/' },
33
{ title: 'Blog', url: '/blog' },
4-
// { title: 'Projects', url: '/projects' }, // Projects page is currently disabled.
4+
{ title: 'Projects', url: '/projects' },
55
{ title: 'About', url: '/about' },
66
];

‎src/components/header-footer/styles.tsx‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import styled, { DefaultTheme } from 'styled-components';
2-
import { ml, mb, px, py, pt, pb, mr, mt, p } from 'styled-components-spacing';
2+
import { ml, mb, px, py, pt, pb, mr, p } from 'styled-components-spacing';
33
import breakpoint from 'styled-components-breakpoint';
44
import { Paragraph } from '../paragraph/Paragraph';
55
import { Link } from '../link/Link';
6+
import { SocialMediaList } from '../social-media-icons/styles';
67

78
export const HeaderWrapper = styled.header`
89
font-family: ${({ theme }) => theme.fonts.secondaryHeading};
@@ -73,7 +74,7 @@ export const LogoLink = styled(Link)`
7374
display: flex;
7475
align-items: center;
7576
&:hover {
76-
color: ${({ theme }) => theme.colors.lightGreen};
77+
color: ${({ theme }) => theme.colors.brandPrimary};
7778
}
7879
`;
7980

@@ -99,14 +100,14 @@ export const NavItem = styled.li`
99100
`};
100101
101102
& > a:hover {
102-
color: ${({ theme }) => theme.colors.brightLavender};
103+
color: ${({ theme }) => theme.colors.brandPrimary};
103104
}
104105
105106
& > a {
106107
border-radius: 3px;
107108
&.activeNavItem {
108109
color: ${({ theme }: { theme: DefaultTheme }) =>
109-
theme.colors.brightLavender};
110+
theme.colors.brandPrimary};
110111
text-decoration: underline;
111112
text-underline-offset: 0.3rem;
112113
}
@@ -148,7 +149,7 @@ export const ThemeToggleSwitchWrapper = styled.div`
148149
`};
149150
`;
150151

151-
// Footer and its component styles
152+
// Footer styles
152153
export const FooterContainer = styled.div`
153154
font-size: ${({ theme }) => theme.fontSizes.medium};
154155
font-family: ${({ theme }) => theme.fonts.secondaryHeading};
@@ -159,8 +160,6 @@ export const FooterContainer = styled.div`
159160
export const FooterContentWrapper = styled.div`
160161
display: flex;
161162
flex-direction: column;
162-
justify-content: center;
163-
align-items: center;
164163
margin: 0 auto;
165164
${pt(8)};
166165
${pb(6)};
@@ -173,18 +172,38 @@ export const FooterContentWrapper = styled.div`
173172
${breakpoint('xxl')`
174173
width: 70rem;
175174
`};
175+
`;
176+
177+
export const FooterRow = styled.div`
178+
display: flex;
179+
justify-content: space-between;
180+
align-items: center;
181+
${mb(3)};
182+
183+
${Nav} {
184+
gap: 2rem;
185+
justify-content: flex-start;
176186
177-
${NavMenuWrapper} {
178-
${mr(0)}
187+
${NavItem} {
188+
&:not(:first-child) {
189+
margin-left: 0;
190+
}
191+
}
179192
}
193+
194+
${breakpoint('xs', 'md')`
195+
flex-direction: column;
196+
align-items: flex-start;
197+
gap: 1.5rem;
198+
`}
180199
`;
181200

182201
export const SocialMediaLinksWrapper = styled.div`
183-
${mb(4)};
184-
${mt(6)};
185-
${breakpoint('xs', 'lg')`
186-
${mt(5)};
187-
`};
202+
${breakpoint('xs', 'md')`
203+
${SocialMediaList} {
204+
justify-content: flex-start;
205+
}
206+
`}
188207
`;
189208

190209
export const StyledParagraph = styled(Paragraph)`
@@ -194,7 +213,5 @@ export const StyledParagraph = styled(Paragraph)`
194213
? theme.colors.secondaryText
195214
: theme.colors.primaryText};
196215
font-size: ${({ theme }) => theme.fontSizes.small};
197-
${mb(1)};
198216
}
199-
text-align: center;
200217
`;

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export * from './markdown-renderer/MarkdownRenderer';
77
export * from './project-list/ProjectList';
88
export * from './newsletter/NewsLetter';
99
export * from './video-player/VideoPlayer';
10+
export * from './get-in-touch-section/GetInTouchSection';
1011
export * from './seo/SEO';
1112
export * from './gatsby-image/StyledGatsbyImage';
1213
export * from './blog-post-card-list/BlogPostCardList';

‎src/components/landing-page-hero/LandingPageHero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const LandingPageHero = (): JSX.Element => {
4545
to="/about"
4646
text="More About Me →"
4747
variant="text"
48-
color="secondary"
48+
color="primary"
4949
size="large"
5050
/>
5151

0 commit comments

Comments
 (0)