diff --git a/README.md b/README.md index 4b1ede1..48baa8c 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -This is my portfolio website, a static React site with a combination of Ant Design components and custom CSS. I started with create-react-app, but I quickly 'ejected' so I could have more control over the config. \ No newline at end of file +This is my portfolio website, a static React site with mostly custom CSS and a few Ant Design components. I started with create-react-app, but I quickly 'ejected' so I could have more control over the config. + +Check out the live site: [https://paulhoskinson.surge.sh/](https://paulhoskinson.surge.sh/) diff --git a/src/App.css b/src/App.css index 327e51e..bafec3f 100644 --- a/src/App.css +++ b/src/App.css @@ -9,18 +9,6 @@ } } -/* .App-layout { -} */ - -/* .App-logo { - width: 120px; - height: 31px; - background: #333; - border-radius: 6px; - margin: 16px 24px 16px 0; - float: left; -} */ - .App-home { font-family: 'Kanit', sans-serif; font-size: 2em; @@ -36,8 +24,8 @@ } .App-nav-menu { - line-height: 64px; - margin-left: -48px; + line-height: 64px; + margin-left: -48px; } .App-content { @@ -47,8 +35,7 @@ .App-title-divider { background-color: #fdd475; - height: 0px; - /* height: 0px; */ + height: 0px; margin: 0 auto; } diff --git a/src/Contact.css b/src/Contact.css index 69bd9ff..7bcd3b5 100644 --- a/src/Contact.css +++ b/src/Contact.css @@ -1,5 +1,5 @@ .Contact-outer-div { - margin-bottom: 30px; + margin-bottom: 50px; } .Contact-email { diff --git a/src/Introduction.css b/src/Introduction.css index 5feaa58..5057df0 100644 --- a/src/Introduction.css +++ b/src/Introduction.css @@ -19,12 +19,6 @@ border-right: 10px solid #fdd475; } -/* @media screen and (max-width: 490px) { - .Introduction-text-content { - border: 0; - } -} */ - .Introduction-main-title { text-align: center; font-size: 3em; @@ -42,7 +36,6 @@ .Introduction-description { text-align: center; font-size: 1.25em; - /* color: #c5beba; */ color: #92aac7; } @@ -53,14 +46,12 @@ margin-top: 20px; max-width: 470px; text-align: center; - /* font-size: 1.4em; */ line-height: 1.7em; } .Introduction-side-image-div { margin: 0; padding: 0; - /* border: 1px solid grey; */ height: 340px; width: 612px; background-image: url('/trees.jpg'); diff --git a/src/Projects.css b/src/Projects.css index 52d6a0e..6d23ec8 100644 --- a/src/Projects.css +++ b/src/Projects.css @@ -2,6 +2,13 @@ margin: 10px 0; } +.Projects-blurb { + font-size: 1.1em; + margin: 0 auto; + max-width: 660px; + padding: 5px; +} + .Projects-list-div { display: flex; flex-flow: row wrap; @@ -19,19 +26,15 @@ display: flex; flex-flow: column nowrap; align-items: center; - /* border: 1px solid grey; */ width: 278px; margin: 10px 10px; padding: 10px; transition: all 0.2s ease; border-radius: 10px; - /* border: 10px solid white; */ } .Projects-item-div:hover { - /* background-color: #f4cc70; */ background-color: #F7D994; - /* border: 10px solid #fbcd4d; */ } .Projects-title { @@ -44,7 +47,6 @@ .Projects-thumbnail { max-width: 256px; border: 1px solid #ccc; - /* border-radius: 2px; */ } .Projects-description { diff --git a/src/Projects.jsx b/src/Projects.jsx index e88d6e4..a266c10 100644 --- a/src/Projects.jsx +++ b/src/Projects.jsx @@ -103,23 +103,19 @@ const projectList = [ }, ] -// const handleItemClick = (e) => { -// e.preventDefault() -// window.location = e.currentTarget.dataset.url -// } - const Projects = () => (
+
+ Check out some of my projects below. + They range from simple Javascript demos to full-stack + React + Redux applications with a Node.js backend and MongoDB database. +
{ projectList.length > 0 && ( projectList.map(project => (
{
) + const HeaderLineSpacer = () => ( +
+
+
+ ) + return (
- +