Update and added Thoughts page

Author: PRbsas

.next/bundles/pages/_document.json

@@ -1,12 +1,17 @@
 
-# prbsas personal website 
+# prbsas personal website
+
+The theme changes on click (font and background colors change)
+
 
 ### Made with:
 
 - react
 - next.js
-- styled-components and theming
+- styled-components and theming  
 
-Work in progress
+### Deployed with:
 
+- now
 
+Work in progress

.next/commons.js

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import Wrapper from '../components/Wrapper'
 
 const Name = styled.h2`
-  font-weight: 100;
+  font-weight: 500;
   padding-left: 15px;
   ${media.phone`
       font-size: 24px;
@@ -14,7 +14,7 @@ const Name = styled.h2`
 `
 
 const P = styled.p`
-  font-weight: 100;
+  font-weight: 500;
   padding-left: 15px;
   max-width: 60%;
   ${media.phone`
@@ -27,7 +27,7 @@ const P = styled.p`
 `
 
 const List = styled.p`
-  font-weight: 100;
+  font-weight: 500;
   font-size: 16px;
   padding-left: 15px;
   margin-top: 0;
@@ -41,12 +41,14 @@ const List = styled.p`
 export default () => (
   <Wrapper>
     <Name>Paula Ramirez Pitzen <strong>·</strong></Name>
-    <P>I'm an architect and self-taught developer. I think of myself as a designer developer hybrid.</P>
-    <P>For the past year I've been teaching myself how to code. I believe this has greatly sharpen my problem solving skills and my ability to learn while creating.</P>
-    <P>I enjoy exploring solutions and believe design and development go together. The details make the design.</P>
-    <P>Some of the <strong>skills</strong> I've developed are:</P>
-    <List>· Html · CSS · Responsive Web Design </List>
-    <List>· JavaScript · ES6 · ReactJS</List>
-    <List>· Git · GitHub · RESTful API</List>
+    <P>I'm an architect and web developer. I think of myself as a designer developer hybrid.</P>
+    <P>For the past year I've been studying web development, while researching and experimenting with different languages, frameworks and tools. This has greatly sharpened my problem solving skills and my ability to learn while creating.</P>
+    <P>I enjoy building solutions and believe design and development go together. The details make the design.</P>
+    <P>My web development experience includes:</P>
+    <List>· Html5 · CSS3 · Responsive Web Design </List>
+    <List>· JavaScript · ES6 · React  · styled-components · create-react-app</List>
+    <List>· Ruby · OOP</List>
+    <List>· Git · GitHub · APIs</List>
+    <List>· Next.js · Now</List>
   </Wrapper>
 )

README.md

@@ -21,7 +21,7 @@ const MadeBy = styled.p`
 export default () => (
   <Wrapper>
     <MadeBy>This site was built with react, next.js and
-      styled-components by <strong>prbsas · 2017</strong>
+      styled-components. Deployed with now by <strong>prbsas · 2017</strong>
     </MadeBy>
   </Wrapper>
 )

components/About.js

@@ -31,7 +31,7 @@ const Title = styled.h1`
 `
 const Name = styled.h2`
   margin: 0 auto;
-  font-weight: 100;
+  font-weight: 500;
   padding-left: 15px;
   ${media.phone`
       font-size: 24px;
@@ -40,7 +40,7 @@ const Name = styled.h2`
     `}
 `
 const Who = styled.p`
-  font-weight: 100;
+  font-weight: 500;
   margin-top: 0;
   padding-left: 15px;
   ${media.phone`
@@ -55,7 +55,7 @@ export default ({ children }) => (
   <Wrapper>
     <Title>prbsas.</Title>
     <Name>Paula Ramirez Pitzen</Name>
-    <Who>Architect and self-taught Frontend Developer based in NYC.</Who>
+    <Who>Architect and Web Developer based in NYC.</Who>
     { children }
   </Wrapper>
 )

components/Footer.js

@@ -6,7 +6,7 @@ import Wrapper from '../components/Wrapper'
 const A = styled.a`
   text-decoration: none;
   color: inherit;
-  font-weight: 400;
+  font-weight: 500;
   padding-top: 20px;
   padding-left: 15px;
   padding-right: 10px;
@@ -39,5 +39,6 @@ export default () => (
     <A href='https://www.linkedin.com/in/pramirezpitzen' target='_blank' rel='noopener'>LinkedIn</A>
     <A href='mailto:paularamirezpitzen@gmail.com'>Email</A>
     <Link prefetch href='/about'><A>· About</A></Link>
+    <Link prefetch href='/thoughts'><A>· Thoughts</A></Link>
   </Wrapper>
 )

components/Main.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from 'styled-components'
+import { media } from '../utils/styleUtils'
+import Link from 'next/link'
+import Wrapper from '../components/Wrapper'
+import { thoughts } from '../data/thoughts.json'
+
+const Title = styled.h3`
+  cursor: pointer;
+  margin: 0 auto;
+  font-size: 32px;
+  font-weight: 400;
+
+  &:hover {
+    font-weight: 800;
+  }
+
+  ${media.phone`
+      padding-left: 50px;
+    `}
+`
+
+export default () => (
+  <Wrapper>
+      {
+        thoughts.map(({ id, title }) => (
+          <Thoughts
+            id={id}
+            key={id}
+            title={title}
+          />
+        ))
+      }
+  </Wrapper>
+)
+
+const Thoughts = ({ id, title }) => (
+  <Link href={`/thoughts/${id}`}><Title>{ title }</Title></Link>
+)

components/Nav.js

@@ -98,7 +98,7 @@
       "id": "personal-website",
       "title": "This website",
       "description": "This website was made with React and Next.js. It uses styled-components with theming. Click anywhere on the page and the theme changes. Deployed with Now.",
-      "githubLink": "/",
+      "githubLink": "https://github.com/PRbsas/prbsas",
       "demoLink": "/"
     }
   ],

components/Thoughts.js

@@ -0,0 +1,16 @@
+{
+  "thoughts": [
+    {
+      "id": "resources",
+      "title": "Resources"
+    },
+    {
+      "id": "how-I-built-this-website",
+      "title": "How I built this website"
+    },
+    {
+      "id": "another-post",
+      "title": "Another post"
+    }
+  ]
+}

data/projects.json

@@ -0,0 +1,12 @@
+import React from 'react'
+import Head from 'next/head'
+import Page from '../components/Page'
+import Dot from '../components/Dot'
+import Thoughts from '../components/Thoughts'
+
+export default () => (
+  <Page>
+    <Dot />
+    <Thoughts />
+  </Page>
+)