From 7cd68d3563c9d656396551a7601e8b3a030e394a Mon Sep 17 00:00:00 2001 From: Tuan Nguyen Date: Sun, 9 Aug 2020 14:48:07 +1000 Subject: [PATCH] adding projects --- src/components/home/Headline.tsx | 48 ++++++++++++---------- src/components/projects/ProjectMain.tsx | 47 +++++++++++++++++++++ src/components/ui/containers/Container.tsx | 2 +- src/components/ui/misc/Badge.tsx | 13 ++++++ src/layout/Index.tsx | 3 +- src/pages/projects.tsx | 12 ++++++ src/profile.tsx | 47 +++++++++++++++++++++ src/utils/colors/index.ts | 16 ++++++++ 8 files changed, 165 insertions(+), 23 deletions(-) create mode 100644 src/components/projects/ProjectMain.tsx create mode 100644 src/components/ui/misc/Badge.tsx create mode 100644 src/pages/projects.tsx create mode 100644 src/utils/colors/index.ts diff --git a/src/components/home/Headline.tsx b/src/components/home/Headline.tsx index 65064f3..3699b44 100644 --- a/src/components/home/Headline.tsx +++ b/src/components/home/Headline.tsx @@ -13,31 +13,37 @@ export default function Headline({ profile }) { const { name, email, avatar, role, phone } = profile; return ( - -
- -
-

{name}

-
{role}
-
-
- - {email} -
-
- - {phone} + +
+
+ +
+

{name}

+
{role}
+
+
+ + {email} +
+
+ + {phone} +
+
- ); diff --git a/src/components/projects/ProjectMain.tsx b/src/components/projects/ProjectMain.tsx new file mode 100644 index 0000000..093f697 --- /dev/null +++ b/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 ( + + +

Projects

+ + {projects.map((project, index) => { + return ( + + +
{project.name}
+

{project.description}

+
+ {project.tags.map((tag) => ( + + {' '} + {tag}{' '} + + ))} +
+ + + ); + })} + + + + ); +} diff --git a/src/components/ui/containers/Container.tsx b/src/components/ui/containers/Container.tsx index b5d160a..6a53475 100644 --- a/src/components/ui/containers/Container.tsx +++ b/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`} `; diff --git a/src/components/ui/misc/Badge.tsx b/src/components/ui/misc/Badge.tsx new file mode 100644 index 0000000..d564064 --- /dev/null +++ b/src/components/ui/misc/Badge.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import 'twin.macro'; + +export function Badge({ color, children }) { + return ( +
+
{children}
+
+ ); +} diff --git a/src/layout/Index.tsx b/src/layout/Index.tsx index ec6aad0..ecab910 100644 --- a/src/layout/Index.tsx +++ b/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 (
); diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx new file mode 100644 index 0000000..ddfb453 --- /dev/null +++ b/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 = () => ( + <> + + +); + +export default ProjectPage; diff --git a/src/profile.tsx b/src/profile.tsx index 4f6d91c..1e2cbcd 100644 --- a/src/profile.tsx +++ b/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: ( +
+ A mobile web application that was used by the   + Australasian Conferences on Information Systems{' '} + (ACIS) 2016. +
+ ), + tags: ['Java', 'PHP'], + }, + { + name: 'Change Log Generator', + description: ( +
+ A Java FX application that is used to generate Liquibase XML change + logs and SQL DDL statements. +
+ ), + tags: ['Java', 'JavaFX'], + }, + { + name: 'Money calculator', + description: + 'A simple application that can used to calculate the expenses and money transfers', + tags: ['Angular', 'Firebase'], + }, + ], }; diff --git a/src/utils/colors/index.ts b/src/utils/colors/index.ts new file mode 100644 index 0000000..009fb4b --- /dev/null +++ b/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]; +}