Ada-C15 · sundbean · Jun 6, 2021 · Jun 7, 2021 · Jun 7, 2021 · Jun 8, 2021
diff --git a/about.html b/about.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="./styles/style.css">
+        <link rel="stylesheet" href="./styles/about_style.css">
+        <!-- For social media icons: -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    </head>
+    <body>
+        <header>
+            <h1 class="my-name"><a href="./index.html">WHIT SUNDBY</a></h1>
+            <nav class="navbar">
+                <a class="current-page" href="./about.html">About</a>
+                <a href="./portfolio.html">Portfolio</a>
+                <a href="./blog.html">Essays</a>
+            </nav>
+        </header>
+        <main class="page-content">
+            <div class="main-grid">
+                <img id="about-img" src="./images/hi_im_whit.png" alt="A picture of Whit smiling for the camera." />
+                <div class="about-text">
+                    <p class="about-me">Hello, I'm Whit. I'm a software-developer-in-training in Seattle, WA. All of the coding projects on this website have been produced from scratch in the first 3 months of Ada Developer Academy's immersive curriculum. So far we've learned Python, Flask, SQL, HTML, CSS, and API development.</p>
+                    <p class="about-me">My journey into software development is both passion-driven and philosophy-driven. The passion: I love building things, especially tools that people can use to enrich their lives. The philosophy: my worldview has been heavily influenced by a neurophilosophical thesis called 'The Extended Mind.' The philosophy informs another passion that I hope to bring into my software development career: helping make life better for people with mental disabilities. You can read more about my thoughts on technology and the mind in the <a id="extended-mind-link">Essays</a> section of this website.</p>
+                    <p class="about-me">Aside from a budding software engineer, I'm also a long-distance hiker. So far, I've hiked the Pacific Crest Trail in the western US (2,650 miles) and the Te Araroa Trail in New Zealand (1,875 miles). When I'm not hiking or coding, you can usually find me cooking, reading, writing, playing classical guitar, listening to podcasts, or playing with my two 5-month-old kittens, Live ("Lee-vah") and Johannes ("Yo-hahn").</p>
+                </div>
+            </div>
+        </main>
+        <footer class="social-footer">
+            <div class="social-icons">
+                <ul class="social-menu">
+                    <li><a href="https://www.linkedin.com/in/wks" class="fa fa-linkedin fa-lg"></a></li>
+                    <li><a href="https://www.github.com/sundbean" class="fa fa-github fa-lg"></a></li>
+                    <li><a href="https://www.instagram.com/sundbean" class="fa fa-instagram fa-lg"></a></li>
+                </ul>
+            </div>
+            <div class="copyright"><section class="signature">© Whit Sundby June 6 2021</section></div>
+        </footer>
+    </body>
+</html>
diff --git a/blog.html b/blog.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="./styles/style.css">
+        <link rel="stylesheet" href="./styles/about_style.css">
+        <!-- For social media icons: -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    </head>
+    <body>
+        <header>
+            <h1 class="my-name"><a href="./index.html">WHIT SUNDBY</a></h1>
+            <nav class="navbar">
+                <a class="current-page" href="./about.html">About</a>
+                <a href="./portfolio.html">Portfolio</a>
+                <a href="./blog.html">Essays</a>
+            </nav>
+        </header>
+        <main class="page-content">
+
+        </main>
+        <footer class="social-footer">
+            <div class="social-icons">
+                <ul class="social-menu">
+                    <li><a href="https://www.linkedin.com/in/wks" class="fa fa-linkedin fa-lg"></a></li>
+                    <li><a href="https://www.github.com/sundbean" class="fa fa-github fa-lg"></a></li>
+                    <li><a href="https://www.instagram.com/sundbean" class="fa fa-instagram fa-lg"></a></li>
+                </ul>
+            </div>
+            <div class="copyright"><section class="signature">© Whit Sundby June 6 2021</section></div>
+        </footer>
+    </body>
+</html>
diff --git a/images/beach_background.jpg b/images/beach_background.jpg
diff --git a/images/blog_icon.png b/images/blog_icon.png
diff --git a/images/brain_phone.jpeg b/images/brain_phone.jpeg
diff --git a/images/carlsbad_beach.jpeg b/images/carlsbad_beach.jpeg
diff --git a/images/code_snippet.jpg b/images/code_snippet.jpg
diff --git a/images/developer_icon.png b/images/developer_icon.png
diff --git a/images/hi_im_whit.png b/images/hi_im_whit.png
diff --git a/images/johannes_curled.jpeg b/images/johannes_curled.jpeg
diff --git a/images/kittens_cuddling.jpeg b/images/kittens_cuddling.jpeg
diff --git a/images/mental_health.png b/images/mental_health.png
diff --git a/images/menu_icon.png b/images/menu_icon.png
diff --git a/images/mountains.jpeg b/images/mountains.jpeg
diff --git a/images/omiflamme_canyon_camp_pano.jpeg b/images/omiflamme_canyon_camp_pano.jpeg
diff --git a/images/omiflamme_canyon_dusk.jpeg b/images/omiflamme_canyon_dusk.jpeg
diff --git a/images/omiflamme_canyon_sunrise.jpeg b/images/omiflamme_canyon_sunrise.jpeg
diff --git a/images/omiflamme_canyon_sunset_pano.jpeg b/images/omiflamme_canyon_sunset_pano.jpeg
diff --git a/images/omiflamme_canyone_dusk.jpeg b/images/omiflamme_canyone_dusk.jpeg
diff --git a/images/pct_desert.jpeg b/images/pct_desert.jpeg
diff --git a/images/pct_desert_1.jpeg b/images/pct_desert_1.jpeg
diff --git a/images/pct_desert_2.jpeg b/images/pct_desert_2.jpeg
diff --git a/images/retro-video-store.jpg b/images/retro-video-store.jpg
diff --git a/images/swap-meet.jpg b/images/swap-meet.jpg
diff --git a/images/task_list.jpeg b/images/task_list.jpeg
diff --git a/images/task_list.jpg b/images/task_list.jpg
diff --git a/images/task_list_icon.png b/images/task_list_icon.png
diff --git a/images/tech_brain_icon.html b/images/tech_brain_icon.html
diff --git a/images/tech_brain_icon.png b/images/tech_brain_icon.png
diff --git a/images/tech_mental_health.jpeg b/images/tech_mental_health.jpeg
diff --git a/images/vhs_icon.png b/images/vhs_icon.png
diff --git a/images/video_store.jpg b/images/video_store.jpg
diff --git a/images/wet_backpacker.jpeg b/images/wet_backpacker.jpeg
diff --git a/images/whit_and_moss.jpeg b/images/whit_and_moss.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="./styles/style.css">
+        <!-- For social media icons: -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    </head>
+    <body>
+        <div class="grid-container">
+            <header>
+                <h1 class="my-name"><a href="./index.html">WHIT SUNDBY</a></h1>
+                <nav class="navbar">
+                    <a href="./about.html">About</a>
+                    <a href="./portfolio.html">Portfolio</a>
+                    <a href="./blog.html">Essays</a>
+                </nav>
+            </header>
+            <main>
+                <br>
+                <section class="featured">
+                    <div class="container">
+                        <img src="./images/video_store.jpg" alt="A storefront sign that says 'VIDEO'." />
+                        <div class="overlay">
+                            <p class="overlay-text">Project: A retro video store API with command line interface.</p>
+                        </div>
+                    </div>
+                    <div class="container">
+                        <img src="./images/task_list.jpg" alt="A white sticky note labeled 'task list' with checked-off task 'API project'." />
+                        <div class="overlay">
+                            <p class="overlay-text">Project: A task list API that integrates with Slack.</p>
+                        </div>
+                    </div>
+                    <div class="container">
+                        <img src="./images/mental_health.png" alt="An illustration of silhouettes with brains painted as flowers, puzzles, and line graphs." />
+                        <div class="overlay">
+                            <p class="overlay-text">Lightning Talk: Tech and Mental Health</p>
+                        </div>
+                    </div>
+                </section>
+                <!-- <ul class="featured">
+                    <li id="bio">
+                        <div class="container">
+                            <a href="./about.html">
+                                <img src="./images/mountains.jpeg" alt="A picture of a mountain range in New Zealand">
+                                <div class="overlay">
+                                    <p class="text">Mission Statement</p>
+                                </div>
+                            </a>
+                        </div>
+                    </li>
+                    <li id="video-store-project">
+                        <div class="container">
+                            <a href="./portfolio/video-store">
+                                <img src="./images/retro-video-store.jpg" alt="The inside of a 1990s video store">
+                                <div class="overlay">
+                                    <p class="text">Project: Retro Video Store</p>
+                                </div>
+                            </a>
+                        </div>
+                    </li>
+                    <li id="swap-meet-project">
+                        <div class="container">
+                            <a href="./portfolio/swap-meet">
+                                <img src="./images/swap-meet.jpg" alt="A row of vendor tents at a swap meet">
+                                <div class="overlay">
+                                    <p class="text">Project: Swap Meet</p>
+                                </div>
+                            </a>
+                        </div>
+                    </li>
+                </ul> -->
+            </main>
+            <footer class="social-footer">
+                <div class="social-icons">
+                    <ul class="social-menu">
+                        <li><a href="https://www.linkedin.com/in/wks" class="fa fa-linkedin fa-lg"></a></li>
+                        <li><a href="https://www.github.com/sundbean" class="fa fa-github fa-lg"></a></li>
+                        <li><a href="https://www.instagram.com/sundbean" class="fa fa-instagram fa-lg"></a></li>
+                    </ul>
+                </div>
+                <div class="copyright">
+                    <section class="signature">© Whit Sundby June 6 2021</section>
+                </div>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="./styles/style.css">
+        <link rel="stylesheet" href="./styles/portfolio_style.css">
+        <!-- For social media icons: -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    </head>
+    <body>
+        <header>
+            <h1 class="my-name"><a href="./index.html">WHIT SUNDBY</a></h1>
+            <nav class="navbar">
+                <a href="./about.html">About</a>
+                <a href="./portfolio.html">Portfolio</a>
+                <a href="./blog.html">Essays</a>
+            </nav>
+        </header>
+        <main>
+            <div class='main-grid'>
+
+            </div>
+            <a href="./weather-report/index.html">Weather Report Project</a>
+        </main>
+        <footer class="social-footer">
+            <div class="social-icons">
+                <ul class="social-menu">
+                    <li><a href="https://www.linkedin.com/in/wks" class="fa fa-linkedin fa-lg"></a></li>
+                    <li><a href="https://www.github.com/sundbean" class="fa fa-github fa-lg"></a></li>
+                    <li><a href="https://www.instagram.com/sundbean" class="fa fa-instagram fa-lg"></a></li>
+                </ul>
+            </div>
+            <div class="copyright"><section class="signature">© Whit Sundby June 6 2021</section></div>
+        </footer>
+    </body>
+</html>
diff --git a/practice.js b/practice.js
@@ -0,0 +1,15 @@
+
+const doubleTheNums = arr => {
+    for (i=0; i < arr.length; i++) {
+        arr[i] *= 2;
+    }
+    return arr;
+}
+
+const doubleTheNums = arr => arr.map(x = x * 2);
+
+
+Math.random() --> gives us a number [0, 1) (note that 1 is excluded)
+Math.random() * 100 --> gives us a number [0, 100) (note that 100 is excluded)
+Math.random() * 100 + 1 --> gives us a number [1, 101) (note that 101 is excluded)
+Math.floor(Math.random() * 100) + 1 --> gives us an integer [1, 100]
diff --git a/styles/about_style.css b/styles/about_style.css
@@ -0,0 +1,23 @@
+main {
+    grid-column: 1 / -1;
+    grid-row: 2 / 3;
+}
+
+.main-grid {
+    height: 70vh;
+    display: grid;
+    grid-template-columns: 1fr 2fr 6fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+#about-img {
+    grid-column: 2 / 3;
+    max-width: 20vw;
+    padding-right: 2em;
+    align-self: center;
+}
+
+.about-text {
+    grid-column: 3 / -2;
+    align-self: center;
+}
diff --git a/styles/index_style.css b/styles/index_style.css
diff --git a/styles/portfolio_style.css b/styles/portfolio_style.css
@@ -0,0 +1,13 @@
+
+main {
+    grid-column: 1 / -1;
+    grid-row: 2 / 3;
+}
+
+.main-grid {
+    height: 70vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+}
+