adding projects

src/components/home/Headline.tsx

@@ -13,31 +13,37 @@ export default function Headline({ 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 circular={false} src={avatar} size={40} />
-					<div
-						tw={
-							'md:ml-6 pt-2 md:pt-0 flex flex-col md:items-start items-center'
-						}
-					>
-						<h4 className={'type-h4'}>{name}</h4>
-						<h6 className={'text-2xl'}>{role}</h6>
-						<div>
-							<div tw={'flex items-center pt-2'}>
-								<Icon name={'mail'} size={24} color={'white'} />
-								<span tw={'pl-1'}>{email}</span>
-							</div>
-							<div tw={'flex items-center pt-2'}>
-								<Icon name={'phone'} size={24} color={'white'} />
-								<span tw={'pl-1'}>{phone}</span>
+			<Container>
+				<div
+					tw={
+						'md:justify-between flex w-full h-full md:flex-row flex-col items-center'
+					}
+				>
+					<div tw={'flex items-center flex-col md:flex-row justify-center'}>
+						<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'
+							}
+						>
+							<h4 className={'type-h4'}>{name}</h4>
+							<h6 className={'text-2xl'}>{role}</h6>
+							<div>
+								<div tw={'flex items-center pt-2'}>
+									<Icon name={'mail'} size={24} color={'white'} />
+									<span tw={'pl-1'}>{email}</span>
+								</div>
+								<div tw={'flex items-center pt-2'}>
+									<Icon name={'phone'} size={24} color={'white'} />
+									<span tw={'pl-1'}>{phone}</span>
+								</div>
 							</div>
 						</div>
 					</div>
+					<Button icon={'send'} size={'sm'} className={'md:mt-0 mt-4'}>
+						CONTACT ME
+					</Button>
 				</div>
-				<Button icon={'send'} size={'sm'} className={'md:mt-0 mt-4'}>
-					CONTACT ME
-				</Button>
 			</Container>
 		</Root>
 	);

src/components/projects/ProjectMain.tsx

@@ -0,0 +1,47 @@
+import tw from 'twin.macro';
+import React from 'react';
+import { Card } from '~/components/ui/containers/Card';
+import { Container } from '~/components/ui/containers/Container';
+import { Grid } from '~/components/ui/containers/Grid';
+import { GridColumn } from '~/components/ui/containers/GridColumn';
+import { Badge } from '~/components/ui/misc/Badge';
+import userProfile from '~/profile';
+import { getRandomizedColor } from '~/utils/colors';
+
+const Root = tw.div`
+	bg-gray-300  flex-grow
+`;
+
+export function ProjectMain({
+	projects,
+}: {
+	projects: typeof userProfile['projects'];
+}) {
+	return (
+		<Root id={'content'}>
+			<Container>
+				<h4 tw={'type-h4 text-center p-5'}>Projects</h4>
+				<Grid gap={5} className={'mb-5'}>
+					{projects.map((project, index) => {
+						return (
+							<GridColumn lg={4} md={6} sm={12} key={index}>
+								<Card className={'h-64 flex flex-col'}>
+									<h6 tw={'type-h6 text-gray-700 mb-4'}>{project.name}</h6>
+									<p tw={'flex-grow'}>{project.description}</p>
+									<div className={'flex flex-wrap items-center mt-3'}>
+										{project.tags.map((tag) => (
+											<Badge key={tag} color={getRandomizedColor(tag)}>
+												{' '}
+												{tag}{' '}
+											</Badge>
+										))}
+									</div>
+								</Card>
+							</GridColumn>
+						);
+					})}
+				</Grid>
+			</Container>
+		</Root>
+	);
+}

src/components/ui/containers/Container.tsx

@@ -1,5 +1,5 @@
 import tw, { styled } from 'twin.macro';
 
 export const Container = styled.div`
-	${tw`container flex flex-col md:flex-row items-center px-6`}
+	${tw`container flex flex-col px-6`}
 `;

src/components/ui/misc/Badge.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import 'twin.macro';
+
+export function Badge({ color, children }) {
+	return (
+		<div
+			tw='flex text-xs justify-center items-center m-1 py-1 px-2 bg-white rounded-full border'
+			className={`border-${color}-300 bg-${color}-100 text-${color}-700`}
+		>
+			<div tw='leading-none flex-initial'>{children}</div>
+		</div>
+	);
+}

src/layout/Index.tsx

@@ -1,13 +1,14 @@
 import { Nav } from '~/components/common/Nav';
 import profile from '~/profile';
 import React from 'react';
+import 'twin.macro';
 import { Footer } from '~/components/common/Footer';
 
 export default function Layout({ children }) {
 	return (
 		<div tw={'min-h-screen flex flex-col'}>
 			<Nav profile={profile.basic} />
-			{children}
+			<div tw={'flex-grow flex flex-col'}>{children}</div>
 			<Footer name={profile.basic.name} />
 		</div>
 	);

src/pages/projects.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import 'twin.macro';
+import { ProjectMain } from '~/components/projects/ProjectMain';
+import profile from '~/profile';
+
+const ProjectPage = () => (
+	<>
+		<ProjectMain projects={profile.projects} />
+	</>
+);
+
+export default ProjectPage;

src/profile.tsx

@@ -148,4 +148,51 @@ export default {
 			year: 2015,
 		},
 	],
+	projects: [
+		{
+			name: `Tuan's news`,
+			description:
+				'A simple PWA application that collects news from multiple sources and combines them into a single website',
+			tags: ['React', 'AWS', 'NodeJS', 'ElasticSearch', 'Redis'],
+		},
+		{
+			name: 'Yup decorators',
+			description:
+				'An NPM package that adds TypeScript decorators support for the popular validation library Yup',
+			tags: ['Yup', 'TypeScript'],
+		},
+		{
+			name: 'Sportywide Web',
+			description:
+				'A Web application that fetches sport data from multiple websites and allows users to make betting on player performances',
+			tags: ['React', 'AWS', 'NestJS', 'PostgresQL', 'Redis'],
+		},
+		{
+			name: 'ACIS 2016',
+			description: (
+				<div>
+					A mobile web application that was used by the &nbsp;
+					<strong>Australasian Conferences on Information Systems</strong>{' '}
+					(ACIS) 2016.
+				</div>
+			),
+			tags: ['Java', 'PHP'],
+		},
+		{
+			name: 'Change Log Generator',
+			description: (
+				<div>
+					A Java FX application that is used to generate Liquibase XML change
+					logs and SQL DDL statements.
+				</div>
+			),
+			tags: ['Java', 'JavaFX'],
+		},
+		{
+			name: 'Money calculator',
+			description:
+				'A simple application that can used to calculate the expenses and money transfers',
+			tags: ['Angular', 'Firebase'],
+		},
+	],
 };

src/utils/colors/index.ts

@@ -0,0 +1,16 @@
+export function getRandomizedColor(text: string) {
+	const randomColors = [
+		'blue',
+		'red',
+		'green',
+		'teal',
+		'orange',
+		'yellow',
+		'purple',
+	];
+	let total = 0;
+	for (const ch of text) {
+		total += ch.charCodeAt(0);
+	}
+	return randomColors[total % randomColors.length];
+}