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 @@ + + + + + Sara N. Frandsen | About + + + + + + +
+

+ about sara eff +

+ +
+ + +
+
+
+ +
+ + +
+

+ sara eff is the alias of Sara N. Frandsen, a student enrolled at Ada Developers Academy's 8th cohort. Her passions include coffee, dogs, bad anime, dogs, creating fine art with her parter, and dogs. +

+

+ If you'd like to contact Sara with any questions or comments, try any of the social media outlets listed below. She'd especially love it if you'd follow her on GitHub and follow her programming journey! +

+
+ + +
+ +
+
+
+ + + + + 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 @@ + + + + + Sara N. Frandsen | Diary + + + + + + +
+

+ journey to Ada dev academy, 2017 +

+ +
+ + + +
+
+

+ 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. +

+
+
+ + + + + diff --git a/pages/index.html b/pages/index.html new file mode 100644 index 000000000..2f47545a4 --- /dev/null +++ b/pages/index.html @@ -0,0 +1,63 @@ + + + + + Sara N. Frandsen | Main + + + + + + + +
+ +
+

+ i'm +

+
+
+ portfolio +
+
+
+
+ + +
+

+ sara +

+
+
+ diary +
+
+
+
+ + +
+

+ eff +

+
+
+ about +
+
+
+
+
+ + + + 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 @@ + + + + + Sara N. Frandsen | Portfolio + + + + + + +
+

+ portfolio +

+ +
+ + +
+ +
+ + + +

+ MeowSpace, 2017 +

+

+ Ada Dev Academy assignment demonstrating understanding of use of wireframes in web design. CSS/HTML. +

+
+ +
+ + + +

+ Riley's Space Adventure, 2017 +

+

+ Group project, created an interactive text adventure. Epicodus. Photoshop, Javascript, CSS/HTML. +

+
+ +
+ + + +

+ Miss Sugarcreek's Specialty Hand-Crafted Pizzas, 2017 +

+

+ Created a pizza menu website using selectors to display the total cost of an order. Epicodus. Javascript, CSS/HTML. +

+
+ +
+ + + +

+ Portfolio Website, 2017 +

+

+ Epicodus project making a portfolio website. Included links to other classroom projects. CSS/HTML. +

+
+
+ + + + + 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; }