From 756fdacde6e09718b201b769585ecb985d25cef2 Mon Sep 17 00:00:00 2001 From: Stefan Natter Date: Tue, 20 Apr 2021 17:54:46 +0200 Subject: [PATCH] feat: we added Header component; removed Navigation; optimzed Layout (#1) --- package.json | 3 +- src/components/header/Header.tsx | 38 +++++++++++ src/components/header/index.ts | 1 + src/components/navigation/Navigation.tsx | 51 --------------- .../__stories__/Navigation.stories.tsx | 14 ----- .../navigation/__tests__/Navigation.test.tsx | 32 ---------- src/components/navigation/index.tsx | 1 - src/components/page/Page.tsx | 6 +- src/components/what-i-do/index.ts | 1 + src/components/what-i-do/whatido.scss | 10 +++ src/components/what-i-do/whatido.tsx | 63 +++++++++++++++++++ src/layouts/AppLayout.tsx | 2 +- src/pages/index.tsx | 16 ++--- src/styles/Button.scss | 3 - src/styles/index.scss | 2 +- styles/index.scss | 8 --- yarn.lock | 5 ++ 17 files changed, 133 insertions(+), 123 deletions(-) create mode 100644 src/components/header/Header.tsx create mode 100644 src/components/header/index.ts delete mode 100644 src/components/navigation/Navigation.tsx delete mode 100644 src/components/navigation/__stories__/Navigation.stories.tsx delete mode 100644 src/components/navigation/__tests__/Navigation.test.tsx delete mode 100644 src/components/navigation/index.tsx create mode 100644 src/components/what-i-do/index.ts create mode 100644 src/components/what-i-do/whatido.scss create mode 100644 src/components/what-i-do/whatido.tsx delete mode 100644 src/styles/Button.scss delete mode 100644 styles/index.scss diff --git a/package.json b/package.json index a39edd0..9456310 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "next-i18next": "8.1.3", "react": "16.14.0", "react-cookie": "4.0.3", - "react-dom": "16.14.0" + "react-dom": "16.14.0", + "react-icons": "4.2.0" }, "devDependencies": { "@babel/core": "7.13.15", diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx new file mode 100644 index 0000000..f53b256 --- /dev/null +++ b/src/components/header/Header.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export const Header = () => { + return ( +
+
+
+ Alex Smith +
+
+
+ Frontend-developer +

Alex Smith

+

+ Fusce tempor magna mi, non egestas velit ultricies nec. Aenean + convallis, risus non condimentum gravida, odio mauris ullamcorper + felis, ut venenatis purus ex eu mi. Quisque imperdiet lacinia urna, a + placerat sapien pretium eu. +

+ + Download CV + + + Contact + +
+
+ ) +} diff --git a/src/components/header/index.ts b/src/components/header/index.ts new file mode 100644 index 0000000..f887995 --- /dev/null +++ b/src/components/header/index.ts @@ -0,0 +1 @@ +export * from './Header' diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx deleted file mode 100644 index 1a77627..0000000 --- a/src/components/navigation/Navigation.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react' -import Link from 'next/link' -import { useTranslation } from 'next-i18next' - -const links = [ - { - href: 'https://github.com/natterstefan/resume-tailwind-template', - label: 'GitHub', - }, - { href: 'https://nextjs.org/docs', label: 'NextJS Docs' }, - { href: 'https://tailwindcss.com/docs', label: 'Tailwind Docs' }, -] - -export const Navigation = () => { - const { t } = useTranslation() - - return ( - - ) -} diff --git a/src/components/navigation/__stories__/Navigation.stories.tsx b/src/components/navigation/__stories__/Navigation.stories.tsx deleted file mode 100644 index afb345d..0000000 --- a/src/components/navigation/__stories__/Navigation.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import { Story, Meta } from '@storybook/react' - -import { Navigation } from '../Navigation' - -export default { - title: 'Components/Navigation', - component: Navigation, -} as Meta - -const Template: Story = args => - -export const Standard: Story = Template.bind({}) -Standard.args = {} diff --git a/src/components/navigation/__tests__/Navigation.test.tsx b/src/components/navigation/__tests__/Navigation.test.tsx deleted file mode 100644 index d046c8d..0000000 --- a/src/components/navigation/__tests__/Navigation.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { mount } from 'enzyme' -import Link from 'next/link' -import { useRouter } from 'next/router' - -import { mockNextUseRouter } from '@/jest.setup' - -import { Navigation } from '..' - -describe('Navigation', () => { - beforeAll(() => { - mockNextUseRouter() - }) - - it('renders Link', () => { - const wrapper = mount() - expect(wrapper.find(Link).first().prop('href')).toStrictEqual('/') - }) - - it('renders link to German home page', () => { - const wrapper = mount() - - const germanLink = wrapper.find(Link).at(1) - germanLink.simulate('click') - - expect(useRouter().push).toHaveBeenCalledWith('/', '/', { - locale: 'de', - scroll: true, - shallow: undefined, - }) - }) -}) diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx deleted file mode 100644 index f25c564..0000000 --- a/src/components/navigation/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Navigation' diff --git a/src/components/page/Page.tsx b/src/components/page/Page.tsx index ad61414..532a0eb 100644 --- a/src/components/page/Page.tsx +++ b/src/components/page/Page.tsx @@ -5,7 +5,11 @@ const Content: FunctionComponent = ({ children }) => { } export function Page({ children }: React.PropsWithChildren) { - return
{children}
+ return ( +
+ {children} +
+ ) } Page.Content = Content diff --git a/src/components/what-i-do/index.ts b/src/components/what-i-do/index.ts new file mode 100644 index 0000000..2f6e53f --- /dev/null +++ b/src/components/what-i-do/index.ts @@ -0,0 +1 @@ +export * from './whatido' diff --git a/src/components/what-i-do/whatido.scss b/src/components/what-i-do/whatido.scss new file mode 100644 index 0000000..c90e161 --- /dev/null +++ b/src/components/what-i-do/whatido.scss @@ -0,0 +1,10 @@ +h2.title { + &:before { + content: ''; + @apply absolute bottom-0 w-full h-[3px] bg-gray-100; + } + &:after { + content: ''; + @apply absolute bottom-0 left-0 w-8 h-[3px] bg-green-500; + } +} diff --git a/src/components/what-i-do/whatido.tsx b/src/components/what-i-do/whatido.tsx new file mode 100644 index 0000000..59a537e --- /dev/null +++ b/src/components/what-i-do/whatido.tsx @@ -0,0 +1,63 @@ +import React, { ComponentType } from 'react' +import { FaPencilAlt, FaWarehouse } from 'react-icons/fa' +import { FiMonitor } from 'react-icons/fi' +import { HiOutlineSpeakerphone } from 'react-icons/hi' + +interface IItem { + icon: ComponentType + title: string + text: string +} + +const ITEMS: IItem[] = [ + { + icon: FaPencilAlt, + title: 'Copywrite', + text: + 'Mauris neque libero, aliquet vel mollis nec, euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a tincidunt turpis turpis tempus ex.', + }, + { + icon: FaWarehouse, + title: 'Ecommerce', + text: + 'Mauris neque libero, aliquet vel mollis nec, euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a tincidunt turpis turpis tempus ex.', + }, + { + icon: FiMonitor, + title: 'Web Design', + text: + 'Mauris neque libero, aliquet vel mollis nec, euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a tincidunt turpis turpis tempus ex.', + }, + { + icon: HiOutlineSpeakerphone, + title: 'Marketing', + text: + 'Mauris neque libero, aliquet vel mollis nec, euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a tincidunt turpis turpis tempus ex.', + }, +] + +export const WhatIDo = () => { + return ( +
+

+ What I do +

+
+ {ITEMS.map(item => ( +
+
+ +
+
+

{item.title}

+

{item.text}

+
+
+ ))} +
+
+ ) +} diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx index b28814b..bb289a7 100644 --- a/src/layouts/AppLayout.tsx +++ b/src/layouts/AppLayout.tsx @@ -6,7 +6,7 @@ export const AppLayout: FC = ({ children }) => { useChangeLocation() return ( -
+
{ - const { t } = useTranslation('common') - return ( <> - natterstefan/resume-tailwind-template + Resumee - -
-

- {t('headline')} -

+
+
+
diff --git a/src/styles/Button.scss b/src/styles/Button.scss deleted file mode 100644 index bdf1822..0000000 --- a/src/styles/Button.scss +++ /dev/null @@ -1,3 +0,0 @@ -.btn-blue { - @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; -} diff --git a/src/styles/index.scss b/src/styles/index.scss index e8dc2b4..edccd43 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,5 +2,5 @@ @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; -@import './Button.scss'; @import './Scrollbar.scss'; +@import '@/components/what-i-do/whatido.scss'; diff --git a/styles/index.scss b/styles/index.scss deleted file mode 100644 index f1fa05b..0000000 --- a/styles/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; - -/* Write your own custom component styles here */ -.btn-blue { - @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; -} diff --git a/yarn.lock b/yarn.lock index 50100a7..4f9260b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12671,6 +12671,11 @@ react-i18next@^11.8.8: "@babel/runtime" "^7.13.6" html-parse-stringify2 "^2.0.1" +react-icons@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0" + integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ== + react-inspector@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.0.tgz#45a325e15f33e595be5356ca2d3ceffb7d6b8c3a"