Add mobile support and replace images with emojis

- Used @media to resize text on smaller screens - Replaced blog images with emojis - Redesigned blog page so that all posts are shown - Removed unused CSS classes
jonstrutz11 · Feb 4, 2024 · 9563683 · 9563683
1 parent e1f8de5
commit 9563683
Show file tree

Hide file tree

Showing 28 changed files with 508 additions and 478 deletions.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,8 +1,8 @@
 <nav>
     <!-- Name and title -->
     <div class="container">
-      <h1 class="bodyText commandLineText" style="font-size: 60px; margin-top: 40px;">> Jon Strutz <span class="commandLineRectangle blink" style="font-size: 60px">▮</span></h1>
-      <h2 class="bodyText" style="min-width: 600px; font-size: 30px; margin-bottom: 10px;">Ph.D. | Bioinformatics Software Engineer</h2>
+      <h1 class="bodyText commandLineText">> Jon Strutz <span class="commandLineRectangle blink">▮</span></h1>
+      <h2 class="subheading" style="margin-top: 20px">Ph.D. | Bioinformatics Software Engineer</h2>
 
       <div class="bodyText">
         {% for item in site.data.navigation %}

diff --git a/_layouts/blog-series.html b/_layouts/blog-series.html
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{ page.title }}</title>
   <link rel="stylesheet" href="/assets/css/styles.css">
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicon/apple-touch-icon.png">
@@ -20,16 +21,9 @@
   <meta property="og:description" content="{{ page.subtitle }}" />
 </head>
 
-<body text="#E3E3E3" class="defaults">
-
-  <div class="VStack">
-
-    {% include navigation.html %}
-
-    {{ content }}
-
-  </div>
-
+<body text="#E3E3E3" class="defaults container">
+  {% include navigation.html %}
+  {{ content }}
 </body>
 
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<div class="bodyText">
+<div class="bodyText container">
   <h1>{{ page.title }}</h1>
   <p>
     {{ page.date | date_to_string }}

diff --git a/_posts/2020-01-28-The-Spark.md b/_posts/2020-01-28-The-Spark.md
@@ -1,11 +1,8 @@
 ---
-title: "A Spark"
+title: "⚡️ A Spark"
 tag: "KameKurosu"
 ---
 
-![A Spark](/assets/images/blog-kamekurosu/headers/spark.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/8IGKYypIZ9k"><u>Image Source</u></a></figcaption>
-
 If you didn’t know, I have been learning Japanese ever since I met my wife, Ayana, in 2014 (and yes, my Japanese still sucks even in 2020). One of the most difficult aspects of learning Japanese is reading (and writing). This led me to a question: how can I make Japanese reading practice more fun? <!--more-->
 
 Ideally, I could just read the things I usually read, but in Japanese (sci-fi, news, historical fiction, etc.). However, I'm still not even close to being able to read novels. I can barely read Japanese news articles. I'm sure one day, my Japanese will get good enough to read these more difficult media, but for now, I want something that is more exciting than what I usually practice with (looking at you, Japanese childrens' books and manga).

diff --git a/_posts/2020-02-04-The-Idea.md b/_posts/2020-02-04-The-Idea.md
@@ -1,12 +1,8 @@
 ---
-title: "The Idea"
+title: "💡 The Idea"
 tag: "KameKurosu"
 ---
 
-![Forest Road](/assets/images/blog-kamekurosu/headers/forest-road.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/5hvn-2WW6rY"><u>Image Source</u></a></figcaption>
-
-
 I love crosswords. I do them all the time (often to the detriment of my Japanese studies). This led me to an app idea: solve Japanese crossword puzzles geared toward learners of Japanese that make practicing kanji relaxing, motivating, educational, and most of all, fun. <!--more-->
 
 In very basic terms, the proposed app, which I am calling KanjiCross for now, gamifies kanji-reading practice by having the user solve crossword puzzles where the clues are kanji-containing words (e.g. 車輪) and the answers are the readings, in katakana (e.g. シャリン=“sha-ri-n”). Each katakana character would take up one square in the crossword.

diff --git a/_posts/2020-02-09-App-Store-Research.md b/_posts/2020-02-09-App-Store-Research.md
@@ -1,11 +1,8 @@
 ---
-title: "The Competition"
+title: "🏅 The Competition"
 tag: "KameKurosu"
 ---
 
-![Chess Pieces in a Forest](/assets/images/blog-kamekurosu/headers/nature-chess.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/NiBcChX2CKc"><u>Image Source</u></a></figcaption>
-
 But wait! One thing about apps, which you are probably aware of, is that the market is incredibly saturated. There is an app for everything! From workout logs to todo lists to music players to language learning apps, you’d be hard-pressed to find an app that doesn’t do what you want. <!--more-->
 
 With this in mind, before making my app (and even before learning how to make apps), I had to make sure “KanjiCross” wasn’t already built by someone else! So I came up with all the possible keywords I could think of: "Japanese", "Crossword", "Learn", "Practice", "Kanji", "Read", etc. as well as many Japanese keywords.

diff --git a/_posts/2020-03-23-iOS-Dev-I.md b/_posts/2020-03-23-iOS-Dev-I.md
@@ -1,11 +1,8 @@
 ---
-title: "Foundation: Part I"
+title: "🌱 Foundation: Part I"
 tag: "KameKurosu"
 ---
 
-![Bridge Surrounded by Nature](/assets/images/blog-kamekurosu/headers/nature-bridge.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/A9cLdpV3frg"><u>Image Source</u></a></figcaption>
-
 Well, the pandemic is currently in full swing! I’m lucky enough to be able to continue work on my PhD remotely, but I have also gained quite a bit of extra free time... <!--more-->
 
 That said, I decided to use that time to learn how to build iOS apps. I quickly realized that you have to have a Mac to make apps, so after a few hours of deal-hunting I found a used 2014 Mac Mini on eBay for only $250, not bad!

diff --git a/_posts/2021-01-13-iOS-Dev-II.md b/_posts/2021-01-13-iOS-Dev-II.md
@@ -1,11 +1,8 @@
 ---
-title: "Foundation: Part II"
+title: "🌱 Foundation: Part II"
 tag: "KameKurosu"
 ---
 
-![Nature's Library](/assets/images/blog-kamekurosu/headers/nature-library.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/1COcTd3pRCg"><u>Image Source</u></a></figcaption>
-
 What a year 2020 was. Although my goal was to finish that iOS course and start on my own app, life got in the way. I was able to still learn a lot and finished about half of the course early last year. But this year, I made a New Years Resolution to start again where I left off. <!--more-->
 
 And did that resolution pay off! After many nights filled with watching lectures and writing code, I finished the entire course, did some further research on iOS development topics I was interested in, and started to seriously plan out my app!

diff --git a/_posts/2021-01-15-Initial-App-Design.md b/_posts/2021-01-15-Initial-App-Design.md
@@ -1,11 +1,8 @@
 ---
-title: "Pen & Paper"
+title: "✍🏻 Pen & Paper"
 tag: "KameKurosu"
 ---
 
-![Pen and Paper](/assets/images/blog-kamekurosu/headers/pen-and-paper.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/XYogQSkSYZ8"><u>Image Source</u></a></figcaption>
-
 Well, I’ve finished my iOS course. Now, it is time to build my first app! Let’s get coding, right? Wrong. <!--more-->
 
 One of the things I learned in the course was about how important it is to design your app with good ol’ fashioned pen and paper before coding anything up. This is because coding is much more time- and labor-intensive that simply drawing. It is also much harder to fix mistakes or change things in your design once you’ve put it into code.

diff --git a/_posts/2021-01-31-App-Mockups.md b/_posts/2021-01-31-App-Mockups.md
@@ -1,11 +1,8 @@
 ---
-title: "Fancy Pen & Paper"
+title: "✍🏻 Fancy Pen & Paper"
 tag: "KameKurosu"
 ---
 
-![Pen and Paper](/assets/images/blog-kamekurosu/headers/fancy-pen-and-paper.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/xG8IQMqMITM"><u>Image Source</u></a></figcaption>
-
 The next step was to make more realistic-looking mockups. I used a program called <a href="https://www.sketch.com/"><u>Sketch</u></a> (for Mac) to create all the mockups. Here are the results! <!--more-->
 
 ## Mockups, Version 1

diff --git a/_posts/2021-02-06-Business-Stuff.md b/_posts/2021-02-06-Business-Stuff.md
@@ -1,11 +1,8 @@
 ---
-title: "Some Business Stuff"
+title: "🗂️ Some Business Stuff"
 tag: "KameKurosu"
 ---
 
-![Hakone Shrine](/assets/images/blog-kamekurosu/headers/hakone-shrine.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/SBK40fdKbAg"><u>Image Source</u></a></figcaption>
-
 After finishing my mock-ups, I decided to take a break and focus on more business-related tasks. <!--more-->The first was getting an apple developer account, so that I could use Apple’s cloud database service for my users' level completion data, and so I could eventually publish the app to the App Store. In order to do this, I needed an e-mail. I thought about using my personal e-mail for a bit, but then thought a better decision might be to create a new e-mail specifically for these types of projects.
 
 I decided to create a Google Business e-mail with the name [email protected]. I chose to name this business (if you can even call it a business) Kamesama Apps, a play on words, as Kamisama means God or spirit in Japan, but changing Kami to Kame switches it to something that sounds more like “Sacred Turtle”, haha.

diff --git a/_posts/2021-02-10-Crossword-Generation.md b/_posts/2021-02-10-Crossword-Generation.md
@@ -1,11 +1,8 @@
 ---
-title: "Crossword Creation"
+title: "⬜ Crossword Creation"
 tag: "KameKurosu"
 ---
 
-![Printing Press Letter Blocks](/assets/images/blog-kamekurosu/headers/printing-press-letters.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/BVyNlchWqzs"><u>Image Source</u></a></figcaption>
-
 The next step was to create the levels. It turns out that crosswords aren’t easy to make. And I’m definitely not planning on making them all by hand... <!--more-->That said, I looked for programs that could automatically create them for me! After a lot of digging, I found a Japanese crossword program called クロスワード　ギバー (literally, Crossword Giver). Since it uses a lot of difficult Japanese words, it took some time for me to figure it out, but basically its a program where you provide it a clue list and an answer list and it will autogenerate a crossword for you! Here are some screenshots:
 
 ![Crossword Giver Program](/assets/images/blog-kamekurosu/crossword-giver.jpg){:class="blogHorizontalImage"}

diff --git a/_posts/2021-02-18-Data-Models.md b/_posts/2021-02-18-Data-Models.md
@@ -1,11 +1,8 @@
 ---
-title: "Data Wrangling"
+title: "🤠 Data Wrangling"
 tag: "KameKurosu"
 ---
 
-![Ropes and Knots on a Ship](/assets/images/blog-kamekurosu/headers/ship-ropes.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/u-qKOduhSqg"><u>Image Source</u></a></figcaption>
-
 So, at this point I have 6 levels x 100 JSON files per level = 600 JSON files filled with raw data, not in a super nice format, and also containing data we don’t need. We need a way to organize all of this data for our app! <!--more-->
 
 The first thing I did was convert each JSON into a more nicely formatted JSON for my app’s purposes. To decide on what this “nice format” would be, I designed a “data model” for my app in Xcode, Apple's open-source software for iOS development:

diff --git a/_posts/2021-04-29-Loading-Puzzles-into-iOS-Database.md b/_posts/2021-04-29-Loading-Puzzles-into-iOS-Database.md
@@ -1,11 +1,8 @@
 ---
-title: "Loading Puzzles into our App"
+title: "📦 Loading Puzzles into our App"
 tag: "KameKurosu"
 ---
 
-![Making Noodles](/assets/images/blog-kamekurosu/headers/making-noodles.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/4nXkhLCrkLo"><u>Image Source</u></a></figcaption>
-
 Just as we can prepare pasta from scratch and have it then ready to be cooked, we can prepare our data to be available for use by our app!<!--more-->
 
 Okay, I admit that was a terrible analogy - I think I'm just hungry... also note that this is quite a long and technical blog post - primarily because it took me so long to figure all of this out!

diff --git a/_posts/2021-05-09-Coding-up-the-UI-I.md b/_posts/2021-05-09-Coding-up-the-UI-I.md
@@ -1,11 +1,8 @@
 ---
-title: "Coding up the UI: Part I"
+title: "🍱 Coding up the UI: Part I"
 tag: "KameKurosu"
 ---
 
-![Making Noodles](/assets/images/blog-kamekurosu/headers/scenery-perspective-from-porch.jpg){:class="blogHorizontalImage"}
-<figcaption class="blogImageSourceCaption"><a href="https://unsplash.com/photos/qwPSnBvdhtI"><u>Image Source</u></a></figcaption>
-
 Now that we have all our data into our app, we can actually make our app come to life!<!--more-->
 
 Here I build the main menu screen and add some basic navigation to the level splash screen and crossword screen (and then back to the main menu). I also added a splash screen with the KameKurosu logo for when the app is loaded up. I worked all weekend on this, but I'm pretty satisfied with the final result!

diff --git a/_posts/2021-05-16-Japanese-HP1-Stats.md b/_posts/2021-05-16-Japanese-HP1-Stats.md
@@ -1,14 +1,14 @@
 ---
-title: "I Conquered My First Japanese Novel!"
+title: "📚 I Conquered My First Japanese Novel!"
 tag: "Japanese"
 header-img: "/assets/images/blog-japanese/headers/hp1-cover.jpg"
 subtitle: "33 hours of reading later, I finally finished the first Harry Potter book in Japanese!"
 ---
 
-![Book Cover Art for Harry Potter and the Sorcerer's Stone in Japanese](/assets/images/blog-japanese/headers/hp1-cover.jpg){:class="blogHorizontalImage"}
-
 33 hours of reading later, I finally finished the first Harry Potter book in Japanese!<!--more-->
 
+![Book Cover Art for Harry Potter and the Sorcerer's Stone in Japanese](/assets/images/blog-japanese/headers/hp1-cover.jpg){:class="blogHorizontalImage"}
+
 A few years ago, I decided I'd try to read my first real Japanese novel. Because I love Harry Potter and already know the story quite well, I thought it would be a good place to start.
 So I bought ハリーポッターと賢者の石 (Harry Potter and the Sorcerer's Stone) for my Kindle. The nice thing about using a Kindle is that you can look up words instantly if you get stuck (great for learning languages!).
 

diff --git a/_sass/blog.scss b/_sass/blog.scss
@@ -1,21 +1,28 @@
+.blogName {
+    margin-top: 20px;
+    margin-bottom: 0px;
+    font-size: 24px;
+}
+
 .blogTitle {
-    margin-top: 60px;
+    margin-top: 0px;
     margin-bottom: 0px;
-    font-size: 40px
+    font-size: 20px
 }
 
-.blogImageSourceCaption {
-    margin-top: -10px;
-    text-align: center;
-    font-size: 12px;
+.blogDate {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    font-size: 14px;
+}
+
+.blogExcerpt {
+    margin-top: 0px;
+    margin-bottom: 0px;
 }
 
 .blogImageCaption {
     text-align: center;
     font-size: 18px;
     font-style: italic;
 }
-
-.faded {
-    opacity: 0.6;
-}