Added first part portfolio

.editorconfig

@@ -0,0 +1,18 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -5,14 +5,17 @@
   "dependencies": {
     "@carbon/icons-react": "^10.9.1",
     "@carbon/themes": "^10.10.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.1",
+    "@testing-library/user-event": "^10.0.0",
     "carbon-components": "^10.10.1",
     "carbon-components-react": "^7.10.1",
+    "dotenv": "^8.2.0",
+    "github-pages-deploy-action": "^3.3.2",
     "node-sass": "^4.13.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-icons": "^3.9.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "styled-components": "^5.0.1"

src/App.js

@@ -1,26 +1,21 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState, useEffect } from "react";
+import Pages from "./pages";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  const [user, setUser] = useState(null);
+  useEffect(() => {
+    fetch(process.env.REACT_APP_URL)
+      .then(res => res.json())
+      .then(user => {
+        setUser(user);
+      });
+  }, []);
+
+  if (!user) {
+    return <div />;
+  }
+
+  return <Pages user={user} />;
 }
 
 export default App;

src/components/Layout/Layout.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Sidebar from "../Sidebar";
+import UserHeader from "../UserHeader";
+import MobileNav from "../MobileNav";
+
+import { StyledContent } from "./styles";
+
+const Layout = ({ user, children }) => {
+  return (
+    <>
+      <MobileNav />
+      <Sidebar />
+      <StyledContent>
+        <UserHeader user={user} />
+        <div>{children}</div>
+      </StyledContent>
+    </>
+  );
+};
+
+export default Layout;

src/components/Layout/index.js

@@ -0,0 +1,2 @@
+import Layout from "./Layout";
+export default Layout;

src/components/Layout/styles.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { Content } from "carbon-components-react/lib/components/UIShell";
+
+export const StyledContent = styled(Content)`
+  min-height: 100vh;
+  @media (max-width: 640px) {
+    margin-left: 0 !important;
+  }
+`;

src/components/MobileNav/MobileNav.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { User32, Code32, Portfolio32, Education32 } from "@carbon/icons-react";
+
+import { Container, Spacer, NavWrapper, NavButton, NavLink } from "./styles";
+
+const MobileNav = () => {
+  return (
+    <Container>
+      <Spacer />
+      <NavWrapper>
+        <NavLink to="/">
+          <NavButton
+            hasIconOnly
+            renderIcon={User32}
+            iconDescription="Me"
+            tooltipPosition="bottom"
+          />
+        </NavLink>
+        <NavLink to="/projects">
+          <NavButton
+            hasIconOnly
+            renderIcon={Code32}
+            iconDescription="Projects"
+            tooltipPosition="bottom"
+          />
+        </NavLink>
+        <NavLink to="/work">
+          <NavButton
+            hasIconOnly
+            renderIcon={Portfolio32}
+            iconDescription="Work"
+            tooltipPosition="bottom"
+          />
+        </NavLink>
+        <NavLink to="/education">
+          <NavButton
+            hasIconOnly
+            renderIcon={Education32}
+            iconDescription="Education"
+            tooltipPosition="bottom"
+          />
+        </NavLink>
+      </NavWrapper>
+    </Container>
+  );
+};
+
+export default MobileNav;

src/components/MobileNav/index.js

@@ -0,0 +1,2 @@
+import MobileNav from "./MobileNav";
+export default MobileNav;

src/components/MobileNav/styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import Button from "carbon-components-react/lib/components/Button";
+
+export const Container = styled.div`
+  display: none;
+  @media (max-width: 640px) {
+    display: block;
+  }
+`;
+
+export const Spacer = styled.div`
+  height: 48px;
+`;
+
+export const NavWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  z-index: 1;
+`;
+
+export const NavLink = styled(Link)`
+  width: 25%;
+`;
+
+export const NavButton = styled(Button)`
+  width: 100%;
+  justify-content: center;
+`;

src/components/Sidebar/Sidebar.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+  SideNavItems,
+  SideNavLink
+} from "carbon-components-react/lib/components/UIShell";
+import { User32, Code32, Portfolio32, Education32 } from "@carbon/icons-react";
+
+import { StyledSideNav } from "./styles";
+
+const items = [
+  { name: "Me", path: "/" },
+  { name: "Projects", path: "/projects" },
+  { name: "Work", path: "/work" },
+  { name: "Education", path: "/education" }
+];
+
+const Sidebar = () => {
+  const location = useLocation();
+
+  return (
+    <StyledSideNav
+      isFixedNav
+      expanded
+      isChildOfHeader={false}
+      aria-label="Side navigation"
+    >
+      <SideNavItems>
+        {items.map(i => (
+          <SideNavLink
+            isActive={
+              location.pathname === "/" && i.path === "/"
+                ? true
+                : location.pathname === i.path
+            }
+            element={Link}
+            to={i.path}
+            key={i.name}
+            renderIcon={
+              i.name === "Me"
+                ? User32
+                : i.name === "Projects"
+                ? Code32
+                : i.name === "Work"
+                ? Portfolio32
+                : Education32
+            }
+          >
+            {i.name}
+          </SideNavLink>
+        ))}
+      </SideNavItems>
+    </StyledSideNav>
+  );
+};
+
+export default Sidebar;

src/components/Sidebar/index.js

@@ -0,0 +1,2 @@
+import Sidebar from "./Sidebar";
+export default Sidebar;

src/components/Sidebar/styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { SideNav } from "carbon-components-react/lib/components/UIShell";
+
+export const StyledSideNav = styled(SideNav)`
+  @media (max-width: 640px) {
+    display: none;
+  }
+`;

src/components/UserHeader/UserHeader.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import { ArrowRight16 } from "@carbon/icons-react";
+
+import { HeaderContainer, Header, Image, ViewResumeLink } from "./styles";
+
+const UserHeader = ({ user }) => {
+  const location = useLocation();
+
+  return (
+    <HeaderContainer isHome={location.pathname === "/"}>
+      <Header>
+        <Image src={user.basics.picture} />
+        <div>
+          <h2>{user.basics.name}</h2>
+          <h4>
+            <a
+              href={`https://gitconnected.com/${user.basics.username}`}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              @{user.basics.username}
+            </a>
+          </h4>
+          <p>{user.basics.label}</p>
+          <p>Coding in {user.basics.region}</p>
+          <p>
+            {user.basics.yearsOfExperience} years of experience as a developer
+          </p>
+          <p>{user.basics.headline}</p>
+        </div>
+      </Header>
+      <div>
+        <ViewResumeLink
+          href={`https://gitconnected.com/${user.basics.username}/resume`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span>View Résumé</span>
+          <ArrowRight16 />
+        </ViewResumeLink>
+      </div>
+    </HeaderContainer>
+  );
+};
+
+export default UserHeader;

src/components/UserHeader/index.js

@@ -0,0 +1,2 @@
+import UserHeader from "./UserHeader";
+export default UserHeader;