Add more Japanese pages and styling.

portfolio/css/custom.css

@@ -26,3 +26,8 @@ footer {
   text-align: center;
   padding: 15px 10px;
 }
+
+/* Japanese learning notes text colours. */
+span.jc-1 {
+  color: mediumvioletred;
+}

portfolio/pages/en/japan/language/notes/cheat-sheet.md

@@ -8,6 +8,16 @@ This is a collection of grammar that I use to glimpse over in order to remember
 
 ---
 
+## HTML Ruby
+
+<ruby><rb>京<rb>都<rb>市<rt>きょう<rt>と<rt>し</ruby>
+
+renders:<br/>
+
+<ruby><rb>京<rb>都<rb>市<rt>きょう<rt>と<rt>し</ruby>
+
+---
+
 ## 文法
 
 * これは紙を切る[のに](./tameni-youni-noni#のに)使うはさみです。　

portfolio/pages/en/japan/language/notes/expressions.md

@@ -0,0 +1,162 @@
+---
+logosub: "Japanese"
+language: "en"
+title: "Expressions"
+---
+
+Notes on some common expressions in Japanese.
+
+<figure class="text-center">
+  <picture class="d-flex justify-content-center">
+    <source
+      media="(max-width: 510px)"
+      srcset="/images/japan/irasutoya/school-sansyamendan-w240.webp"
+    />
+    <source
+      media="(max-width: 850px)"
+      srcset="/images/japan/irasutoya/school-sansyamendan-w480.webp"
+    />
+    <img
+      src="/images/japan/irasutoya/school-sansyamendan-w800.webp"
+      alt="Japanese expressions"
+      class="img-fluid"
+    />
+  </picture>
+</figure>
+
+* Image source: [irasutoya.com](https://www.irasutoya.com/)
+
+---
+
+**Entering a home**
+
+* おじゃまします。
+* Said by a visitor entering a house.
+* The reply is usually: どうぞ
+
+* どうぞお<ruby><rb>入<rt>はい</ruby>りください。
+* Please come in (to our house).
+
+* おいとまします。
+* I am leaving (your house).
+
+---
+
+**Introduction**
+
+* <Furigana kanji="自己紹介" kana="じこしょうかい"/>をします。
+* This is a self-introduction, said when people explain who they are, usually to a group.
+
+---
+
+**Telephone**
+
+* ケビンともうします<span class="jc-1">が</span>、松原さん<span class="jc-1">を</span>おねがいします。
+* Hello, this is Kevin, I want to speak to Matsubara-san please.
+
+---
+
+**Seats**
+
+* どうぞおかけください。
+* Please take a seat.
+
+* どうぞこちらにお<ruby><rb>座<rt>すわ</ruby>り<span class="jc-1">に</span>なってください。
+* Pleas take a seat here.
+
+---
+
+**こちらこそう**
+
+Lit. こちら *(this person)* こそ *(it is)*
+
+* 山田さん：「どうもありがとうございます。」
+* 田中さん：「こちらこそ。」
+* Yamada-san: Thank you very much.
+* Tanaka-san: No, thank you very much.
+
+
+* 山田さん：「ごめんなさい。」
+* 田中さん：「いいえ、こちらこそ。　ごめんあさい。」
+* Yamada-san: I am sorry.
+* Tanaka-san: No, I am the one that should be sorry.
+
+---
+
+**おかげさまで**
+
+Lit. *I am in the shadow of the gods.*
+
+Used to express: *thanks to you*, or: *thank you for asking*
+
+* 山田さん：「ご主人はお元気ですか。」
+* 田中さん：「はい、おかげさまで。」
+  * Do not reply with:
+  * お元気です。　(the お sounds wrong here)
+
+
+* おかげさまで元気です。
+* I am doing well, thank you for asking.
+
+---
+
+**どういたしまして**
+
+* 山田さん：「手伝ってくれてありがとう。」
+* 田中さん：「どういたしまして。」
+* Yamada-san: Thank you very much for helping.
+* Tanaka-san: You are welcome.
+
+
+---
+
+**ご自由に**
+
+* 山田さん：「このパンフレットをもらってもいいですか。」
+* 田中さん：「ええ。ご<ruby><rb>自<rb>由<rt>じ<rt>ゆう</ruby>に どうぞ。」
+* Yamada-san: Can I take this pamflet?
+* Tanaka-san: Sure. Please help yourself.
+  * Note, there is no such reply as: まらってください。
+
+自由 literally means: *Freedom*, *Liberty*.
+
+* どうぞご自由にケーキを食べて下さい。
+* Please help yourself to some cake
+
+---
+
+**承知いたしました**
+
+Often a reply to express a request is understood. Usually towards a customer.
+
+* 山田さん：「これ、プレゼント<ruby><rb>用<rt>よう</ruby>なので、つつんでもらえますか。」
+* 田中さん：「しょうちいたしました。」
+* Yamada-san: This is a gift, could you wrap it for me?
+* Tanaka-san: I understand.
+
+かしこまりました。　Is also often used in this case.
+
+<ruby><rb>了<rb>解<rt>りょう<rt>かい</ruby>しました。　Is often a reply to a command.
+
+---
+
+**New years greetings**
+
+* 山田さん：「あけまして おめでとうございます。」
+* 田中さん：「おめでとうございます。」
+
+Simply reply with that, do not use:
+
+* どうぞよいお年ね。
+* あめでとうございました。
+
+---
+
+**Requests**
+
+* テレビの音がちょっと大きすぎませんか。
+  * ↳ もう少し小さくしましょうか。
+
+
+* Dont you think the television is a bit loud?
+  * ↳ Shall I turn the volume down?

portfolio/templates/japan-language-notes.html

@@ -1,9 +1,9 @@
 <h2>Japanese language notes</h2>
-$for(notes)$
 <ul>
+$for(notes)$
   <li><a href="$url$">$title$</a></li>
-</ul>
 $endfor$
+</ul>
 <h2>て-forms</h2>
 
 <h2>Particles (助詞、じょし)</h2>
@@ -15,3 +15,13 @@ $endfor$
 <h2>Verbs</h2>
 
 <h2>Other</2>
+
+<hr/>
+
+<h2>Useful websites</h2>
+
+<ul>
+  <li><a href="https://www.w3.org/TR/html-ruby-extensions/" class="external" aria-label="w 3 dot org (opens external site in new tab)" target="_blank" rel="noopener noreferrer">w3.org Ruby extensions</a></li>
+  <li><a href="https://www.mlcjapanese.co.jp/"  class="external" aria-label="mlcjapanese dot co dot jp (opens external site in new tab)" target="_blank" rel="noopener noreferrer">mlcjapanese.co.jp</a></li>
+  <li><a href="https://www.wanikani.com/users/PA4KEV"  class="external" aria-label="wani kani dot com (opens external site in new tab)" target="_blank" rel="noopener noreferrer">My Wani&#x2022;Kani progress</a></li>
+</ul>