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; } + } +}