add navbar

src/components/common/Nav.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import tw, { styled } from 'twin.macro';
+import { Icon } from '~/components/ui/icons/Icon';
+import { Link } from 'gatsby';
+import { Groups } from '~/components/ui/groups/Groups';
+
+const Root = styled.nav`
+	${tw`bg-blue-600 text-white flex items-center justify-between`}
+	min-height: 2rem;
+`;
+
+const NavLink = styled(Link)`
+	${tw`h-full block flex items-center px-3`}
+`;
+
+export function Nav({ profile: { github, linkedin, facebook } }) {
+	return (
+		<Root>
+			<div>
+				<Groups
+					className={'flex p-2 items-center justify-center md:justify-start'}
+					size={2}
+				>
+					<a href={github}>
+						<Icon name={'github'} size={24} />
+					</a>
+					<a href={linkedin}>
+						<Icon name={'linkedin'} size={24} />
+					</a>
+					<a href={facebook}>
+						<Icon name={'facebook'} size={24} />
+					</a>
+				</Groups>
+			</div>
+			<div tw={'self-stretch'}>
+				<NavLink to='/' activeClassName='bg-accent'>
+					<Icon name={'home'} className={'mr-2'} size={20} /> Home
+				</NavLink>
+			</div>
+		</Root>
+	);
+}

src/components/home/Headline.tsx

@@ -3,29 +3,19 @@ import tw, { styled } from 'twin.macro';
 import { Button } from '~/components/ui/controls/Button';
 import { Avatar } from '~/components/ui/images/Avatar';
 import { Icon } from '~/components/ui/icons/Icon';
-import { Groups } from '~/components/ui/groups/Groups';
 import { Container } from '~/components/ui/containers/Container';
 
 const Root = styled.header`
 	${tw`bg-primary py-5 text-white`}
 `;
 
 export default function Headline({ profile }) {
-	const {
-		name,
-		email,
-		avatar,
-		role,
-		phone,
-		github,
-		linkedin,
-		facebook,
-	} = profile;
+	const { name, email, avatar, role, phone } = profile;
 	return (
 		<Root>
 			<Container className={'md:justify-between'}>
 				<div tw={'flex items-center flex-col md:flex-row justify-center'}>
-					<Avatar rounded={false} src={avatar} size={48} />
+					<Avatar circular={false} src={avatar} size={40} />
 					<div
 						tw={
 							'md:ml-6 pt-2 md:pt-0 flex flex-col md:items-start items-center'
@@ -42,22 +32,6 @@ export default function Headline({ profile }) {
 								<Icon name={'phone'} size={24} color={'white'} />
 								<span tw={'pl-1'}>{phone}</span>
 							</div>
-							<Groups
-								className={
-									'flex items-center pt-2 justify-center md:justify-start'
-								}
-								size={2}
-							>
-								<a href={github}>
-									<Icon name={'github'} size={24} />
-								</a>
-								<a href={linkedin}>
-									<Icon name={'linkedin'} size={24} />
-								</a>
-								<a href={facebook}>
-									<Icon name={'facebook'} size={24} color={'white'} />
-								</a>
-							</Groups>
 						</div>
 					</div>
 				</div>

src/components/ui/containers/Card.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 export function Card({ children, ...props }: Props) {
 	return (
-		<div {...props} tw='rounded bg-white p-4 overflow-hidden shadow-lg'>
+		<div {...props} tw='rounded bg-white p-5 overflow-hidden shadow-lg'>
 			{children}
 		</div>
 	);

src/components/ui/icons/Icon.tsx

@@ -22,6 +22,7 @@ export type SvgIcon =
 	| 'link'
 	| 'graduation-cap'
 	| 'external'
+	| 'home'
 	| 'linkedin';
 
 export function Icon({

src/components/ui/images/Avatar.tsx

@@ -1,17 +1,17 @@
 import React, { HTMLAttributes } from 'react';
 
-type Props = { size: number; src: string; rounded?: boolean } & HTMLAttributes<
+type Props = { size: number; src: string; circular?: boolean } & HTMLAttributes<
 	HTMLImageElement
 >;
 
-export function Avatar({ size, src, rounded = true, ...props }: Props) {
+export function Avatar({ size, src, circular = true, ...props }: Props) {
 	return (
 		<img
 			{...props}
 			src={src}
 			alt={'avatar'}
 			className={`h-${size} w-${size} ${
-				rounded ? 'rounded-full' : ''
+				circular ? 'rounded-full' : 'rounded'
 			} shadow-xs`}
 		/>
 	);

src/pages/index.tsx

@@ -3,9 +3,11 @@ import Headline from '~/components/home/Headline';
 import HomeMain from '~/components/home/HomeMain';
 import 'twin.macro';
 import profile from '~/profile';
+import { Nav } from '~/components/common/Nav';
 
 const IndexPage = () => (
 	<div tw={'min-h-screen flex flex-col'}>
+		<Nav profile={profile.basic} />
 		<Headline profile={profile.basic} />
 		<HomeMain profile={profile} />
 	</div>

src/profile.tsx

@@ -5,7 +5,7 @@ export default {
 		name: 'Tuan Nguyen',
 		githubUsername: 'tuan231195',
 		avatar:
-			'https://media-exp1.licdn.com/dms/image/C5103AQGbaWNuZzFiXg/profile-displayphoto-shrink_400_400/0?e=1602115200&v=beta&t=aN91iPo88eeXRzYz5C-v-J2zzoLoS2UmmXCCKc5qqw8',
+			'https://ik.imagekit.io/emtg9z3bqr/tr:h-160,w-160/avatar_cubwNe2pI.jpeg',
 		role: 'Software Developer',
 		email: '[email protected]',
 		phone: '0450082978',

tailwind.config.js

@@ -158,6 +158,7 @@ module.exports = {
 			colors: {
 				secondary: '#d1e0f4',
 				primary: '#41A4F5',
+				accent: '#FF8106',
 				cta: '#d10220',
 				info: '#2ecbf6',
 				warning: '#e4ca52',