diff --git a/public/images/memories/calil.png b/public/images/memories/calil.png
new file mode 100755
index 0000000..c32d84b
Binary files /dev/null and b/public/images/memories/calil.png differ
diff --git a/public/images/memories/dwango_intern.jpg b/public/images/memories/dwango_intern.jpg
new file mode 100644
index 0000000..72f466e
Binary files /dev/null and b/public/images/memories/dwango_intern.jpg differ
diff --git a/public/images/memories/hatena.png b/public/images/memories/hatena.png
new file mode 100644
index 0000000..deba8a0
Binary files /dev/null and b/public/images/memories/hatena.png differ
diff --git a/public/images/memories/issue.png b/public/images/memories/issue.png
new file mode 100644
index 0000000..edecf4a
Binary files /dev/null and b/public/images/memories/issue.png differ
diff --git a/public/images/memories/kayac_intern.png b/public/images/memories/kayac_intern.png
new file mode 100644
index 0000000..aa387cf
Binary files /dev/null and b/public/images/memories/kayac_intern.png differ
diff --git a/public/images/memories/kayac_job.jpg b/public/images/memories/kayac_job.jpg
new file mode 100644
index 0000000..a9ea33c
Binary files /dev/null and b/public/images/memories/kayac_job.jpg differ
diff --git a/public/images/memories/live2d_like.png b/public/images/memories/live2d_like.png
new file mode 100755
index 0000000..4098ffd
Binary files /dev/null and b/public/images/memories/live2d_like.png differ
diff --git a/public/images/memories/moongift.png b/public/images/memories/moongift.png
new file mode 100644
index 0000000..d36663b
Binary files /dev/null and b/public/images/memories/moongift.png differ
diff --git a/public/images/memories/pixiv_intern.jpg b/public/images/memories/pixiv_intern.jpg
new file mode 100755
index 0000000..0b7994b
Binary files /dev/null and b/public/images/memories/pixiv_intern.jpg differ
diff --git a/public/images/memories/pixiv_xss.png b/public/images/memories/pixiv_xss.png
new file mode 100644
index 0000000..d41115b
Binary files /dev/null and b/public/images/memories/pixiv_xss.png differ
diff --git a/public/index.html b/public/index.html
index 5bcf7fe..468524b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -443,6 +443,7 @@
思い出
+
diff --git a/src/scripts/app.js b/src/scripts/app.js
index 44d6d1f..0b73cdd 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -4,10 +4,12 @@ import * as util from './lib/util'
import preload_json from './config/preload'
import history_json from './config/history'
import product_json from './config/product'
+import memories_json from './config/memories'
// components
import './components/history-box.tag'
import './components/product-box.tag'
+import './components/memories-box.tag'
// init
util.setRingSize()
@@ -24,3 +26,4 @@ util.startLoading(() => {
// render
riot.mount('history-box', { historys: history_json })
riot.mount('product-box', { products: product_json })
+riot.mount('memories-box', { memories: memories_json })
diff --git a/src/scripts/components/memories-box.tag b/src/scripts/components/memories-box.tag
new file mode 100644
index 0000000..0184f52
--- /dev/null
+++ b/src/scripts/components/memories-box.tag
@@ -0,0 +1,9 @@
+
+
+
diff --git a/src/scripts/config/memories.js b/src/scripts/config/memories.js
new file mode 100644
index 0000000..7fdd186
--- /dev/null
+++ b/src/scripts/config/memories.js
@@ -0,0 +1,62 @@
+export default [
+ {
+ "title": "英語できないことが界隈に広まる",
+ "thumb": "./images/memories/issue.png",
+ "link": "https://togetter.com/li/1188562",
+ "date": "2018/01/10"
+ },
+ {
+ "title": "satella.ioがMOONGIFTで紹介される",
+ "thumb": "./images/memories/moongift.png",
+ "link": "https://www.moongift.jp/2017/12/satella-io-%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E7%89%88live2d%EF%BC%81/",
+ "date": "2017/12/29"
+ },
+ {
+ "title": "面白法人カヤックにてアルバイト",
+ "thumb": "./images/memories/kayac_job.jpg",
+ "link": "https://twitter.com/eriri_jp/status/909941616508526592",
+ "date": "2017/09/19"
+ },
+ {
+ "title": "Pixivのサマーインターンが終了しました!",
+ "thumb": "./images/memories/pixiv_intern.jpg",
+ "link": "http://yuki540.hatenablog.jp/entry/2017/09/14/%E3%83%94%E3%82%AF%E3%82%B7%E3%83%96%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%B3%E3%82%92%E7%B5%82%E3%81%88%E3%81%A6",
+ "date": "2017/09/18"
+ },
+ {
+ "title": "株式会社ドワンゴのサマーインターン終了!",
+ "thumb": "./images/memories/dwango_intern.jpg",
+ "link": "https://twitter.com/eriri_jp/status/901036007738327040",
+ "date": "2017/08/25"
+ },
+ {
+ "title": "株式会社はてなに会社見学に行ってきました!",
+ "thumb": "./images/memories/hatena.png",
+ "link": "https://twitter.com/eriri_jp/status/887906419462164480",
+ "date": "2017/07/20"
+ },
+ {
+ "title": "面白法人カヤックのインターンを終えて",
+ "thumb": "./images/memories/kayac_intern.png",
+ "link": "http://yuki540.hatenablog.jp/entry/2017/07/16/%E9%9D%A2%E7%99%BD%E6%B3%95%E4%BA%BA%E3%82%AB%E3%83%A4%E3%83%83%E3%82%AF%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%B3%E3%82%92%E7%B5%82%E3%81%88%E3%81%A6",
+ "date": "2017/07/16"
+ },
+ {
+ "title": "Pixivの脆弱性を報告し、5000円&5pts獲得",
+ "thumb": "./images/memories/pixiv_xss.png",
+ "link": "http://yuki540.hatenablog.jp/entry/2017/07/03/Pixiv%E3%81%AE%E8%84%86%E5%BC%B1%E6%80%A7%28Reflected_XSS%29%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E3%81%A6%E3%80%815000%E5%86%86%E8%B2%B0%E3%81%A3%E3%81%9F%E8%A9%B1",
+ "date": "2017/06/20"
+ },
+ {
+ "title": "LiveDライクなオープンソースソフトウェアの開発",
+ "thumb": "./images/memories/live2d_like.png",
+ "link": "http://niconare.nicovideo.jp/watch/kn2342",
+ "date": "2017/02/26"
+ },
+ {
+ "title": "日本最大の図書館検索サイト カーリルの脆弱性を報告",
+ "thumb": "./images/memories/calil.png",
+ "link": "https://twitter.com/eriri_jp/status/794745927856635904",
+ "date": "2016/11/04"
+ }
+]
diff --git a/src/scss/modules/pc/_memories-page.scss b/src/scss/modules/pc/_memories-page.scss
new file mode 100644
index 0000000..3cbb252
--- /dev/null
+++ b/src/scss/modules/pc/_memories-page.scss
@@ -0,0 +1,54 @@
+@include pc-layout {
+ .memories-page {}
+
+ .memories-box {
+ width: 600px;
+ margin: 0 auto;
+ margin-top: 50px;
+ padding-bottom: 50px;
+
+ a {
+ position: relative;
+ float: left;
+ display: block;
+ width: 290px; height: 250px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ background-color: $theme-light-purple;
+ overflow: hidden;
+ padding: 5px;
+ box-sizing: border-box;
+ transition: all 0.35s ease 0s;
+
+ img {
+ width: 100%;
+ display: block;
+ }
+
+ .title {
+ font-size: 16px;
+ color: $theme-bg;
+ padding: 5px;
+ box-sizing: border-box;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .date {
+ position: absolute;
+ bottom: 0; right: 0;
+ font-size: 12px;
+ color: #ccc;
+ text-align: right;
+ display: block;
+ padding: 5px;
+ box-sizing: border-box;
+ }
+ }
+ a:nth-child(2n) { margin-right: 0; }
+ a:hover { background-color: $theme-pink; }
+
+ &:after { content: ""; display: block; clear: both; }
+ }
+}
diff --git a/src/scss/modules/sp/_memories-page.scss b/src/scss/modules/sp/_memories-page.scss
new file mode 100644
index 0000000..b1cd16f
--- /dev/null
+++ b/src/scss/modules/sp/_memories-page.scss
@@ -0,0 +1,46 @@
+@include sp-layout {
+ .memories-page {}
+
+ .memories-box {
+ margin-top: 50px;
+ padding-bottom: 50px;
+
+ a {
+ position: relative;
+ display: block;
+ width: 90%;
+ margin: 0 auto;
+ margin-bottom: 20px;
+ background-color: $theme-light-purple;
+ overflow: hidden;
+ padding: 5px;
+ box-sizing: border-box;
+ transition: all 0.35s ease 0s;
+
+ img {
+ width: 100%;
+ display: block;
+ }
+
+ .title {
+ font-size: 15px;
+ color: $theme-bg;
+ padding: 10px 5px;
+ box-sizing: border-box;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .date {
+ font-size: 12px;
+ color: #ccc;
+ text-align: right;
+ display: block;
+ padding: 5px;
+ box-sizing: border-box;
+ }
+ }
+ a:hover { background-color: $theme-pink; }
+ }
+}
diff --git a/src/scss/modules/tablet/_memories-page.scss b/src/scss/modules/tablet/_memories-page.scss
new file mode 100644
index 0000000..1a65be4
--- /dev/null
+++ b/src/scss/modules/tablet/_memories-page.scss
@@ -0,0 +1,46 @@
+@include tablet-layout {
+ .memories-page {}
+
+ .memories-box {
+ margin-top: 50px;
+ padding-bottom: 50px;
+
+ a {
+ position: relative;
+ display: block;
+ width: 80%;
+ margin: 0 auto;
+ margin-bottom: 40px;
+ background-color: $theme-light-purple;
+ overflow: hidden;
+ padding: 5px;
+ box-sizing: border-box;
+ transition: all 0.35s ease 0s;
+
+ img {
+ width: 100%;
+ display: block;
+ }
+
+ .title {
+ font-size: 18px;
+ color: $theme-bg;
+ padding: 10px 5px;
+ box-sizing: border-box;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .date {
+ font-size: 14px;
+ color: #ccc;
+ text-align: right;
+ display: block;
+ padding: 5px;
+ box-sizing: border-box;
+ }
+ }
+ a:hover { background-color: $theme-pink; }
+ }
+}