about me done

WojciechCendrzak · WojciechCendrzak · commit fecee6f2eb8f · 2021-05-26T23:13:40.000+02:00
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["next/babel"]
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
 }
diff --git a/public/images/profile.jpg b/public/images/profile.jpg
diff --git a/public/images/profile.png b/public/images/profile.png
diff --git a/src/app/app.route.conts.ts b/src/app/app.route.conts.ts
@@ -1,5 +1,5 @@
 export enum AppRoute {
   Home = '/',
   Articles = '/articles',
-  AboutMe = '/amout-me',
+  AboutMe = '/about-me',
 }
diff --git a/src/components/avatar.tsx b/src/components/avatar.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import Image from 'next/image';
+
+export const Avatar = styled(Image)`
+  object-fit: cover;
+  width: 120px;
+  height: 120px;
+  border-radius: 60px;
+`;
diff --git a/src/components/content.tsx b/src/components/content.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Content = styled.div`
+  font-weight: 100;
+  line-height: 1.8;
+  letter-spacing: -0.5px;
+  text-align: justify;
+`;
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -25,6 +25,10 @@ const FooterContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+
+  @media only screen and (max-width: 768px) {
+    justify-content: center;
+  }
 `;
 
 const FooterItem = styled.div`
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -6,34 +6,45 @@ import { Footer } from './footer/footer';
 
 export const Layout: React.FC = ({ children }) => {
   return (
-    <>
-      <Head>
-        <link rel="icon" href="/favicon.ico" />
-        <meta name="description" content="Learn how to build a personal website using Next.js" />
-        <meta
-          property="og:image"
-          content={`https://og-image.vercel.app/${encodeURI(
-            translate(translationKeys.site.title)
-          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
-        />
-        <meta name="og:title" content={translate(translationKeys.site.title)} />
-        <meta name="twitter:card" content="summary_large_image" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap" rel="stylesheet" />
-        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet" />
-      </Head>
-      <header>
-        <Menu />
-      </header>
-      <Main>
-        <main>{children}</main>
-      </Main>
-      <Footer />
-    </>
+    <LayoutContainer>
+      <div>
+        <Head>
+          <link rel="icon" href="/favicon.ico" />
+          <meta name="description" content="Learn how to build a personal website using Next.js" />
+          <meta
+            property="og:image"
+            content={`https://og-image.vercel.app/${encodeURI(
+              translate(translationKeys.site.title)
+            )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
+          />
+          <meta name="og:title" content={translate(translationKeys.site.title)} />
+          <meta name="twitter:card" content="summary_large_image" />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap" rel="stylesheet" />
+          <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet" />
+        </Head>
+        <header>
+          <Menu />
+        </header>
+        <main>
+          <Main>{children}</Main>
+        </main>
+      </div>
+      <footer>
+        <Footer />
+      </footer>
+    </LayoutContainer>
   );
 };
 
+const LayoutContainer = styled.div`
+  min-height: 100vh;
+  justify-content: space-between;
+  flex-direction: column;
+  display: flex;
+`;
+
 const Main = styled.div`
   max-width: 36rem;
   padding: 0 1rem;
diff --git a/src/components/title.tsx b/src/components/title.tsx
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+  font-size: 36px;
+  font-weight: 400;
+`;
diff --git a/src/logic/translations/locales/en.ts b/src/logic/translations/locales/en.ts
@@ -17,11 +17,17 @@ export const en = {
       },
     },
   },
-  homePage: {
-    title: 'Home page',
+  pages: {
+    home: {
+      title: 'Home page',
+    },
+    articles: {},
     aboutMe: {
       title: 'About me',
-      description: "I'am frontend developer",
+      description: 'Hi, I’m Wojciech, Front End (React) and Back End (.Net) developer.',
+      avatar: {
+        alt: 'Wojciech Cendrzak',
+      },
     },
   },
 };
diff --git a/src/pages-internal/about-me/about-me.page.tsx b/src/pages-internal/about-me/about-me.page.tsx
@@ -0,0 +1,39 @@
+import Head from 'next/head';
+import { Layout } from '../../components/layout';
+import React from 'react';
+import { translate, translationKeys } from '../../logic/translations/translation.service';
+import { Title } from '../../components/title';
+import { Content } from '../../components/content';
+import { Avatar } from '../../components/avatar';
+import styled from 'styled-components';
+
+export const AboutMePage: React.FC = () => {
+  return (
+    <Layout>
+      <Head>
+        <title>{translate(translationKeys.pages.aboutMe.title)}</title>
+      </Head>
+      <Section>
+        <Title>{translate(translationKeys.pages.aboutMe.title)}</Title>
+        <Avatar
+          priority
+          src={'/images/profile.png'}
+          height={120}
+          width={120}
+          alt={translate(translationKeys.pages.aboutMe.avatar.alt)}
+        />
+        <DescriptionContent>{translate(translationKeys.pages.aboutMe.description)}</DescriptionContent>
+      </Section>
+    </Layout>
+  );
+};
+
+const Section = styled.section`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+`;
+
+const DescriptionContent = styled(Content)`
+  margin-top: 3rem;
+`;
diff --git a/src/pages-internal/home/home.page.tsx b/src/pages-internal/home/home.page.tsx
@@ -14,12 +14,8 @@ export const HomePage: React.FC<HomeProps> = ({ postDescriptions }) => {
   return (
     <Layout>
       <Head>
-        <title>{translate(translationKeys.homePage.title)}</title>
+        <title>{translate(translationKeys.pages.home.title)}</title>
       </Head>
-      <section>
-        <p>{translate(translationKeys.homePage.aboutMe.title)}</p>
-        <p>{translate(translationKeys.homePage.aboutMe.description)}</p>
-      </section>
       <section>
         <h2>Blog</h2>
         <ul>
diff --git a/src/pages-internal/post/post.page.tsx b/src/pages-internal/post/post.page.tsx
@@ -9,6 +9,8 @@ import Image from 'next/image';
 import { markDownComponents } from './post.components';
 import { LinkTo } from '../../components/link';
 import { translate, translationKeys } from '../../logic/translations/translation.service';
+import { Title } from '../../components/title';
+import { Content } from '../../components/content';
 
 interface PostPageProps {
   postData: Post;
@@ -30,9 +32,9 @@ export const PostPage: React.FC<PostPageProps> = ({ postData }) => {
           )}
           {postData.image && <PostImage priority src={postData.image} height={340} width={680} alt={postData.title} />}
         </PostHeader>
-        <PostContent>
+        <Content>
           <ReactMarkdown components={markDownComponents}>{postData.content || ''}</ReactMarkdown>
-        </PostContent>
+        </Content>
         <div>
           <LinkTo href="/">{`← ${translate(translationKeys.common.buttons.backToHome.title)}`}</LinkTo>
         </div>
@@ -41,18 +43,6 @@ export const PostPage: React.FC<PostPageProps> = ({ postData }) => {
   );
 };
 
-const Title = styled.h1`
-  font-size: 36px;
-  font-weight: 400;
-`;
-
-const PostContent = styled.div`
-  font-weight: 100;
-  line-height: 1.8;
-  letter-spacing: -0.5px;
-  text-align: justify;
-`;
-
 const PostHeader = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/about-me/index.tsx b/src/pages/about-me/index.tsx
@@ -0,0 +1,3 @@
+import { AboutMePage } from '../../pages-internal/about-me/about-me.page';
+
+export default AboutMePage;

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "presets": ["next/babel"]`
	`2`	`+ "presets": ["next/babel"],`
	`3`	`+ "plugins": [["styled-components", { "ssr": true }]]`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`export enum AppRoute {`
`2`	`2`	`Home = '/',`
`3`	`3`	`Articles = '/articles',`
`4`		`- AboutMe = '/amout-me',`
	`4`	`+ AboutMe = '/about-me',`
`5`	`5`	`}`