feat: we added Header component; removed Navigation; optimzed Layout (#1

)

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",

src/components/header/Header.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+export const Header = () => {
+  return (
+    <div className="flex flex-col items-center gap-8 px-4 md:flex-row">
+      <div className="flex justify-center w-full md:w-5/12">
+        <div className="overflow-hidden border-8 border-white border-solid rounded-full shadow-xl max-w-[200px] lg:max-w-[400px]">
+          <img
+            src="https://lmpixels.com/wp/leven-wp/full-width/wp-content/uploads/sites/3/2019/12/cesar-rincon-1024x1024.jpg"
+            alt="Alex Smith"
+          />
+        </div>
+      </div>
+      <div className="w-full text-center md:w-7/12 md:text-left">
+        <span className="mb-4 text-sm text-gray-400">Frontend-developer</span>
+        <h1 className="mb-4 text-3xl font-black text-gray-700">Alex Smith</h1>
+        <p className="mb-4 text-sm">
+          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.
+        </p>
+        <a
+          href=""
+          className="inline-block p-2 px-6 mr-2 bg-white border-2 border-green-700 shadow-lg rounded-3xl hover:bg-green-700 hover:text-white"
+        >
+          Download CV
+        </a>
+        <a
+          href=""
+          className="inline-block p-2 px-6 bg-white border-2 border-gray-700 shadow-lg rounded-3xl hover:bg-gray-700"
+        >
+          Contact
+        </a>
+      </div>
+    </div>
+  )
+}

src/components/header/index.ts

@@ -0,0 +1 @@
+export * from './Header'

src/components/page/Page.tsx

@@ -5,7 +5,11 @@ const Content: FunctionComponent = ({ children }) => {
 }
 
 export function Page({ children }: React.PropsWithChildren<any>) {
-  return <div className="w-full p-4 sm:p-6">{children} </div>
+  return (
+    <div className="container w-full p-4 mx-auto sm:p-6 sm:py-[50px]">
+      {children}
+    </div>
+  )
 }
 
 Page.Content = Content

src/components/what-i-do/index.ts

@@ -0,0 +1 @@
+export * from './whatido'

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;
+  }
+}

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 (
+    <div className="px-4 mx-auto space-y-4">
+      <h2 className="relative inline-block pb-2 text-2xl font-bold title">
+        What I do
+      </h2>
+      <div className="flex flex-wrap -mx-6">
+        {ITEMS.map(item => (
+          <div
+            key={item.title}
+            className="flex w-full px-6 mt-4 space-x-6 md:w-1/2"
+          >
+            <div className="py-2 text-lg text-green-500 md:text-3xl">
+              <item.icon />
+            </div>
+            <div>
+              <h4 className="text-lg font-bold">{item.title}</h4>
+              <p>{item.text}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/layouts/AppLayout.tsx

@@ -6,7 +6,7 @@ export const AppLayout: FC = ({ children }) => {
   useChangeLocation()
 
   return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
+    <div className="flex h-screen overflow-hidden bg-white">
       <div className="flex flex-col flex-1 w-0 overflow-hidden">
         <main
           className="relative flex-1 overflow-y-auto focus:outline-none"

src/pages/index.tsx

@@ -1,29 +1,25 @@
 import React from 'react'
 import { GetServerSideProps } from 'next'
 import Head from 'next/head'
-import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import { Navigation } from '@/components/navigation'
 import { Page } from '@/components/page'
 import { AppLayout } from '@/layouts/AppLayout'
 import { NextPageType } from '@/types/next'
+import { Header } from '@/components/header'
+import { WhatIDo } from '@/components/what-i-do'
 
 const IndexPage: NextPageType = () => {
-  const { t } = useTranslation('common')
-
   return (
     <>
       <Head>
-        <title>natterstefan/resume-tailwind-template</title>
+        <title>Resumee</title>
       </Head>
       <Page>
         <Page.Content>
-          <Navigation />
-          <div className="py-20">
-            <h1 className="text-5xl text-center text-accent-1">
-              {t('headline')}
-            </h1>
+          <div className="space-y-16">
+            <Header />
+            <WhatIDo />
           </div>
         </Page.Content>
       </Page>

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';

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"