refact: rename Column components to be generic

src/components/ArchivesSidebar/index.tsx

@@ -2,7 +2,7 @@ import { graphql, useStaticQuery } from "gatsby"
 import React, { FC, HTMLAttributes } from "react"
 import { IAllArchivesQuery, IFileOrFolder } from "../../types"
 import { humanize } from "../../utils"
-import { ColumnSidebar } from "../ColumnSidebar"
+import { Sidebar } from "../Sidebar"
 import useBuildTree from "./../../hooks/useBuildTree"
 import * as SC from "./styles"
 
@@ -31,5 +31,5 @@ export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const tree = useBuildTree(archives, "/archives")
   const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
 
-  return <ColumnSidebar {...props}>{sortedTree.map(plantTree)}</ColumnSidebar>
+  return <Sidebar {...props}>{sortedTree.map(plantTree)}</Sidebar>
 }

src/components/ColumnHeader/index.tsx

@@ -1,112 +0,0 @@
-import React, { FC, Fragment } from "react"
-
-import ChevronUp from "../../icons/chevron-up.svg"
-import { Breadcrumb } from "../Breadcrumb"
-import { StackedAvatars } from "../StackedAvatars"
-import * as SC from "./styles"
-
-interface IColumnHeaderProps {
-  relativePath: string
-  basePath: string
-  title: string
-  authors?: Array<{
-    avatar: string
-    hash: string
-    name: string
-  }>
-  createdAt: string
-  timeToRead: number
-  recommendedReading?: string[]
-  externalResources?: string[]
-}
-
-function ExtraLink({
-  item,
-  external = false,
-}: {
-  item: string
-  external?: boolean
-}) {
-  const Inner = () => (
-    <Fragment>
-      <ChevronUp /> <SC.ExtraLinkText>{item}</SC.ExtraLinkText>
-    </Fragment>
-  )
-
-  if (external) {
-    return (
-      <SC.ExtraLinkExternal href={item} target="_blank">
-        <Inner />
-      </SC.ExtraLinkExternal>
-    )
-  }
-
-  return (
-    <SC.ExtraLinkInternal to={`/resources/${item}.md`}>
-      <Inner />
-    </SC.ExtraLinkInternal>
-  )
-}
-
-export const ColumnHeader: FC<IColumnHeaderProps> = ({
-  basePath,
-  relativePath,
-  title,
-  authors,
-  createdAt,
-  timeToRead,
-  recommendedReading,
-  externalResources,
-}) => {
-  const date = new Date(createdAt)
-  const month = date.toLocaleString("default", { month: "long" })
-  const day = date.getDate()
-  const year = date.getUTCFullYear()
-  const dateToHuman = `${month} ${day}, ${year}`
-
-  return (
-    <SC.ColumnHeaderWrapper>
-      <Breadcrumb relativePath={relativePath} basePath={basePath} />
-
-      <SC.Title>{title}</SC.Title>
-
-      <SC.Top>
-        {authors && (
-          <SC.Meta>
-            <StackedAvatars authors={authors} />
-            <SC.PopoverToggler>
-              {authors.length} contributor{authors.length > 1 && "s"}
-              <SC.Popover>
-                {authors
-                  .map(author => `${author.name}#${author.hash}`)
-                  .join(", ")}
-              </SC.Popover>
-            </SC.PopoverToggler>
-          </SC.Meta>
-        )}
-        {dateToHuman && <SC.Meta>{dateToHuman}</SC.Meta>}
-        <SC.Meta>
-          {timeToRead} minute{timeToRead !== 1 && "s"} read time
-        </SC.Meta>
-      </SC.Top>
-
-      {recommendedReading && (
-        <SC.RecommendedReading>
-          Recommended reading
-          {recommendedReading.map(item => {
-            return <ExtraLink key={item} item={item} />
-          })}
-        </SC.RecommendedReading>
-      )}
-
-      {externalResources && (
-        <SC.ExternalResources>
-          External Resources
-          {externalResources.map(item => {
-            return <ExtraLink key={item} item={item} external />
-          })}
-        </SC.ExternalResources>
-      )}
-    </SC.ColumnHeaderWrapper>
-  )
-}

src/components/ColumnHeader/styles.tsx

@@ -1,135 +0,0 @@
-import { Link } from "gatsby"
-import { darken, lighten } from "polished"
-import styled, { css } from "styled-components"
-import { fontFamily, modularScale } from "../../design/typography"
-
-export const ColumnHeaderWrapper = styled.div`
-  border-bottom: 1px solid #dbdbdb;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
-`
-
-export const Top = styled.div`
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 767px) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-`
-
-export const Title = styled.h1`
-  font-family: ${fontFamily.header};
-  font-size: ${modularScale(6).fontSize}px;
-  line-height: ${modularScale(6).lineHeight}px;
-  letter-spacing: -1.75px;
-  margin-top: 0;
-`
-
-export const Meta = styled.div`
-  display: flex;
-  align-items: center;
-
-  & + &::before {
-    content: "•";
-    margin: 0 8px;
-  }
-
-  @media screen and (max-width: 767px) {
-    & + & {
-      margin-top: 8px;
-    }
-
-    & + &::before {
-      display: none;
-    }
-  }
-`
-
-const ExtraLinks = styled.div`
-  margin-top: 16px;
-`
-
-export const RecommendedReading = styled(ExtraLinks)``
-
-export const ExternalResources = styled(ExtraLinks)``
-
-const extraLink = css`
-  display: flex;
-  align-items: center;
-  color: ${props => props.theme.main.link};
-  margin-top: 4px;
-  margin-left: 20px;
-  cursor: pointer;
-
-  &:hover {
-    color: ${props =>
-      props.theme.name === "dark"
-        ? lighten(0.15, props.theme.main.link)
-        : darken(0.15, props.theme.main.link)};
-  }
-
-  svg {
-    width: 14px;
-    flex: 0 0 14px;
-    transform: rotate(90deg);
-    margin-right: 6px;
-  }
-
-  svg path {
-    fill: ${props => props.theme.main.link};
-  }
-`
-
-export const ExtraLinkInternal = styled(Link)`
-  ${extraLink};
-`
-
-export const ExtraLinkExternal = styled.a`
-  ${extraLink};
-`
-
-export const ExtraLinkText = styled.div`
-  text-decoration: underline;
-`
-
-export const Popover = styled.div`
-  display: none;
-  position: absolute;
-  top: 100%;
-  margin-top: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  background: ${props =>
-    props.theme.name === "dark"
-      ? lighten(0.1, props.theme.main.background)
-      : darken(0.1, props.theme.main.background)};
-
-  &::before {
-    position: absolute;
-    left: 16px;
-    bottom: 100%;
-    content: "";
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 3.5px 4px 3.5px;
-    border-color: transparent transparent
-      ${props =>
-        props.theme.name === "dark"
-          ? lighten(0.1, props.theme.main.background)
-          : darken(0.1, props.theme.main.background)}
-      transparent;
-  }
-`
-
-export const PopoverToggler = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  &:hover ${Popover} {
-    display: block;
-  }
-`

src/components/ColumnLink/index.tsx

@@ -1,18 +0,0 @@
-import React, { FC } from "react"
-import * as SC from "./styles"
-
-interface IColumnLinkProps {
-  to: string
-}
-
-export const ColumnLink: FC<IColumnLinkProps> = ({ children, to }) => {
-  if (!to.match(/^(https?:\/\/)/)) {
-    return <SC.ColumnLinkInternal to={to}>{children}</SC.ColumnLinkInternal>
-  }
-
-  return (
-    <SC.ColumnLinkExternal href={to} target="_blank">
-      {children}
-    </SC.ColumnLinkExternal>
-  )
-}

src/components/Header/index.tsx

@@ -1,96 +1,112 @@
-import { Link } from "gatsby"
-import React, { FC, useLayoutEffect, useState } from "react"
-import { DiscordButton } from "../DiscordButton"
-import { Partner } from "../Partner"
-import { WavesBottom, WavesTop } from "../Waves"
+import React, { FC, Fragment } from "react"
+
+import ChevronUp from "../../icons/chevron-up.svg"
+import { Breadcrumb } from "../Breadcrumb"
+import { StackedAvatars } from "../StackedAvatars"
 import * as SC from "./styles"
 
 interface IHeaderProps {
-  isHome: boolean
+  relativePath: string
+  basePath: string
+  title: string
+  authors?: Array<{
+    avatar: string
+    hash: string
+    name: string
+  }>
+  createdAt: string
+  timeToRead: number
+  recommendedReading?: string[]
+  externalResources?: string[]
 }
 
-interface IMenuItemProps {
-  to: string
-}
+function ExtraLink({
+  item,
+  external = false,
+}: {
+  item: string
+  external?: boolean
+}) {
+  const Inner = () => (
+    <Fragment>
+      <ChevronUp /> <SC.ExtraLinkText>{item}</SC.ExtraLinkText>
+    </Fragment>
+  )
+
+  if (external) {
+    return (
+      <SC.ExtraLinkExternal href={item} target="_blank">
+        <Inner />
+      </SC.ExtraLinkExternal>
+    )
+  }
 
-const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
   return (
-    <SC.MenuItem
-      to={to}
-      activeClassName="active"
-      className={to === "/" ? "disabled" : ""}
-    >
-      <SC.MenuItemText>{children}</SC.MenuItemText>
-      <SC.MenuItemLine />
-    </SC.MenuItem>
+    <SC.ExtraLinkInternal to={`/resources/${item}.md`}>
+      <Inner />
+    </SC.ExtraLinkInternal>
   )
 }
 
-export const Header: FC<IHeaderProps> = ({ isHome }) => {
-  // Hack to force Particle.js to rerender
-  const [noop, setNoop] = useState(0)
-  useLayoutEffect(() => {
-    setNoop(prevState => prevState + 1)
-  }, [isHome])
+export const Header: FC<IHeaderProps> = ({
+  basePath,
+  relativePath,
+  title,
+  authors,
+  createdAt,
+  timeToRead,
+  recommendedReading,
+  externalResources,
+}) => {
+  const date = new Date(createdAt)
+  const month = date.toLocaleString("default", { month: "long" })
+  const day = date.getDate()
+  const year = date.getUTCFullYear()
+  const dateToHuman = `${month} ${day}, ${year}`
 
   return (
-    <SC.HeaderWrapper className={isHome ? "is-home" : ""}>
-      <WavesTop />
-      <SC.FadedBottomWave>
-        <WavesBottom />
-      </SC.FadedBottomWave>
+    <SC.HeaderWrapper>
+      <Breadcrumb relativePath={relativePath} basePath={basePath} />
 
-      <SC.StyledParticles
-        key={noop}
-        params={{
-          particles: {
-            number: { value: 5, density: { enable: true, value_area: 500 } },
-            color: { value: "#ffffff" },
-            opacity: {
-              value: 0.5,
-              random: false,
-              anim: { enable: false },
-            },
-            size: {
-              value: 36,
-              random: true,
-              anim: { enable: false },
-            },
-            line_linked: {
-              enable: false,
-            },
-            move: {
-              enable: true,
-              speed: 1.5,
-              direction: "top",
-              random: false,
-              straight: false,
-              out_mode: "out",
-              bounce: false,
-              attract: { enable: false },
-            },
-          },
-          retina_detect: true,
-        }}
-      />
-      <SC.InnerWrapper>
-        <SC.TitleWrapper>
-          <Link to="/">
-            <SC.Logo />
-          </Link>
-          <SC.Title>The Programmer's Hangout</SC.Title>
-        </SC.TitleWrapper>
-        <SC.Menu>
-          <MenuItem to="/about">about</MenuItem>
-          <MenuItem to="/rules">rules</MenuItem>
-          <MenuItem to="/">faq</MenuItem>
-          <MenuItem to="/">hotbot</MenuItem>
-          <MenuItem to="/resources">resources</MenuItem>
-          <MenuItem to="/archives">tech spotlights</MenuItem>
-        </SC.Menu>
-        <DiscordButton>join us</DiscordButton>
-        {isHome && <Partner />}
-      </SC.InnerWrapper>
+      <SC.Title>{title}</SC.Title>
+
+      <SC.Top>
+        {authors && (
+          <SC.Meta>
+            <StackedAvatars authors={authors} />
+            <SC.PopoverToggler>
+              {authors.length} contributor{authors.length > 1 && "s"}
+              <SC.Popover>
+                {authors
+                  .map(author => `${author.name}#${author.hash}`)
+                  .join(", ")}
+              </SC.Popover>
+            </SC.PopoverToggler>
+          </SC.Meta>
+        )}
+        {dateToHuman && <SC.Meta>{dateToHuman}</SC.Meta>}
+        <SC.Meta>
+          {timeToRead} minute{timeToRead !== 1 && "s"} read time
+        </SC.Meta>
+      </SC.Top>
+
+      {recommendedReading && (
+        <SC.RecommendedReading>
+          Recommended reading
+          {recommendedReading.map(item => {
+            return <ExtraLink key={item} item={item} />
+          })}
+        </SC.RecommendedReading>
+      )}
+
+      {externalResources && (
+        <SC.ExternalResources>
+          External Resources
+          {externalResources.map(item => {
+            return <ExtraLink key={item} item={item} external />
+          })}
+        </SC.ExternalResources>
+      )}
     </SC.HeaderWrapper>
   )
 }

src/components/Header/styles.tsx

@@ -1,192 +1,135 @@
 import { Link } from "gatsby"
-import Particles from "react-particles-js"
-import styled from "styled-components"
-import TPHLogo from "../../images/tph-logo.svg"
+import { darken, lighten } from "polished"
+import styled, { css } from "styled-components"
+import { fontFamily, modularScale } from "../../design/typography"
 
-export const HeaderWrapper = styled.header`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  position: relative;
-  min-height: auto;
-  background: #1f2a34;
-
-  &.is-home {
-    min-height: 100vh;
-    overflow: hidden;
-  }
+export const HeaderWrapper = styled.div`
+  border-bottom: 1px solid #dbdbdb;
+  padding-bottom: 32px;
+  margin-bottom: 32px;
 `
 
-export const TitleWrapper = styled.div`
+export const Top = styled.div`
   display: flex;
   align-items: center;
-  margin-bottom: 22px;
 
-  .is-home & {
+  @media screen and (max-width: 767px) {
     flex-direction: column;
     align-items: flex-start;
   }
 `
 
 export const Title = styled.h1`
-  margin: 0;
-  font-weight: 700;
-  font-size: 50px;
-  text-transform: uppercase;
-  line-height: 1;
-  color: #fff;
-  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-
-  .is-home & {
-    margin: 32px 0;
-    font-size: 88px;
-
-    @media screen and (max-width: 991px) {
-      font-size: 58px;
-    }
-
-    @media screen and (max-width: 767px) {
-      font-size: 32px;
-    }
-  }
+  font-family: ${fontFamily.header};
+  font-size: ${modularScale(6).fontSize}px;
+  line-height: ${modularScale(6).lineHeight}px;
+  letter-spacing: -1.75px;
+  margin-top: 0;
 `
 
-export const FadedBottomWave = styled.div`
-  position: absolute;
-  transform: translateY(100%);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  transition: opacity 0.5s, transform 0.5s;
-  opacity: 0;
-  pointer-events: none;
-
-  svg {
-    position: static;
-  }
-
-  .is-home & {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .is-home & svg {
-    position: static;
-  }
-`
-
-export const StyledParticles = styled(Particles)`
-  mask-image: -webkit-linear-gradient(
-    top,
-    rgba(0, 0, 0, 0) 5%,
-    rgba(0, 0, 0, 1) 25%,
-    rgba(0, 0, 0, 1) 75%,
-    rgba(0, 0, 0, 0) 95%
-  );
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-`
-
-export const InnerWrapper = styled.div`
-  width: 800px;
-  max-width: calc(100% - 64px);
-  padding: 32px;
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-`
-
-export const Logo = styled(TPHLogo)`
-  width: 70px;
-  margin: 0 15px 0 0;
-  position: relative;
-  z-index: 3;
-
-  .is-home & {
-    width: 98px;
-    margin-bottom: 0 0 10px 0;
-  }
-`
-
-export const Menu = styled.nav`
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-`
-
-export const MenuItemText = styled.div`
-  position: relative;
-  z-index: 5;
-`
-
-/* underline bar, getting animated through hover */
-export const MenuItemLine = styled.div`
-  position: absolute;
-  z-index: 4;
-  height: 2px;
-  width: 100%;
-  margin-top: -3px;
-  bottom: 0;
-  background: #fff;
-  transition: all 0.3s;
-`
-
-export const MenuItem = styled(Link)`
+export const Meta = styled.div`
   display: flex;
   align-items: center;
-  font-size: 22px;
-  text-decoration: none;
-  color: #fff;
-  position: relative;
-  transition: color 0.3s;
-  margin: 10px 20px 5px 0;
-  font-family: "Oxygen Mono";
 
-  &:hover {
-    color: #fff;
+  & + &::before {
+    content: "•";
+    margin: 0 8px;
   }
 
-  &:hover ${MenuItemLine} {
-    padding: 8px;
-    height: 100%;
-    background: #dd66a1;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
-    margin-left: -8px;
-    margin-bottom: -8px;
-    border-radius: 3px;
-  }
-
-  &.disabled {
-    cursor: default;
-    pointer-events: none;
-    opacity: 0.7;
-    color: #fff !important;
-  }
-
-  &.disabled ${MenuItemLine} {
-    bottom: 50%;
-    background: #fff !important;
-  }
-
-  &.active {
-    font-weight: 700;
-    color: #dd66a1;
-
-    ${MenuItemLine} {
-      background: #dd66a1;
+  @media screen and (max-width: 767px) {
+    & + & {
+      margin-top: 8px;
     }
 
-    &:hover {
-      color: #fff;
-    }
-
-    &:hover ${MenuItemLine} {
-      background: #dd66a1;
+    & + &::before {
+      display: none;
     }
   }
 `
+
+const ExtraLinks = styled.div`
+  margin-top: 16px;
+`
+
+export const RecommendedReading = styled(ExtraLinks)``
+
+export const ExternalResources = styled(ExtraLinks)``
+
+const extraLink = css`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.main.link};
+  margin-top: 4px;
+  margin-left: 20px;
+  cursor: pointer;
+
+  &:hover {
+    color: ${props =>
+      props.theme.name === "dark"
+        ? lighten(0.15, props.theme.main.link)
+        : darken(0.15, props.theme.main.link)};
+  }
+
+  svg {
+    width: 14px;
+    flex: 0 0 14px;
+    transform: rotate(90deg);
+    margin-right: 6px;
+  }
+
+  svg path {
+    fill: ${props => props.theme.main.link};
+  }
+`
+
+export const ExtraLinkInternal = styled(Link)`
+  ${extraLink};
+`
+
+export const ExtraLinkExternal = styled.a`
+  ${extraLink};
+`
+
+export const ExtraLinkText = styled.div`
+  text-decoration: underline;
+`
+
+export const Popover = styled.div`
+  display: none;
+  position: absolute;
+  top: 100%;
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  background: ${props =>
+    props.theme.name === "dark"
+      ? lighten(0.1, props.theme.main.background)
+      : darken(0.1, props.theme.main.background)};
+
+  &::before {
+    position: absolute;
+    left: 16px;
+    bottom: 100%;
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 3.5px 4px 3.5px;
+    border-color: transparent transparent
+      ${props =>
+        props.theme.name === "dark"
+          ? lighten(0.1, props.theme.main.background)
+          : darken(0.1, props.theme.main.background)}
+      transparent;
+  }
+`
+
+export const PopoverToggler = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &:hover ${Popover} {
+    display: block;
+  }
+`

src/components/HomeFooter/index.tsx

@@ -3,9 +3,9 @@ import packageJson from "../../../package.json"
 import { Container } from "../Container"
 import * as SC from "./styles"
 
-export const Footer: FC = () => {
+export const HomeFooter: FC = () => {
   return (
-    <SC.FooterWrapper>
+    <SC.HomeFooterWrapper>
       <Container>
         <p>
           © {new Date().getFullYear()}, Built with
@@ -14,6 +14,6 @@ export const Footer: FC = () => {
           <a href={packageJson.repository.url}>GitHub</a>
         </p>
       </Container>
-    </SC.FooterWrapper>
+    </SC.HomeFooterWrapper>
   )
 }

src/components/HomeFooter/styles.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components"
 
-export const FooterWrapper = styled.footer`
+export const HomeFooterWrapper = styled.footer`
   & a {
     display: inline;
     color: #0090d8;

src/components/HomeHeader/index.tsx

@@ -0,0 +1,96 @@
+import { Link } from "gatsby"
+import React, { FC, useLayoutEffect, useState } from "react"
+import { DiscordButton } from "../DiscordButton"
+import { HomePartner } from "../HomePartner"
+import { WavesBottom, WavesTop } from "../Waves"
+import * as SC from "./styles"
+
+interface IHomeHeaderProps {
+  isHome: boolean
+}
+
+interface IMenuItemProps {
+  to: string
+}
+
+const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
+  return (
+    <SC.MenuItem
+      to={to}
+      activeClassName="active"
+      className={to === "/" ? "disabled" : ""}
+    >
+      <SC.MenuItemText>{children}</SC.MenuItemText>
+      <SC.MenuItemLine />
+    </SC.MenuItem>
+  )
+}
+
+export const HomeHeader: FC<IHomeHeaderProps> = ({ isHome }) => {
+  // Hack to force Particle.js to rerender
+  const [noop, setNoop] = useState(0)
+  useLayoutEffect(() => {
+    setNoop(prevState => prevState + 1)
+  }, [isHome])
+
+  return (
+    <SC.HomeHeaderWrapper className={isHome ? "is-home" : ""}>
+      <WavesTop />
+      <SC.FadedBottomWave>
+        <WavesBottom />
+      </SC.FadedBottomWave>
+
+      <SC.StyledParticles
+        key={noop}
+        params={{
+          particles: {
+            number: { value: 5, density: { enable: true, value_area: 500 } },
+            color: { value: "#ffffff" },
+            opacity: {
+              value: 0.5,
+              random: false,
+              anim: { enable: false },
+            },
+            size: {
+              value: 36,
+              random: true,
+              anim: { enable: false },
+            },
+            line_linked: {
+              enable: false,
+            },
+            move: {
+              enable: true,
+              speed: 1.5,
+              direction: "top",
+              random: false,
+              straight: false,
+              out_mode: "out",
+              bounce: false,
+              attract: { enable: false },
+            },
+          },
+          retina_detect: true,
+        }}
+      />
+      <SC.InnerWrapper>
+        <SC.TitleWrapper>
+          <Link to="/">
+            <SC.Logo />
+          </Link>
+          <SC.Title>The Programmer's Hangout</SC.Title>
+        </SC.TitleWrapper>
+        <SC.Menu>
+          <MenuItem to="/about">about</MenuItem>
+          <MenuItem to="/rules">rules</MenuItem>
+          <MenuItem to="/">faq</MenuItem>
+          <MenuItem to="/">hotbot</MenuItem>
+          <MenuItem to="/resources">resources</MenuItem>
+          <MenuItem to="/archives">tech spotlights</MenuItem>
+        </SC.Menu>
+        <DiscordButton>join us</DiscordButton>
+        {isHome && <HomePartner />}
+      </SC.InnerWrapper>
+    </SC.HomeHeaderWrapper>
+  )
+}

src/components/HomeHeader/styles.tsx

@@ -0,0 +1,192 @@
+import { Link } from "gatsby"
+import Particles from "react-particles-js"
+import styled from "styled-components"
+import TPHLogo from "../../images/tph-logo.svg"
+
+export const HomeHeaderWrapper = styled.header`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  min-height: auto;
+  background: #1f2a34;
+
+  &.is-home {
+    min-height: 100vh;
+    overflow: hidden;
+  }
+`
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 22px;
+
+  .is-home & {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`
+
+export const Title = styled.h1`
+  margin: 0;
+  font-weight: 700;
+  font-size: 50px;
+  text-transform: uppercase;
+  line-height: 1;
+  color: #fff;
+  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+
+  .is-home & {
+    margin: 32px 0;
+    font-size: 88px;
+
+    @media screen and (max-width: 991px) {
+      font-size: 58px;
+    }
+
+    @media screen and (max-width: 767px) {
+      font-size: 32px;
+    }
+  }
+`
+
+export const FadedBottomWave = styled.div`
+  position: absolute;
+  transform: translateY(100%);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.5s, transform 0.5s;
+  opacity: 0;
+  pointer-events: none;
+
+  svg {
+    position: static;
+  }
+
+  .is-home & {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .is-home & svg {
+    position: static;
+  }
+`
+
+export const StyledParticles = styled(Particles)`
+  mask-image: -webkit-linear-gradient(
+    top,
+    rgba(0, 0, 0, 0) 5%,
+    rgba(0, 0, 0, 1) 25%,
+    rgba(0, 0, 0, 1) 75%,
+    rgba(0, 0, 0, 0) 95%
+  );
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`
+
+export const InnerWrapper = styled.div`
+  width: 800px;
+  max-width: calc(100% - 64px);
+  padding: 32px;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+`
+
+export const Logo = styled(TPHLogo)`
+  width: 70px;
+  margin: 0 15px 0 0;
+  position: relative;
+  z-index: 3;
+
+  .is-home & {
+    width: 98px;
+    margin-bottom: 0 0 10px 0;
+  }
+`
+
+export const Menu = styled.nav`
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`
+
+export const MenuItemText = styled.div`
+  position: relative;
+  z-index: 5;
+`
+
+/* underline bar, getting animated through hover */
+export const MenuItemLine = styled.div`
+  position: absolute;
+  z-index: 4;
+  height: 2px;
+  width: 100%;
+  margin-top: -3px;
+  bottom: 0;
+  background: #fff;
+  transition: all 0.3s;
+`
+
+export const MenuItem = styled(Link)`
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  text-decoration: none;
+  color: #fff;
+  position: relative;
+  transition: color 0.3s;
+  margin: 10px 20px 5px 0;
+  font-family: "Oxygen Mono";
+
+  &:hover {
+    color: #fff;
+  }
+
+  &:hover ${MenuItemLine} {
+    padding: 8px;
+    height: 100%;
+    background: #dd66a1;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
+    margin-left: -8px;
+    margin-bottom: -8px;
+    border-radius: 3px;
+  }
+
+  &.disabled {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.7;
+    color: #fff !important;
+  }
+
+  &.disabled ${MenuItemLine} {
+    bottom: 50%;
+    background: #fff !important;
+  }
+
+  &.active {
+    font-weight: 700;
+    color: #dd66a1;
+
+    ${MenuItemLine} {
+      background: #dd66a1;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+
+    &:hover ${MenuItemLine} {
+      background: #dd66a1;
+    }
+  }
+`

src/components/HomeMobileHeader/index.tsx

@@ -1,18 +1,18 @@
 import React, { FC } from "react"
 import * as SC from "./styles"
 
-interface IMobileHeaderProps {
+interface IHomeMobileHeaderProps {
   openMenu: () => void
 }
 
-export const MobileHeader: FC<IMobileHeaderProps> = ({ openMenu }) => {
+export const HomeMobileHeader: FC<IHomeMobileHeaderProps> = ({ openMenu }) => {
   return (
-    <SC.MobileHeaderWrapper>
+    <SC.HomeMobileHeaderWrapper>
       <SC.LogoWrapper>
         <SC.StyledLogo />
       </SC.LogoWrapper>
       Resources
       <SC.Burger onClick={openMenu} />
-    </SC.MobileHeaderWrapper>
+    </SC.HomeMobileHeaderWrapper>
   )
 }

src/components/HomeMobileHeader/styles.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components"
 import { fontFamily } from "../../design/typography"
 import Logo from "../../images/tph-logo.svg"
 
-export const MobileHeaderWrapper = styled.div`
+export const HomeMobileHeaderWrapper = styled.div`
   z-index: 50;
   background: ${props => transparentize(0.2, props.theme.main.background)};
   position: fixed;

src/components/HomePartner/index.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from "react"
 import * as SC from "./styles"
 
-export const Partner: FC = () => {
+export const HomePartner: FC = () => {
   return (
-    <SC.PartnerWrapper>
+    <SC.HomePartnerWrapper>
       Member of
       <SC.StyledJetBrainsLogo alt="JetBrains" />
       Supported user groups
-    </SC.PartnerWrapper>
+    </SC.HomePartnerWrapper>
   )
 }

src/components/HomePartner/styles.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components"
 import JetBrainsLogo from "../../images/jetbrains-logo.svg"
 
-export const PartnerWrapper = styled.div`
+export const HomePartnerWrapper = styled.div`
   margin-top: 32px;
   display: flex;
   align-items: center;

src/components/Link/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from "react"
+import * as SC from "./styles"
+
+interface ILinkProps {
+  to: string
+}
+
+export const Link: FC<ILinkProps> = ({ children, to }) => {
+  if (!to.match(/^(https?:\/\/)/)) {
+    return <SC.LinkInternal to={to}>{children}</SC.LinkInternal>
+  }
+
+  return (
+    <SC.LinkExternal href={to} target="_blank">
+      {children}
+    </SC.LinkExternal>
+  )
+}

src/components/Link/styles.tsx

@@ -15,10 +15,10 @@ const linkStyle = css`
   }
 `
 
-export const ColumnLinkInternal = styled(Link)`
+export const LinkInternal = styled(Link)`
   ${linkStyle}
 `
 
-export const ColumnLinkExternal = styled.a`
+export const LinkExternal = styled.a`
   ${linkStyle}
 `

src/components/ResourcesSidebar/index.tsx

@@ -3,7 +3,7 @@ import React, { FC, HTMLAttributes, memo, useState } from "react"
 import TriangleDown from "../../icons/triangle-down.svg"
 import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
 import { humanize } from "../../utils"
-import { ColumnSidebar } from "../ColumnSidebar"
+import { Sidebar } from "../Sidebar"
 import useBuildTree from "./../../hooks/useBuildTree"
 import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
@@ -96,8 +96,8 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
 
   return (
-    <ColumnSidebar {...props}>
+    <Sidebar {...props}>
       {sortedTree.map((node, index) => plantTree(node, index, true))}
-    </ColumnSidebar>
+    </Sidebar>
   )
 }

src/components/Sidebar/index.tsx

@@ -18,13 +18,13 @@ const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
   )
 }
 
-export const ColumnSidebar: FC<
+export const Sidebar: FC<
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 > = props => {
   const { children, ...restProps } = props
 
   return (
-    <SC.ColumnSidebarWrapper {...restProps}>
+    <SC.SidebarWrapper {...restProps}>
       <Scrollbar>
         <Link to="/">
           <Banner />
@@ -44,6 +44,6 @@ export const ColumnSidebar: FC<
           <ThemeToggler />
         </SC.Inner>
       </Scrollbar>
-    </SC.ColumnSidebarWrapper>
+    </SC.SidebarWrapper>
   )
 }

src/components/Sidebar/styles.tsx

@@ -1,7 +1,7 @@
 import { Link } from "gatsby"
 import styled from "styled-components"
 
-export const ColumnSidebarWrapper = styled.div`
+export const SidebarWrapper = styled.div`
   box-sizing: border-box;
   flex: 0 0 320px;
   background: ${props => props.theme.sidebar.background};