add about me section

gatsby-config.js

@@ -20,8 +20,8 @@ module.exports = {
 			options: {
 				fonts: [
 					{
-						family: `Roboto Slab`,
-						variants: [`600`, `700`, `800`, `900`],
+						family: `Lato`,
+						variants: ['300', '400', `700`, `900`],
 					},
 				],
 			},

src/components/home/AboutMe.tsx

@@ -0,0 +1,15 @@
+import { ProfileSection } from '~/components/home/ProfileSection';
+import React from 'react';
+
+export function AboutMe() {
+	return (
+		<ProfileSection header={'About Me'}>
+			Write a brief intro about yourself. It&apos;s a good idea to include your
+			personal interests and hobbies as well. Lorem ipsum dolor sit amet,
+			consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+			massa. Cum sociis natoque penatibus et magnis dis parturient montes,
+			nascetur ridiculus mus. Donec quam felis, ultricies nec. Commodo ligula
+			eget dolor. Aenean massa.
+		</ProfileSection>
+	);
+}

src/components/home/GeneralInfo.tsx

@@ -0,0 +1,22 @@
+import { Groups } from '~/components/ui/groups/Groups';
+import { Icon } from '~/components/ui/icons/Icon';
+import React from 'react';
+
+export function GeneralInfo() {
+	return (
+		<Groups size={2} orientation={'vertical'}>
+			<Groups size={2}>
+				<Icon name={'location'} size={16} color={'gray-600'} />
+				<span> Hurstville, NSW </span>
+			</Groups>
+			<Groups size={2}>
+				<Icon name={'mail'} size={16} color={'gray-600'} />
+				<span> [email protected] </span>
+			</Groups>
+			<Groups size={2}>
+				<Icon name={'link'} size={16} color={'gray-600'} />
+				<span> https://vdtn359.com </span>
+			</Groups>
+		</Groups>
+	);
+}

src/components/home/Headline.tsx

@@ -7,7 +7,7 @@ import { Groups } from '~/components/ui/groups/Groups';
 import { Container } from '~/components/ui/containers/Container';
 
 const Root = styled.header`
-	${tw`bg-primary py-5 shadow-xs text-white`}
+	${tw`bg-primary py-5 text-white`}
 `;
 
 export default function Headline() {
@@ -42,7 +42,7 @@ export default function Headline() {
 								className={
 									'flex items-center pt-2 justify-center md:justify-start'
 								}
-								size={0.5}
+								size={2}
 							>
 								<Icon name={'github'} size={24} />
 								<Icon name={'linkedin'} size={24} />

src/components/home/HomeMain.tsx

@@ -3,7 +3,9 @@ import { Container } from '~/components/ui/containers/Container';
 import tw from 'twin.macro';
 import { Grid } from '~/components/ui/containers/Grid';
 import { GridColumn } from '~/components/ui/containers/GridColumn';
-import { Card } from '~/components/ui/containers/Card';
+import { ProfileSection } from '~/components/home/ProfileSection';
+import { AboutMe } from '~/components/home/AboutMe';
+import { GeneralInfo } from '~/components/home/GeneralInfo';
 
 const Root = tw.div`
 	bg-gray-300  flex-grow
@@ -14,10 +16,12 @@ export default function HomeMain() {
 			<Container>
 				<Grid gap={5} className={`pt-4`}>
 					<GridColumn md={8} sm={12}>
-						<Card>Test</Card>
+						<AboutMe />
 					</GridColumn>
 					<GridColumn md={4} sm={12}>
-						<Card>Test</Card>
+						<ProfileSection>
+							<GeneralInfo />
+						</ProfileSection>
 					</GridColumn>
 				</Grid>
 			</Container>

src/components/home/ProfileSection.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import 'twin.macro';
+import { Card } from '~/components/ui/containers/Card';
+
+export function ProfileSection({ children, header = '' }) {
+	return (
+		<Card>
+			{!!header && <h5 tw={'type-h5 text-gray-700 mb-4'}>{header}</h5>}
+			<span>{children}</span>
+		</Card>
+	);
+}

src/components/ui/groups/Groups.tsx

@@ -1,17 +1,30 @@
 import React, { HTMLAttributes } from 'react';
 import { css } from 'twin.macro';
+import theme from '~/theme';
 type Props = {
 	size: number;
 	children: any;
+	orientation?: 'vertical' | 'horizontal';
 } & HTMLAttributes<HTMLDivElement>;
 
-export function Groups({ size, children, ...props }: Props) {
+export function Groups({
+	size,
+	orientation = 'horizontal',
+	children,
+	...props
+}: Props) {
+	const resolvedSize = theme.spacing[size];
+	const horizontal = orientation === 'horizontal';
 	return (
 		<div
 			{...props}
 			css={css`
+				display: flex;
+				align-items: ${horizontal ? 'center' : 'start'};
+				flex-direction: ${horizontal ? 'row' : 'column'};
+				
 				> *:not(last-child) {
-					margin-right: ${size}em;
+					margin-${horizontal ? 'right' : 'bottom'}: ${resolvedSize};
 				}
 			`}
 		>

src/components/ui/icons/Icon.tsx

@@ -18,9 +18,19 @@ export type SvgIcon =
 	| 'phone'
 	| 'github'
 	| 'facebook'
+	| 'location'
+	| 'link'
 	| 'linkedin';
 
-export function Icon({ name, width, height, size, color, ...props }: Props) {
+export function Icon({
+	name,
+	className,
+	width,
+	height,
+	size,
+	color,
+	...props
+}: Props) {
 	if (size) {
 		width = height = size;
 	}
@@ -31,7 +41,7 @@ export function Icon({ name, width, height, size, color, ...props }: Props) {
 			viewBox={icon.viewBox}
 			width={width}
 			height={height}
-			color={color}
+			className={`${className} text-${color}`}
 		>
 			<use xlinkHref={`#${icon.id}`} />
 		</svg>

src/index.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 body {
-	font-family: 'Roboto Slab', sans-serif;
+	font-family: 'Lato', sans-serif;
 }

src/theme.ts

@@ -0,0 +1,4 @@
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../tailwind.config';
+const { theme } = resolveConfig(tailwindConfig);
+export default theme;

tailwind.config.js

@@ -157,7 +157,7 @@ module.exports = {
 		extend: {
 			colors: {
 				secondary: '#d1e0f4',
-				primary: '#0288d1',
+				primary: '#41A4F5',
 				cta: '#d10220',
 				info: '#2ecbf6',
 				warning: '#e4ca52',

tsconfig.json

@@ -8,6 +8,7 @@
 		"allowSyntheticDefaultImports": true,
 		"esModuleInterop": true,
 		"noEmit": true,
+		"noImplicitAny": false,
 		"skipLibCheck": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,