diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..68691ae --- /dev/null +++ b/Gemfile @@ -0,0 +1,6 @@ +# frozen_string_literal: true + +source "https://rubygems.org" +gem 'rack' + +gem "rack-livereload", group: :development diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..ce60752 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,16 @@ +GEM + remote: https://rubygems.org/ + specs: + rack (2.0.6) + rack-livereload (0.3.17) + rack + +PLATFORMS + ruby + +DEPENDENCIES + rack + rack-livereload + +BUNDLED WITH + 1.16.6 diff --git a/config.ru b/config.ru new file mode 100644 index 0000000..f3269bd --- /dev/null +++ b/config.ru @@ -0,0 +1,14 @@ +use Rack::Static, + :urls => ["/images", "/js", "/css"], + :root => "public" + +run lambda { |env| + [ + 200, + { + 'Content-Type' => 'text/html', + 'Cache-Control' => 'public, max-age=86400' + }, + File.open('public/index.html', File::RDONLY) + ] +} diff --git a/config/environments/development.rb b/config/environments/development.rb new file mode 100644 index 0000000..d586b48 --- /dev/null +++ b/config/environments/development.rb @@ -0,0 +1,4 @@ +MyApp::Application.configure do + # Add Rack::LiveReload to the bottom of the middleware stack with the default options: + config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload +end diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..5d26411 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,130 @@ +:root { + --font-color: white; +} + +html { + background: #cfecd0; /* fallback color */ + background: linear-gradient(180deg, #cfecd0, #ffc5ca); + background-size: cover; + width: 100%; +} + +body { + font-family: Tahoma, Geneva, sans-serif; +} + +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; +} + +.flex-item { + padding: 5px; + width: 300px; + height: 250px; + margin-top: 10px; +} + +.block { + font-size: 1.5em; + text-align: center; +} + +@media only screen and (min-width: 740px) { + .block { + font-size: 2em; + } +} + +.content { + text-align: left; + font-size: 0.8em; + font-weight: normal; +} + +h3 { + color: var(--font-color); +} + +p { + color: var(--font-color); +} + +a { + color: var(--font-color); +} + +a:hover { + color: #808080; +} + +.section { + display:flex; + flex-direction: column; + justify-content:center; + align-items:center; + padding-bottom: 100px; +} + +.content-with-image { + max-width: 900px; + margin: 0 25px; +} + +@media only screen and (min-width: 740px) { + .content-with-image { + display: flex; + } +} + +.featured-text { + padding: 0 25px 0 25px; + line-height: 1.5em; + text-align: left; +} + +.featured-images { + width: 650px; +} + +.jsconf-image { + width: 400px; + border-radius: 2%; +} + +.emberconf-image { + height: 400px; + border-radius: 2%; +} + +/* .container { + padding-bottom: 50px; + margin: 0 auto; +} + +.image-container { + display: flex; + justify-content: center; + align-items: center; +} */ + +.vaidehi-logo-image { + padding: 200px 0 60px 0; + width: 320px; +} + +@media only screen and (min-width: 740px) { + .vaidehi-logo-image { + width: 650px; + } +} diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 0000000..eca6abb --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,126 @@ +:root { + --font-color: white; + --hover-color: #808080; + --gradient-start: #cfecd0; + --gradient-end: #ffc5ca; + --image-border-radius: 2%; +} + +html { + background: var(--gradient-start); /* fallback background color */ + background: linear-gradient(180deg, var(--gradient-start) , var(--gradient-end)); + background-size: cover; + width: 100%; +} + +body { + font-family: Tahoma, Geneva, sans-serif; +} + +/* MOBILE SIZES */ +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; +} + +.flex-item { + padding: 5px; + width: 300px; + height: 250px; + margin-top: 10px; +} + +.block { + font-size: 1.5em; + text-align: center; +} + +/* .content { + text-align: left; + font-size: 0.8em; + font-weight: normal; +} */ + +h3, p, a, li { + color: var(--font-color); +} + +ul { + text-align: left; +} + +a:hover { + color: var(--hover-color); +} + +.section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-bottom: 100px; +} + +.content-with-image { + max-width: 1100px; + margin: 0 25px; +} + +.featured-text { + padding: 0 25px; + line-height: 1.5em; + text-align: left; +} + +.jsconf-image { + width: 250px; + border-radius: var(--image-border-radius); +} + +.emberconf-image { + height: 300px; + border-radius: var(--image-border-radius); +} + +.vaidehi-logo-image { + padding: 200px 0 60px 0; + width: 320px; +} + +/* MID & LARGE SIZES */ +@media only screen and (min-width: 740px) { + .block { + font-size: 2em; + } + + .content-with-image { + display: flex; + align-items: center; + } + + .featured-text { + text-align: left; + } + + .jsconf-image { + width: 400px; + } + + .emberconf-image { + height: 400px; + } + + .vaidehi-logo-image { + width: 650px; + } +} diff --git a/public/images/basecs_logo.jpeg b/public/images/basecs_logo.jpeg new file mode 100644 index 0000000..a25329a Binary files /dev/null and b/public/images/basecs_logo.jpeg differ diff --git a/public/images/basecs_podcast_logo.png b/public/images/basecs_podcast_logo.png new file mode 100644 index 0000000..592ae9e Binary files /dev/null and b/public/images/basecs_podcast_logo.png differ diff --git a/public/images/baseds_logo.jpeg b/public/images/baseds_logo.jpeg new file mode 100644 index 0000000..1d42591 Binary files /dev/null and b/public/images/baseds_logo.jpeg differ diff --git a/public/images/byte_sized_logo.png b/public/images/byte_sized_logo.png new file mode 100644 index 0000000..b527a63 Binary files /dev/null and b/public/images/byte_sized_logo.png differ diff --git a/public/images/emberconf_2018.jpg b/public/images/emberconf_2018.jpg new file mode 100644 index 0000000..dcb8ea6 Binary files /dev/null and b/public/images/emberconf_2018.jpg differ diff --git a/public/images/favicon.png b/public/images/favicon.png new file mode 100644 index 0000000..7cc852e Binary files /dev/null and b/public/images/favicon.png differ diff --git a/vaidehi-white.png b/public/images/vaidehi-white.png similarity index 100% rename from vaidehi-white.png rename to public/images/vaidehi-white.png diff --git a/public/images/vaidehi_speaking.jpg b/public/images/vaidehi_speaking.jpg new file mode 100644 index 0000000..b7109ea Binary files /dev/null and b/public/images/vaidehi_speaking.jpg differ diff --git a/index.html b/public/index.html similarity index 52% rename from index.html rename to public/index.html index aee2153..7a9c5be 100644 --- a/index.html +++ b/public/index.html @@ -3,22 +3,67 @@ Vaidehi Joshi - - - + + + - + -
- +
+ +
+ +
+

@vaidehijoshi

+ +

+ Hello! I'm Vaidehi. +
+ I'm a writer, software engineer, and educator. +

-
- @vaidehijoshi +
+

talks

+

talks

+
+ +
+

talks

+
+ + +
+
+ +
+
+ + + +
-
+ -
- \ No newline at end of file + diff --git a/style.css b/style.css deleted file mode 100644 index db4f628..0000000 --- a/style.css +++ /dev/null @@ -1,93 +0,0 @@ -.flex-container { - padding: 0; - margin: 0; - list-style: none; - - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-flex-flow: row wrap; - justify-content: space-around; -} - -.flex-item { - background: none; - padding: 5px; - width: 300px; - height: 250px; - margin-top: 10px; - - color: white; -} - -.heading { - line-height: 20px; - - font-weight: bold; - font-size: 2em; - text-align: center; -} - -.content { - text-align: left; - line-height: 30px; - font-size: 0.8em; - font-weight: normal; -} - -body { - background: linear-gradient(90deg, #cfecd0, #ffc5ca); - font-size: 16px; - font-family: Tahoma, Geneva, sans-serif; - color: #ffffff; -} - -a { - color: #ffffff; -} - -a:hover { - color: #808080; -} - -#heading-content { - display:flex; - justify-content:center; - align-items:center; - padding-bottom: 100px; -} - -.container { - padding-bottom: 50px; - margin: 0 auto; -} - -.image-container { - display: flex; - justify-content: center; - align-items: center; -} - -.vaidehi-logo-image { - padding: 200px 0 60px 0; - width: 550px; -} - -@media screen and (max-width: 560px) { - .container { - width: 310px; - margin: 0 auto; - } - - .vaidehi-logo-image { - max-width: 310px; - } - - .heading { - font-size: 1.5em; - } -} -