diff --git a/images/Epicodus.png b/images/Epicodus.png
new file mode 100644
index 000000000..9f2ccbbc4
Binary files /dev/null and b/images/Epicodus.png differ
diff --git a/images/ada-logo.png b/images/ada-logo.png
new file mode 100644
index 000000000..aa5c56709
Binary files /dev/null and b/images/ada-logo.png differ
diff --git a/images/bear-latte.jpg b/images/bear-latte.jpg
new file mode 100644
index 000000000..b6de3be96
Binary files /dev/null and b/images/bear-latte.jpg differ
diff --git a/images/finn.jpg b/images/finn.jpg
new file mode 100644
index 000000000..33f5e4771
Binary files /dev/null and b/images/finn.jpg differ
diff --git a/images/github-logo.png b/images/github-logo.png
new file mode 100644
index 000000000..2a0d4dddf
Binary files /dev/null and b/images/github-logo.png differ
diff --git a/images/gmail-logo.png b/images/gmail-logo.png
new file mode 100644
index 000000000..e38d62a7c
Binary files /dev/null and b/images/gmail-logo.png differ
diff --git a/images/hanging-heart-latte.jpg b/images/hanging-heart-latte.jpg
new file mode 100644
index 000000000..2deb6e696
Binary files /dev/null and b/images/hanging-heart-latte.jpg differ
diff --git a/images/kitty.jpg b/images/kitty.jpg
new file mode 100644
index 000000000..82ed48a4e
Binary files /dev/null and b/images/kitty.jpg differ
diff --git a/images/linkedin-logo.png b/images/linkedin-logo.png
new file mode 100644
index 000000000..5872828cf
Binary files /dev/null and b/images/linkedin-logo.png differ
diff --git a/images/profile-pic.jpg b/images/profile-pic.jpg
new file mode 100644
index 000000000..643fbda8f
Binary files /dev/null and b/images/profile-pic.jpg differ
diff --git a/images/profile.jpg b/images/profile.jpg
new file mode 100644
index 000000000..cf6a89a41
Binary files /dev/null and b/images/profile.jpg differ
diff --git a/images/proj-meowspace.jpg b/images/proj-meowspace.jpg
new file mode 100644
index 000000000..831e7aea1
Binary files /dev/null and b/images/proj-meowspace.jpg differ
diff --git a/images/proj-pizza.jpg b/images/proj-pizza.jpg
new file mode 100644
index 000000000..7303b86a1
Binary files /dev/null and b/images/proj-pizza.jpg differ
diff --git a/images/proj-port.jpg b/images/proj-port.jpg
new file mode 100644
index 000000000..88d79658f
Binary files /dev/null and b/images/proj-port.jpg differ
diff --git a/images/proj-riley.jpg b/images/proj-riley.jpg
new file mode 100644
index 000000000..f054880c8
Binary files /dev/null and b/images/proj-riley.jpg differ
diff --git a/images/tulip-latte.jpg b/images/tulip-latte.jpg
new file mode 100644
index 000000000..9bad43635
Binary files /dev/null and b/images/tulip-latte.jpg differ
diff --git a/images/wedding.jpg b/images/wedding.jpg
new file mode 100644
index 000000000..9f1c9062c
Binary files /dev/null and b/images/wedding.jpg differ
diff --git a/pages/about.html b/pages/about.html
new file mode 100644
index 000000000..807454991
--- /dev/null
+++ b/pages/about.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+ ©2017 Sara Frandsen | Creative Commons License
+
+
+ Gmail logo credit to IconBandaar team via Creative Commons license. LinkedIn logo and GitHub logo credit to Just UI with author's permission.
+
+
+
+
diff --git a/pages/code-journal.html b/pages/code-journal.html
new file mode 100644
index 000000000..0ce7277d1
--- /dev/null
+++ b/pages/code-journal.html
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+ Jan
+
+
+
+ The first non-holiday monday of the new year is where my little programming journey begins, at Epicodus. Epicodus is a Portland-based bootcamp with different tracks to choose from, with it's defining characterist its focus on pair programming. I was in the C# track, and, with one of my close friends, started a few rough weeks of HTML, CSS, and JavaScript.
+
+
+
+
+
+ Feb
+
+
+ Turns out pair programming as the only means of education does not jive with me! Although I found the material at Epicodus interesting, it was very quickly obvious the teaching style just did not work for my learning style. On February 13, I left the program.
+
+
+ On February 16, I applied to Ada.
+
+
+
+
+
+ April
+
+
+
+ It's the middle of April. I check my email. I see it's from Ada Developers Academy. I read it. My heart stopped.
+
+
+ I. WAS. ACCEPTED!
+
+
+
+
+
+ May
+
+
+
+ On May 12, Jamey and I have our wedding reception with friends and family from around the world. It was the second-most magical day of my life, the first being our actual elopment last August at the Seattle Municipal Courthouse.
+
+
+ Jamey has been my number one supporter in my education and pursuit of a career in programming. He has taken on so many extra responsibilities and costs for us to make sure I can get through this program.
+
+
+
+
+
+ August
+
+
+ It's finally here! The program has finally started! I was very nervous for the first day and could hardly sleep. As soon as I stepped in, though, I knew I was in the right place. The folks around me were immediately welcoming, even when they looked just as nervous as I felt. There was a buzz among the new students.
+
+
+
+
+
+ September
+
+
+
+
+
+
+
+
+
+
+ After several years in coffee, I finally quit my barista job. I just couldn't handle fulltime school and partime work.
+
+
+ I love coffee. I love the history of it, the science of it, the social and community aspects of it. From growing to harvesting to processing to roasting to brewing, I love it all.
+
+
+ Dang it, though. I am so glad to be out of the service industry! So glad to be able to focus on school.
+
+
+
+
+
+
+
+ ©2017 Sara Frandsen | Creative Commons License
+
+
+ Feel free to contact me with any questions about this webpage, specialty coffee, puppies, or bad haircuts
+
+
+
+
diff --git a/pages/portfolio.html b/pages/portfolio.html
new file mode 100644
index 000000000..c6d7c311e
--- /dev/null
+++ b/pages/portfolio.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+ ©2017 Sara Frandsen | Creative Commons License
+
+
+ Feel free to contact me with any questions about this webpage, specialty coffee, puppies, or bad haircuts
+
+
+
+
diff --git a/stylesheets/about.css b/stylesheets/about.css
new file mode 100644
index 000000000..456c6bd2a
--- /dev/null
+++ b/stylesheets/about.css
@@ -0,0 +1,48 @@
+/*********** BODY ***********/
+.about {
+ background-color: #009FB7;
+}
+
+/*********** MAIN ***********/
+main.about {
+ background-color: #FED766;
+}
+
+div.about-wrapper {
+ display: flex; /* flex display */
+ justify-content: space-between; /* left and right */
+ width: 100%
+}
+
+div.contact-wrapper {
+ text-align: center;
+ float: left;
+ width: 33%;
+}
+
+div.contact-wrapper img {
+ border-radius: 100em;
+ height: 150px;
+ background-color: white;
+}
+
+div.contact-wrapper li {
+ justify-content: space-between; /* left and right */
+ display: inline-block;
+}
+
+article.about-me {
+ width: 33%;
+}
+
+div.profile-img {
+ width: 33%;
+}
+div.profile-img img {
+ height: 450px;
+ border-radius: 2em;
+}
+
+span.sara-eff {
+ font-family: 'Berkshire Swash', cursive;
+}
diff --git a/stylesheets/code-journal.css b/stylesheets/code-journal.css
new file mode 100644
index 000000000..06382d440
--- /dev/null
+++ b/stylesheets/code-journal.css
@@ -0,0 +1,53 @@
+/********** HEADER **********/
+header {
+ background-color: #FED766;
+}
+
+/*********** MAIN ***********/
+main.code-journal {
+ color: #FE4A49;
+ padding: 0;
+ width: 96%;
+ margin-left: 2%;
+}
+
+main.code-journal h3 {
+ font-size: 30px;
+ font-family: 'Berkshire Swash', cursive;
+}
+
+main.code-journal p {
+ font-size: 18px;
+}
+
+main.code-journal article {
+ float: left;
+}
+
+article.jan img, article.april img {
+ width: 300px;
+ float: left;
+}
+
+article.may img {
+ height: 300px;
+ float: left;
+ border-radius: 1em;
+}
+
+article.sept ul {
+ list-style: none;
+}
+
+article.sept img {
+ width: 10%;
+ float: left;
+}
+
+img.tulip {
+ border-top-right-radius: 1em;
+}
+
+img.heart {
+ border-bottom-left-radius: 1em;
+}
diff --git a/stylesheets/index.css b/stylesheets/index.css
new file mode 100644
index 000000000..ba41329ad
--- /dev/null
+++ b/stylesheets/index.css
@@ -0,0 +1,79 @@
+/************ DRY ***********/
+.div-height {
+ height: 33.5%;
+}
+
+a {
+ text-decoration: none;
+ color: white;
+}
+
+/*********** MAIN ***********/
+body {
+ background-color: white;
+}
+
+main.index {
+ height: 90%;
+ padding: 0;
+}
+
+p {
+ font-size: 40px;
+ padding-top: 1.75em;
+ margin: 0;
+ font-family: 'Berkshire Swash', cursive;
+}
+
+.p1 {
+ background-color: #FE4A49;
+}
+.p2 {
+ background-color: #FED766;
+}
+.p3 {
+ background-color: #009FB7;
+}
+
+/*********** FOOTER *********/
+footer {
+ background-color: #F4F4F8;
+ height: 10%;
+}
+footer > p {
+ font-family: 'Comfortaa', cursive;
+}
+
+/********** HOVER **********/
+.flex-display {
+ position: relative;
+ display: flex; /* flex display */
+ align-items: center; /* up and down */
+ justify-content: center; /* left and right */
+}
+
+.overlay {
+ bottom: 100%;
+ left: 0;
+ right: 0;
+ background-color: #E6E6EA;
+ overflow: hidden;
+ height: 0;
+ transition: .5s ease;
+ text-decoration:none;
+}
+
+.flex-display:hover .overlay {
+ bottom: 0;
+ height: 100%;
+}
+
+.text {
+ color: white;
+ font-size: 40px;
+ top: 50%;
+ left: 50%;
+ padding: 1px 0 2px 0;
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+}
diff --git a/stylesheets/portfolio.css b/stylesheets/portfolio.css
new file mode 100644
index 000000000..c3e849971
--- /dev/null
+++ b/stylesheets/portfolio.css
@@ -0,0 +1,33 @@
+/********** HEADER **********/
+.portfolio {
+ background-color: #FE4A49;
+}
+
+/*********** MAIN ***********/
+main.portfolio {
+ background-color: #009FB7;
+}
+
+main.portfolio article {
+ display: inline-blck;
+ background-color: #F4F4F8;
+ width: 47%;
+ border: 5px solid white;
+ border-top-left-radius: 1.5em;
+ margin: 0 10px 50px 10px;
+}
+
+article img {
+ border-top-left-radius: 1em;
+ width: 100%
+}
+
+article.meowspace, article.proj-port {
+ float: left;
+ clear: left;
+}
+
+article.riley, article.pizza {
+ float: right;
+ clear: right;
+}
diff --git a/stylesheets/style.css b/stylesheets/style.css
new file mode 100644
index 000000000..d2115f1fe
--- /dev/null
+++ b/stylesheets/style.css
@@ -0,0 +1,114 @@
+/*********** FONTS **********/
+font-family: 'Dosis', sans-serif;
+font-family: 'Comfortaa', cursive;
+font-family: 'Berkshire Swash', cursive;
+
+.dosis-font {
+ font-family: 'Dosis', sans-serif;
+}
+
+.comfortaa-font {
+ font-family: 'Comfortaa', cursive;
+}
+
+.berkshire-font {
+ font-family: 'Berkshire Swash', cursive;
+}
+
+/*********** DRY ************/
+.pos-abs {
+ position: absolute;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.center-text {
+ text-align: center;
+}
+
+.flex-display {
+ position: relative;
+ display: flex; /* flex display */
+ align-items: center; /* up and down */
+ justify-content: center; /* left and right */
+}
+
+a {
+ text-decoration: none;
+}
+
+/*********** BODY ***********/
+html {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ height: 100%;
+}
+
+ul {
+ padding: 0;
+ margin: 0;
+}
+
+p {
+ font-family: 'Comfortaa', cursive;
+}
+
+/********** HEADER **********/
+header {
+ height: 20%;
+}
+
+header h1 {
+ font-size: 5em;
+ margin: 0;
+}
+
+nav li {
+ display: inline-block;
+ font-size: 2em;
+ margin-right: 10px;
+}
+
+/*********** MAIN ***********/
+main {
+ height: 68%;
+ overflow: scroll;
+ padding-top: 2%;
+}
+
+/*********** FOOTER *********/
+footer {
+ background-color: #F4F4F8;
+ height: 10%;
+ bottom: 0;
+}
+
+footer p {
+ font-size: .75em;
+ padding-top: 1em;
+ margin: 0;
+}
+
+footer a {
+ color: grey;
+}
+
+/*********** CLEARFIX *******/
+.clearfix:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+}
+
+.clearfix { display: inline-block; }
+/* start commented backslash hack \*/
+* html .clearfix { height: 1%; }
+.clearfix { display: block; }