Skip to content

Commit 0fd853a

Browse files
shellbearshellbear
committed
Add Bookmarks section
Update mobile navbar
1 parent 4366112 commit 0fd853a

File tree

10 files changed

+297
-53
lines changed

10 files changed

+297
-53
lines changed

‎components/Container.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
justifyContent,
66
justifyItems,
77
alignItems,
8+
position,
89
flexDirection,
910
grid,
1011
textAlign,
@@ -27,9 +28,11 @@ import {
2728
TextAlignProps,
2829
ColorProps,
2930
BordersProps,
31+
PositionProps,
3032
} from 'styled-system';
3133

32-
export type ContainerProps = LayoutProps &
34+
export type ContainerProps = PositionProps &
35+
LayoutProps &
3336
AlignContentProps &
3437
JustifyContentProps &
3538
FlexDirectionProps &
@@ -49,6 +52,7 @@ const Container = styled.div<ContainerProps>`
4952
flex-wrap: wrap;
5053
5154
${compose(
55+
position,
5256
alignContent,
5357
justifyContent,
5458
justifyItems,

‎components/Layout.tsx‎

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -14,51 +14,59 @@ type LayoutProps = {
1414
const Layout: React.FC<LayoutProps> = ({
1515
title = 'Antoine Ordonez',
1616
children,
17-
}) => (
18-
<div className={styles.container}>
19-
<Head>
20-
<title>{title}</title>
21-
<link rel="icon" href="/favicon.ico" />
22-
<meta charSet="utf-8" />
23-
<meta name="author" content="Antoine Ordonez" />
24-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
25-
<meta property="og:title" content="Antoine Ordonez" />
26-
<meta
27-
property="og:description"
28-
content="I'm a Full Stack developer with experience in DevOps, Backend, Frontend and mobile development."
29-
/>
30-
<meta property="og:type" content="website" />
31-
<meta property="twitter:site" content="@_shellbear" />
32-
<meta name="twitter:card" content="summary_large_image" />
33-
<meta
34-
property="og:image"
35-
content="https://shellbear.me/img/preview.png"
36-
/>
37-
{process.env.NODE_ENV === 'production' && (
38-
<>
39-
<script
40-
async
41-
src="https://www.googletagmanager.com/gtag/js?id=G-RZP6RWZ32F"
42-
/>
43-
<script
44-
dangerouslySetInnerHTML={{
45-
__html: `
17+
}) => {
18+
const [isOpen, setIsOpen] = React.useState(false);
19+
20+
return (
21+
<div className={styles.container}>
22+
<Head>
23+
<title>{title}</title>
24+
<link rel="icon" href="/favicon.ico" />
25+
<meta charSet="utf-8" />
26+
<meta name="author" content="Antoine Ordonez" />
27+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
28+
<meta property="og:title" content="Antoine Ordonez" />
29+
<meta
30+
property="og:description"
31+
content="I'm a Full Stack developer with experience in DevOps, Backend, Frontend and mobile development."
32+
/>
33+
<meta property="og:type" content="website" />
34+
<meta property="twitter:site" content="@_shellbear" />
35+
<meta name="twitter:card" content="summary_large_image" />
36+
<meta
37+
property="og:image"
38+
content="https://shellbear.me/img/preview.png"
39+
/>
40+
{process.env.NODE_ENV === 'production' && (
41+
<>
42+
<script
43+
async
44+
src="https://www.googletagmanager.com/gtag/js?id=G-RZP6RWZ32F"
45+
/>
46+
<script
47+
dangerouslySetInnerHTML={{
48+
__html: `
4649
window.dataLayer = window.dataLayer || [];
4750
function gtag(){dataLayer.push(arguments);}
4851
gtag('js', new Date());
4952
5053
gtag('config', 'G-RZP6RWZ32F');`,
51-
}}
52-
/>
53-
</>
54-
)}
55-
</Head>
56-
<Nav />
57-
<Container justifyContent="space-between" alignContent="space-between">
58-
<main className={styles.main}>{children}</main>
59-
<Footer />
60-
</Container>
61-
</div>
62-
);
54+
}}
55+
/>
56+
</>
57+
)}
58+
</Head>
59+
<Nav
60+
isOpen={isOpen}
61+
onOpen={() => setIsOpen(true)}
62+
onClose={() => setIsOpen(false)}
63+
/>
64+
<Container justifyContent="space-between" alignContent="space-between">
65+
{!isOpen && <main className={styles.main}>{children}</main>}
66+
<Footer />
67+
</Container>
68+
</div>
69+
);
70+
};
6371

6472
export default Layout;

‎components/Nav.tsx‎

Lines changed: 54 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React from 'react';
33
import Grid from './Grid';
44
import Container from './Container';
55
import styled from 'styled-components';
6+
import Menu from '@icons/Menu';
7+
import Close from '@icons/Close';
68

79
const states: { [key: string]: React.CSSProperties } = {
810
'/': {
@@ -17,8 +19,12 @@ const states: { [key: string]: React.CSSProperties } = {
1719
left: '157px',
1820
width: '55px',
1921
},
20-
'/projects': {
22+
'/bookmarks': {
2123
left: '224px',
24+
width: '100px',
25+
},
26+
'/projects': {
27+
left: '340px',
2228
width: '79px',
2329
},
2430
};
@@ -39,7 +45,27 @@ const NavLink = styled.a`
3945
}
4046
`;
4147

42-
const Nav = (): JSX.Element => {
48+
const MenuContainer = styled(Container)`
49+
cursor: pointer;
50+
`;
51+
52+
export interface NavProps {
53+
isOpen: boolean;
54+
onOpen: () => void;
55+
onClose: () => void;
56+
}
57+
58+
const Links = (): JSX.Element => (
59+
<>
60+
<NavLink href="/">Home</NavLink>
61+
<NavLink href="/about">About</NavLink>
62+
<NavLink href="/blog">Blog</NavLink>
63+
<NavLink href="/bookmarks">Bookmarks</NavLink>
64+
<NavLink href="/projects">Projects</NavLink>
65+
</>
66+
);
67+
68+
const Nav = ({ isOpen, onOpen, onClose }: NavProps): JSX.Element => {
4369
const router = useRouter();
4470
let navStyle = states['/'];
4571

@@ -55,21 +81,41 @@ const Nav = (): JSX.Element => {
5581
return (
5682
<Grid
5783
as="nav"
58-
alignContent="center"
59-
justifyContent="space-between"
60-
my="3rem"
84+
px={['2rem', '2rem', '2rem', '0']}
6185
gridTemplateColumns={['1fr', '1fr', '1fr 1fr 1fr']}
86+
alignContent="center"
87+
justifyContent={['center', 'center', 'space-between']}
88+
margin="3rem 0"
6289
>
6390
<Container display={['none', 'none', 'flex']}>
6491
<NavLink href="/">Antoine Ordonez</NavLink>
6592
</Container>
66-
<Container alignContent="center">
93+
<MenuContainer display={['flex', 'none', 'none']}>
94+
{isOpen ? (
95+
<Close
96+
size="2rem"
97+
style={{ margin: '-0.3rem' }}
98+
onClick={(evt) => evt.type === 'click' && onClose()}
99+
/>
100+
) : (
101+
<Menu
102+
size="1.6rem"
103+
onClick={(evt) => evt.type === 'click' && onOpen()}
104+
/>
105+
)}
106+
</MenuContainer>
107+
{isOpen && (
108+
<Grid gridTemplateColumns="1fr" style={{ fontSize: '2rem' }} py="3rem">
109+
<Links />
110+
</Grid>
111+
)}
112+
<Container alignContent="center" display={['none', 'flex', 'flex']}>
67113
<Grid
68114
width="fit-content"
69115
gridGap="2rem"
70116
alignItems="center"
71117
justifyItems="center"
72-
gridTemplateColumns="repeat(4, auto)"
118+
gridTemplateColumns="repeat(5, auto)"
73119
style={{
74120
borderRadius: '25px',
75121
background: 'rgba(0, 0, 0, 0.04)',
@@ -88,10 +134,7 @@ const Nav = (): JSX.Element => {
88134
...navStyle,
89135
}}
90136
/>
91-
<NavLink href="/">Home</NavLink>
92-
<NavLink href="/about">About</NavLink>
93-
<NavLink href="/blog">Blog</NavLink>
94-
<NavLink href="/projects">Projects</NavLink>
137+
<Links />
95138
</Grid>
96139
</Container>
97140
<Container alignContent="flex-end" display={['none', 'none', 'flex']}>

‎icons/Close.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
import { SVGProps } from 'react';
3+
4+
interface CloseProps extends SVGProps<SVGSVGElement> {
5+
size?: number | string;
6+
}
7+
8+
const Close: React.FC<CloseProps> = ({ size = '1em', fill, ...props }) => (
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 22 22"
12+
fill="currentColor"
13+
role="img"
14+
width={size}
15+
height={size}
16+
{...props}
17+
>
18+
<path d="M7.22876 5.81455C6.83824 5.42403 6.20507 5.42403 5.81455 5.81455C5.42402 6.20507 5.42402 6.83824 5.81455 7.22876L9.58578 11L5.81455 14.7712C5.42402 15.1618 5.42402 15.7949 5.81455 16.1854C6.20507 16.576 6.83824 16.576 7.22876 16.1854L11 12.4142L14.7712 16.1854C15.1618 16.576 15.7949 16.576 16.1854 16.1854C16.576 15.7949 16.576 15.1618 16.1854 14.7712L12.4142 11L16.1854 7.22876C16.576 6.83824 16.576 6.20507 16.1854 5.81455C15.7949 5.42403 15.1618 5.42403 14.7712 5.81455L11 9.58579L7.22876 5.81455Z" />
19+
</svg>
20+
);
21+
22+
export default React.memo<CloseProps>(Close);

‎icons/Menu.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
import { SVGProps } from 'react';
3+
4+
interface MenuProps extends SVGProps<SVGSVGElement> {
5+
size?: number | string;
6+
}
7+
8+
const Menu: React.FC<MenuProps> = ({ size = '1em', fill, ...props }) => (
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 18 16"
12+
width={size}
13+
height={size}
14+
role="img"
15+
style={{
16+
display: 'block',
17+
}}
18+
{...props}
19+
>
20+
<path
21+
fillRule="evenodd"
22+
clipRule="evenodd"
23+
d="M0 2C0 1.37868 0.50368 0.875 1.125 0.875H16.875C17.4963 0.875 18 1.37868 18 2C18 2.62132 17.4963 3.125 16.875 3.125H1.125C0.50368 3.125 0 2.62132 0 2ZM0 8C0 7.37868 0.50368 6.875 1.125 6.875H16.875C17.4963 6.875 18 7.37868 18 8C18 8.62132 17.4963 9.125 16.875 9.125H1.125C0.50368 9.125 0 8.62132 0 8ZM1.125 12.875C0.50368 12.875 0 13.3787 0 14C0 14.6213 0.50368 15.125 1.125 15.125H16.875C17.4963 15.125 18 14.6213 18 14C18 13.3787 17.4963 12.875 16.875 12.875H1.125Z"
24+
/>
25+
</svg>
26+
);
27+
28+
export default React.memo<MenuProps>(Menu);

‎next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
module.exports = {
22
target: 'serverless',
3+
images: {
4+
domains: ['rdl.ink'],
5+
},
36
webpack: (config, { isServer }) => {
47
if (!isServer) {
58
config.resolve.fallback.fs = false;

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,14 @@
2121
]
2222
},
2323
"dependencies": {
24+
"@types/javascript-time-ago": "^2.0.3",
2425
"@types/styled-components": "^5.1.9",
2526
"@types/styled-system": "^5.1.11",
2627
"babel-plugin-styled-components": "^1.12.0",
2728
"fast-glob": "^3.2.5",
2829
"framer-motion": "^4.1.17",
2930
"gray-matter": "^4.0.2",
31+
"javascript-time-ago": "^2.3.8",
3032
"next": "^11.1.2",
3133
"next-mdx-remote": "^3.0.1",
3234
"notion-client": "^4.8.6",

0 commit comments

Comments
 (0)