Move pages to scene folder with their components and updated typography

byurhannurula · Jan 23, 2020 · 0da3563 · 0da3563
1 parent 54c46e2
commit 0da3563
Show file tree

Hide file tree

Showing 41 changed files with 495 additions and 524 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/content/data/index.js b/content/data/index.js
@@ -0,0 +1,2 @@
+export * from './links'
+export * from './website'
diff --git a/src/components/links.js → content/data/links.js b/src/components/links.js → content/data/links.js
@@ -1,32 +1,27 @@
-const navLinks = [
+export const navLinks = [
   {
     id: 0,
     label: 'Home',
     url: '/',
   },
   {
     id: 1,
-    label: 'About me',
-    url: '/about',
-  },
-  {
-    id: 2,
     label: 'Articles',
     url: '/blog',
   },
   {
-    id: 3,
-    label: 'Support',
+    id: 2,
+    label: 'Supporters',
     url: '/supporters',
   },
   {
-    id: 4,
+    id: 3,
     label: 'Contact',
     url: '/contact',
   },
 ]
 
-const socialLinks = [
+export const socialLinks = [
   {
     id: 0,
     name: 'Twitter',
@@ -53,5 +48,3 @@ const socialLinks = [
     link: 'https://linkedin.com/in/byurhanbeyzat/',
   },
 ]
-
-export { navLinks, socialLinks }
diff --git a/content/data/website.js b/content/data/website.js
@@ -0,0 +1,5 @@
+export const about = {
+  email: 'hi@byurhanbeyzat.com',
+  phone: '+359 87 6129 065',
+  isAvaliable: true,
+}
diff --git a/posts/post-1/index.mdx → content/posts/post-1/index.mdx b/posts/post-1/index.mdx → content/posts/post-1/index.mdx
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -20,7 +20,7 @@ module.exports = {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `posts`,
-        path: `${__dirname}/posts`,
+        path: `${__dirname}/content/posts`,
       },
     },
     {
@@ -54,7 +54,6 @@ module.exports = {
         headers: {
           Authorization: `bearer ${process.env.GATSBY_GITHUB_TOKEN}`,
         },
-        fetchOptions: {},
       },
     },
     {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -63,6 +63,9 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       modules: [`${__dirname}/src`, 'node_modules'],
+      alias: {
+        '@content': `${__dirname}/content`,
+      },
     },
   })
 }
diff --git a/readme.md b/readme.md
@@ -2,8 +2,23 @@
 
 > *Personal website built with [Gatsby.js](https://www.gatsbyjs.org/), [Styled-Components](https://www.styled-components.com/), [Formik](https://jaredpalmer.com/formik/), etc..*
 
-[Link](https://byurhanbeyzat.com/)
+<br />
 
----
+Folder structure, inspired by thoose [recommendations](https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1).
+
+```sh
+app/
+└── src/
+    ├── components/             # Shared generic component
+    ├── pages/                  # Static routes declaration
+    ├── scenes/                 # Different pages of the website
+    │   └── pageName/           # Landing / About me / ...
+    │       ├── components/     # Page components.
+    │       ├── index.jsx       # Main page file
+    │       └── styles.js       # Page specific styles
+    └── styles/                 # Global styles
+```
+
+<br />
 
 [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/X7X38NNC)
diff --git a/src/components/common/ContactForm/schema.js b/src/components/common/ContactForm/schema.js
diff --git a/src/components/common/List/index.js b/src/components/common/List/index.js
@@ -1,11 +1,5 @@
 import styled from 'styled-components'
 
-export const ListHeading = styled.h3`
-  color: var(--gray-darkest);
-  margin-top: var(--space-xxs);
-  margin-bottom: var(--space-xs);
-`
-
 export const List = styled.ul`
   list-style-type: square;
   margin-bottom: var(--space-md);

diff --git a/src/components/common/Typography/index.js → src/components/common/Text/index.js b/src/components/common/Typography/index.js → src/components/common/Text/index.js
@@ -1,15 +1,4 @@
-import styled from 'styled-components'
-import { media } from 'styles'
-
-export const Title = styled.h1`
-  color: var(--dark);
-  margin-bottom: var(--space-sm);
-`
-
-export const SmallHeading = styled.h3`
-  color: var(--gray-darkest);
-  margin-bottom: var(--space-xxs);
-`
+import styled, { css } from 'styled-components'
 
 export const Text = styled('p')`
   color: var(--gray);
@@ -18,42 +7,50 @@ export const Text = styled('p')`
 
   ${({ display }) =>
     display &&
-    `
+    css`
       margin-bottom: var(--space-sm);
       color: var(--dark);
       font-size: 2.75em;
 
       @media (max-width: 568px) {
         font-size: 2.4em;
       }
-  `}
+    `}
 
   ${({ heading }) =>
     heading &&
-    `
+    css`
       color: var(--dark);
       font-size: 2.074em;
-      
-  `}
+    `}
 
   ${({ subtitle }) =>
     subtitle &&
-    `
+    css`
+      margin-bottom: var(--space-xs);
       margin-top: var(--space-xs);
       color: var(--gray-dark);
       font-size: 1.15em;
       font-weight: 400;
-  `}
+    `}
 
   ${({ body }) =>
     body &&
-    `
+    css`
       font-size: calc(1em + 0.09vw);
-  `}
+    `}
+
+  ${({ listTitle }) =>
+    listTitle &&
+    css`
+      color: var(--gray-darkest);
+      margin-top: var(--space-xxs);
+      margin-bottom: var(--space-xs);
+    `}
 
   ${({ smallText }) =>
     smallText &&
-    `
+    css`
       font-size: calc(0.9em + 0.08vw);
-  `}
+    `}
 `
diff --git a/src/components/common/index.js b/src/components/common/index.js
@@ -1,7 +1,5 @@
 export * from './Icon'
 export * from './Link'
 export * from './List'
+export * from './Text'
 export * from './Container'
-export * from './Typography'
-export * from './ContactForm'
-export * from './PostCards'
diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { socialLinks } from 'components/links'
+import { socialLinks, about } from '@content/data'
 import { Container, Icon, Text, ExternalLink } from 'components/common'
 import {
   FooterWrapper,
@@ -22,9 +22,7 @@ const Footer = () => (
           Feel free to reach out if you&apos;re looking for a developer, have a
           question, or just want to connect.
         </Text>
-        <ExternalLink url="mailto:byurhanbeyzat@gmail.com">
-          byurhanbeyzat@gmail.com
-        </ExternalLink>
+        <ExternalLink url={`mailto:${about.email}`}>{about.email}</ExternalLink>
         <IconsWrapper>
           <IconsList>
             {socialLinks &&
@@ -49,14 +47,14 @@ const Footer = () => (
         <Text smallText>
           Built using{' '}
           <ExternalLink
-            url="https://gatsbyjs.org"
+            url="https://gatsbyjs.org/?ref=byurhanbeyzat.com"
             aria-label="Gatsby.js - Official Website"
           >
             <Icon icon="Gatsby" />
           </ExternalLink>
           , hosted on{' '}
           <ExternalLink
-            url="https://github.com/"
+            url="https://github.com/?ref=byurhanbeyzat.com"
             aria-label="Github - Official Website"
           >
             <Icon icon="Github" />

diff --git a/src/components/footer/styles.js b/src/components/footer/styles.js
@@ -10,7 +10,6 @@ export const FooterWrapper = styled.footer`
 export const Contact = styled.div`
   p {
     width: 60%;
-    margin-bottom: var(--space-xs);
 
     ${media.max('md')`
       width: 100%;

diff --git a/src/components/header/navigation/index.jsx b/src/components/header/navigation/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import { ExternalLink, Container } from 'components/common'
-import { navLinks } from 'components/links'
+import { navLinks, about } from '@content/data'
 
 import {
   Nav,
@@ -21,22 +21,17 @@ export const Navigation = ({ isActive }) => (
       <Contact>
         <ContactDetails>
           <SmallTitle>Contact Details</SmallTitle>
-          <ExternalLink url="mailto:byurhanbeyzat@gmail.com">
-            byurhanbeyzat@gmail.com
-          </ExternalLink>
-          <ExternalLink url="tel:+359 87 6129 065">
-            +359 87 6129 065
+          <ExternalLink url={`mailto:${about.email}`}>
+            {about.email}
           </ExternalLink>
+          <ExternalLink url={`tel:${about.phone}`}>{about.phone}</ExternalLink>
         </ContactDetails>
-
-        <Avaliable>
+        <Avaliable isAvaliable={about.isAvaliable}>
           <SmallTitle>Avaliable</SmallTitle>
           <p>
-            <span />
-            Avaliable for new projects
+            {about.isAvaliable ? 'Avaliable for new projects' : 'Not avaliable'}
           </p>
         </Avaliable>
-
         <CopyrightText>
           &copy; {new Date().getFullYear()} &mdash; Byurhan Beyzat
         </CopyrightText>

diff --git a/src/components/header/navigation/styles.js b/src/components/header/navigation/styles.js
@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components'
+import styled, { css, keyframes } from 'styled-components'
 import { media, mixins } from 'styles'
 
 const pulseAnimation = keyframes`
@@ -42,14 +42,14 @@ export const Nav = styled.nav`
 
   ${({ isActive }) =>
     isActive &&
-    `
-    height: 100vh;
+    css`
+      height: 100vh;
 
-    & > div > div {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  `}
+      & > div > div {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    `}
 `
 
 export const Contact = styled.div`
@@ -91,17 +91,25 @@ export const Avaliable = styled.div`
     margin-bottom: var(--space-md);
     ${mixins.flexAlignCenter};
 
-    &::before {
+    &:before {
       content: '';
       width: 8px;
       height: 8px;
       display: block;
       border-radius: 4px;
-      background-color: #38ed94;
+      background-color: var(--red);
       margin-right: var(--space-xs);
-      animation: ${pulseAnimation} 1.2s infinite ease-in-out;
     }
   }
+
+  ${({ isAvaliable }) =>
+    isAvaliable &&
+    css`
+      p:before {
+        background-color: #38ed94;
+        animation: ${pulseAnimation} 1.2s infinite ease-in-out;
+      }
+    `}
 `
 
 export const CopyrightText = styled.p`

diff --git a/src/components/header/styles.js b/src/components/header/styles.js
@@ -9,6 +9,7 @@ export const HeaderWrapper = styled.header`
   width: 100%;
   background-color: var(--white);
   ${mixins.flexAlignCenter};
+  ${mixins.boxShadow};
 
   & > div {
     max-width: 1280px;