Merge pull request #2 from petertonysmith94/feature/icons

Feature/icons

src/app/app-content.styles.ts

@@ -30,11 +30,6 @@ export const HeroWrapper = styled.div`
   }
 `
 
-export const HeroImageWrapper = styled.img`
-  width: 200px;
-  height: 200px;
-`
-
 export const SocialsWrapper = styled.div`
   display: flex;
   margin: 4px;

src/app/app.tsx

@@ -1,8 +1,40 @@
-import { ThemeProvider } from "styled-components";
+import { ThemeProvider, useTheme } from "styled-components";
 import { GlobalReset, GlobalStyle } from "../components/global-style";
 import { createTheme } from "../theme/theme";
-import { AppContent } from "./app-content";
+import { Pages, MarkdownPage } from "../components/page";
+import { Socials } from "../components/socials";
+import { config } from "../config";
+import { HomeWrapper, HeroWrapper, Divider, SocialsWrapper } from "./app-content.styles";
 
+const AppContent = () => {
+  const theme = useTheme();
+
+  const { logo: Logo, socials } = config;
+
+  return (
+    <HomeWrapper>
+      <HeroWrapper>
+        <Logo color={theme.accent} />
+        <SocialsWrapper>
+          <Socials
+            socials={socials}
+            color={theme.accent}
+          />
+        </SocialsWrapper>
+      </HeroWrapper>
+
+      <Divider />
+
+      <Pages>
+        <MarkdownPage children={`# Profile`} />
+        <MarkdownPage children={`# Experience`} />
+        <MarkdownPage children={`# Projects`} />
+        <MarkdownPage children={`# Contact`} />
+      </Pages>
+    </HomeWrapper>
+  );
+}
+
 export const App = () => {
   const mode = 'dark';
   const theme = createTheme(mode);