-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
366 lines (359 loc) · 33.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>annaPanda Portfolio Site</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="jquery-3.5.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<script src="main.js"></script>
<meta name="twitter:card" content="player" />
<meta name="twitter:title" content="annaPanda Portfolio Site" />
<meta name="twitter:site" content="@annaPanda8170" />
<meta name="twitter:description" content="元音楽家、現料亭勤務、バックエンドエンジニア転職希望。テックエキスパート63→61期夜間。" />
<meta name="twitter:player" content="https://s3-ap-northeast-1.amazonaws.com/annapanda.xyz/movie_annapandaPortfolioSite.mp4" />
<meta name="twitter:player:width" content="360" />
<meta name="twitter:player:height" content="200" />
<meta name="twitter:image" content="http://annapanda.xyz/twitter_card.jpg" />
<!--
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@annaPanda8170" />
<meta property="og:url" content="http://annapanda.xyz/" />
<meta property="og:title" content="annaPanda Portfolio Site" />
<meta property="og:description" content="元音楽家、現料亭勤務、バックエンドエンジニア転職希望。テックエキスパート63→61期夜間。" />
<meta property="og:image" content="http://annapanda.xyz/twitter_card.jpg" /> -->
</head>
<body>
<div id="matrix">
<div id="matrixUpper"></div>
</div>
<div id="background">
<div id="main">
<div id="underCircle">
<div id="upperCircle"></div>
</div>
<div id="li1-outer" class="li-outer">
<div id="li1" class="li">
<div class="myInfoWrapper">
<img src="image_me.jpg" alt="" class="myInfoImage">
<p class="myInfoDescription">原子力エンジニアの父と、ピアノ教師の母の元に生まれ育つ。1986年生まれ。
<br>20代前半まではクラシック音楽に夢中で、コンサート企画や演奏活動を行なっておりました。
<br>その後、全ての仕事に共通して大切なコミュニケーション能力を培うために、料亭で一流のサービスを目指すことに集中しました。
<br>約10年就業の節目に当たって改めて考え、現職でのコミュニケーション能力の修練の目的は達したと判断しました。次は得意分野での挑戦をしたいと思い、元々の<span>『論理』</span>や<span>『ものづくり』</span>に没頭する性を活かせるであろうプログラミングをしてみたところ、とても自分の思考に合致することに驚きこの道に進むことを決意し、
<br>ただいま転職活動中です。
</div>
</div>
</div>
<div id="li2-outer" class="li-outer">
<div id="li2" class="li">
<div class="gameWrapper">
<div class="homepageVTWrapper">
<a href="http://typing.annapanda.xyz/" target="_blank" rel="noopener noreferrer" class="videoFrame" data="タイピング-1">
<video src="movie_typing.mp4" class="gameVideo" autoplay loop muted></video>
</a>
<a href="http://typing.annapanda.xyz/" target="_blank" rel="noopener noreferrer" data="タイピング-2">
<h3 class="gameTitle">タイピングアプリ <i class="fas fa-link"></i></h3>
</a>
<a href="https://github.com/annaPanda8170/typing" target="_blank" rel="noopener noreferrer" class="gameGithub" data="タイピングGitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<p class="gameText"><span>【概要】</span><br>プログラミング学習開始2ヶ月の頃に作ったアプリです。<br>プログラミング学習を始めて、日本語であればブラインドタッチができるのにも関わらず英語になった途端まったくできないことに気づき、自分用に作りました。<br><span>【言語・デプロイ環境】</span><br>HTML CSS JQuery S3<br><span>【仕様】</span>
<br>オープニング画面でエンターを押すと、パソコンのキーが飛んで集まってきてゲーム開始です。次々にCSSのプロパティの名前が出てきて、それに基づいてタイピングしてゆき、間違えるとイナズマが走ります。100秒で終わるようにしており、終わったらキー一回単位で正解した数がポイントとして表示されます(間違えた数は今回は計算に入れてません)。
<br><span>【工夫点・作成記】</span>
<br>ハートもイナズマもCSSで書いており、画像は一切使っていません。オープニングでちょっと怖い感じを演出したく、フォントを入れ替えたりなど細かいことをしています。
<br>学習初期に夢中で作ったものでリファクタリングを完全に無視して作成してしまい、GutHubをみていただければわかりますが、なかなかにごちゃごちゃで、コピペで済ませているところが多くて長く、作った本人でもどこをどう触れていいのかわからない、アンタッチャブルなものになってしまいました。この学びから、このサイトのJQueryはかなり丁寧にリファクタリングしています。
<br>それでも、初めて作ったデザイン的に女の子に人気な、思い出深い大事なアプリです。</p>
</div>
</div>
</div>
<div id="li3-outer" class="li-outer">
<div id="li3" class="li">
<div class="applicationWrapper">
<div class="applicationVTWrapper">
<a href="https://restaurant-batch-management.xyz" target="_blank" rel="noopener noreferrer" class="videoFrame" data="レス管理-1">
<video src="movie_ryotei.mp4" class="applicationVideo" autoplay loop muted></video>
</a>
<a href="https://restaurant-batch-management.xyz" target="_blank" rel="noopener noreferrer" data="レス管理-2">
<h3 class="applicationTitle">レストラン<br>一括管理アプリ <i class="fas fa-link"></i></h3>
</a>
<a href="https://github.com/annaPanda8170/ryotei" target="_blank" rel="noopener noreferrer" class="applicationGithub" data="レス管理GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<p class="applicationText"><span>【概要】</span><br>レストラン管理の全てをここに集約します。<br>予約・会計・スタッフ・ドリンク・顧客の管理の機能を担います。
<br><span>【言語・デプロイ環境】</span><br>Rails EC2<br><span>【仕様】</span><br><a href="https://github.com/annaPanda8170/ryotei/blob/master/README.md" target="_blank" rel="noopener noreferrer" data="レス管理GitHub">ReadMe<i class="fab fa-github-alt"></i></a>をご覧ください。
<br><span>【工夫点・作成記】</span>
<br>予約に詳細・登録・編集機能はありますが、show・new・editアクションはありません。全てをindex画面で受け付け、Ajaxを大量に使用しています。
<br>予約チャート表で、予約帯をドラッグ&ドロップして部屋や時間を変更できます。UIの操作とデータベースのバリデーションが一致するように神経を使っています。
<br>現状は架空の料亭の管理をイメージして構築していますが、後々どんなレストランにも合わせてカスタマイズできるように抽象化するつもりです。</p>
</div>
<div class="applicationWrapper">
<div class="applicationVTWrapper">
<div class="videoFrame" data="テイクアウト-1">
<video src="movie_takeout.mp4" class="applicationVideo" autoplay loop muted></video>
</div>
<div data="テイクアウト-2">
<h3 class="applicationTitle">テイクアウト<br>簡単出店アプリ <i class="fas fa-link"></i></h3>
</div>
<a href="https://github.com/annaPanda8170/takeout" target="_blank" rel="noopener noreferrer" class="applicationGithub" data="テイクアウトGitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<p class="applicationText"><span>【概要】</span><br>ログイン不要!スマホで簡単テイクアウト注文。<br>注文はもちろん、出店販売もスマホのみで簡単に出来ます。
<br><span>【言語・デプロイ環境】</span><br>Rails<br><span>【仕様】</span><br><a href="https://github.com/annaPanda8170/takeout/blob/master/README.md" target="_blank" rel="noopener noreferrer" data="レス管理GitHub">ReadMe<i class="fab fa-github-alt"></i></a>をご覧ください。
<br><span>【工夫点・作成記】</span>
<br>注文者はログイン機能なしで買い物かごを保持しなくてはならないので、sessionメソッドを多用しています。
<br>Geolocationで現在地の緯度経度を取得し、GoogleMapAPIでそれを住所に変換します。
<br>注文者は現在地から近いレストランを検索できます。</p>
</div>
<div class="applicationWrapper">
<div class="applicationVTWrapper">
<div class="videoFrame">
<video src="movie_expendables.mp4" class="applicationVideoExpendables" autoplay loop muted></video>
</div>
<h3 class="applicationTitle">消耗品管理アプリ</h3>
<a href="https://github.com/annaPanda8170/expendables" target="_blank" rel="noopener noreferrer" class="applicationGithub" data="消耗品GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<p class="applicationText"><span>【概要】</span><br>家のティッシュやラップ、必要なときにないとイライラするけど、あまり沢山は抱えたくない。<br>家の全消耗品の管理をします。
<br><span>【言語・デプロイ環境】</span><br>Rails<br><span>【仕様】</span><br>半年と決めたら、半年に一度まとめて買えばいいように保有最適数を自動計算します。楽天の買い物かごに入れるところまで自動で行い、最後に楽天に行って確認してボタン一つで決済できます。
<br><span>【工夫点・作成記】</span>
<br>このアプリと楽天の自身のアカウントとの行き来にスクレイピングを使っています。
<br>このアプリから楽天にログインが必要なので楽天のパスワードを入力しなければなりませんが、マスクして安全にしています。
<br>スクレイピングは処理に時間がかかるので、Active Jobというバックグラウンド処理を行う技術を使っています。
<br>※こだわて作ったアプリでしたが、楽天が突然このスクレイピングを弾く仕様にしてしまったので、使えなくなってしまいました。</p>
</div>
</div>
</div>
<div id="li4-outer" class="li-outer">
<div id="li4" class="li">
<div class="homepageWrapper">
<div class="homepageVTWrapper">
<div class="videoFrame">
<video src="movie_annapandaPortfolioSite.mp4" class="homepageVideo" autoplay loop muted></video>
</div>
<h3 class="homepageTitle">このページ</h3>
<a href="https://github.com/annaPanda8170/portfolio_site" target="_blank" rel="noopener noreferrer" class="homepageGithub" data="ポートフォリオサイトのGitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<p class="homepageText"><span>【概要】</span><br>学習開始5ヶ月目に作成開始しました。<br>全体をスクロールしない仕様にし、全体を把握しやすい形にしました。
<br>まだ一般的な形式ではないですが、これこそが未来のWebページであるという提案です。<br><span>【言語・デプロイ環境】</span><br>HTML CSS JQuery S3<br>
<span>【仕様】</span><br>オープニングアニメーションが流れた後、メイン画面がフェードインします。左に7つのメニューがありカーソルをのせると回転してメニュー内容が登場します。
<br>それぞれの中身で記事が長いようでしたらスクロールできるようになっています。<br>
<span>【工夫点・作成記】</span><br>プラグイン等は使用していません。流れてくる文字、回転メニューの仕組み、Skillの円グラフアニメーションまで全て手作りです。<br>左の大きな丸の周りに7つのメニュー内容を均等に配置するために三角関数を用いています。
<br>回転において、360度がメニュー数7で割り切れないことによる誤差や、浮動小数点演算誤差も克服しています。
<br>オープニングやメインメニュー裏の文字の流れは動画ではありません。HTMLのテキストです。これらはランダムの色・文字・場所で流しています。
<br>このページ作成は処理の重さとの戦いでした。泣く泣く諦めた機能も数多くあります。JQueryのみで作成する限界点かもしれません。次の道具立てを模索します。
<br>デザインについてはなんとなくやっているので説明ができません(笑)<br><span>【テスト】</span>
<br><a href="https://github.com/annaPanda8170/portfolio_site/blob/master/link_test.rb" target="_blank" rel="noopener noreferrer" class="gameTest" data="リンクのテストのGitHub">・リンクのテスト <i class="fab fa-github-alt"></i></a></p>
</div>
<div class="homepageWrapper">
<div class="homepageVTWrapper">
<a href="http://annapanda-webpagedemos.xyz/company1_index.html" target="_blank" rel="noopener noreferrer" class="videoFrame" data="会社1-1">
<video src="movie_company.mp4" class="homepageVideo" autoplay loop muted></video>
</a>
<a href="http://annapanda-webpagedemos.xyz/company1_index.html" target="_blank" rel="noopener noreferrer" data="会社1-2"> <h3 class="homepageTitle">コンサルタント会社の<br>Topページ風 <i class="fas fa-link"></i></h3></p>
<a href="https://github.com/annaPanda8170/WPD__company1" target="_blank" rel="noopener noreferrer" class="homepageGithub" data="会社1GitHb">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<p class="homepageText"><span>【概要】</span><br>レスポンシブ学習用です。<br>
<span>【言語・デプロイ環境】</span><br>HTML CSS JQuery S3<br>
<span>【仕様】</span><br>無段階でどのサイズでも綺麗に見えるように工夫しました。
<br>スクロールに対してズレて移動するボックスがあります。<br>
<span>【工夫点・作成記】</span><br>レスポンシブにCSSだけでなく、JQueryも使ってます。
<br>斜めの背景はborderを使用してます。このリサイズが難しいです。</p>
</div>
<div class="homepageWrapper">
<div class="homepageVTWrapper">
<a href="http://annapanda-webpagedemos.xyz/heike_index.html" target="_blank" rel="noopener noreferrer" class="videoFrame" data="平家-1">
<video src="movie_heike.mp4" class="homepageVideo" autoplay loop muted></video>
</a>
<a href="http://annapanda-webpagedemos.xyz/heike_index.html" target="_blank" rel="noopener noreferrer" data="平家-2"> <h3 class="homepageTitle">平家物語<br>巻第一 前半 <i class="fas fa-link"></i></h3></a>
<a href="https://github.com/annaPanda8170/WPD__heike" target="_blank" rel="noopener noreferrer" class="homepageGithub" data="平家GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<p class="homepageText"><span>【概要】</span><br>電子書籍やブログ記事などの新しい形態の提案です。<br>
<span>【言語・デプロイ環境】</span><br>HTML CSS JQuery S3<br>
<span>【仕様】</span><br>スクロールに対して背景は固定して、指定の距離スクロールしたら変化します。<br>
<span>【工夫点・作成記】</span><br>平家物語自体に意味はありません。デモページに文字を埋めるのに著作権の切れた小説を使うという話を聞いてやってみました。
<br>電子書籍において、一定のブロックごとにイラスト等を差し込んでいくことを想定しています。</p>
</div>
</div>
</div>
<div id="li5-outer" class="li-outer">
<div id="li5" class="li">
<h3 id="bapTitle">Basic Application Project </h3>
<p id="bapDescription">Rails学習に必要なあらゆる技術一つにつきアプリ一つを作りQiitaに解説記事を書きました。
<br>学習に必要な最低限のアプリにすることによって、技術に純粋にフォーカスできるように整理しました。</p>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>超最低限のRailsアプリを丁寧に作る<br> (もう一度きちんと復習して初心者を卒業しよう)</div>
<a href="https://qiita.com/annaPanda8170/items/8856425be9d563fbffa7" target="_blank" rel="noopener noreferrer" class="bapQiita" data="超最低限Qiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/minimum_rails_application" target="_blank" rel="noopener noreferrer" class="bapGithub" data="超最低限GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>超最低限のRailsアプリをテストする(モデル編)</div>
<a href="https://qiita.com/annaPanda8170/items/955d2db7058a6928f281" target="_blank" rel="noopener noreferrer" class="bapQiita" data="超最低限テストモデルQiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/minimum_rails_application/tree/%E8%B6%85%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AERails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%83%86%E3%82%B9%E3%83%88%E3%81%99%E3%82%8B%EF%BC%88%E3%83%A2%E3%83%87%E3%83%AB%E7%B7%A8%EF%BC%89" target="_blank" rel="noopener noreferrer" class="bapGithub" data="超最低限GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>『メッセージを投稿』できる最低限のRailsアプリを丁寧に作る<br> (これで初心者完全卒業!)</div>
<a href="https://qiita.com/annaPanda8170/items/c042d533a3afb28213ee" target="_blank" rel="noopener noreferrer" class="bapQiita" data="複数画像Qiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/minimum_rails_application/tree/%E3%80%8E%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E6%8A%95%E7%A8%BF%E3%80%8F%E3%81%A7%E3%81%8D%E3%82%8B%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AERails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%B8%81%E5%AF%A7%E3%81%AB%E4%BD%9C%E3%82%8B(%E3%81%93%E3%82%8C%E3%81%A7%E5%88%9D%E5%BF%83%E8%80%85%E5%AE%8C%E5%85%A8%E5%8D%92%E6%A5%AD!)" target="_blank" rel="noopener noreferrer" class="bapGithub" data="複数画像GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>『2ページ遷移して会員登録』できる最低限のRailsアプリを丁寧に作る<br> (deviseをウィザード形式に拡張)</div>
<a href="https://qiita.com/annaPanda8170/items/c4e1052d254518d96cfa" target="_blank" rel="noopener noreferrer" class="bapQiita" data="複数画像Qiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/minimum_rails_application/tree/%E3%80%8E2%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB%E3%81%97%E3%81%A6%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E3%80%8F%E3%81%A7%E3%81%8D%E3%82%8B%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AERails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%B8%81%E5%AF%A7%E3%81%AB%E4%BD%9C%E3%82%8B%EF%BC%88devise%E3%82%92%E3%82%A6%E3%82%A3%E3%82%B6%E3%83%BC%E3%83%89%E5%BD%A2%E5%BC%8F%E3%81%AB%E6%8B%A1%E5%BC%B5%EF%BC%89" target="_blank" rel="noopener noreferrer" class="bapGithub" data="複数画像GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>『メッセージと複数画像の投稿』ができる最低限のRailsアプリを<br> 丁寧に作る</div>
<a href="https://qiita.com/annaPanda8170/items/b8ce5c1f155ba45d67b3" target="_blank" rel="noopener noreferrer" class="bapQiita" data="複数画像Qiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/minimum_rails_application/tree/%E3%80%8E%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%A8%E8%A4%87%E6%95%B0%E7%94%BB%E5%83%8F%E3%81%AE%E6%8A%95%E7%A8%BF%E3%80%8F%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AERails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%B8%81%E5%AF%A7%E3%81%AB%E4%BD%9C%E3%82%8B" target="_blank" rel="noopener noreferrer" class="bapGithub" data="複数画像GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>『非同期でのメッセージ投稿』が理解できる最低限のRailsアプリを<br> 丁寧に作る (Ajax苦手の自分とお別れしよう)</div>
<a href="https://qiita.com/annaPanda8170/items/8c014d6c73cb14ee61cb" target="_blank" rel="noopener noreferrer" class="bapQiita" data="超最低限Qiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/minimum_rails_application/tree/%E3%80%8E%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%A7%E3%81%AE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E6%8A%95%E7%A8%BF%E3%80%8F%E3%81%8C%E7%90%86%E8%A7%A3%E3%81%A7%E3%81%8D%E3%82%8B%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AERails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%B8%81%E5%AF%A7%E3%81%AB%E4%BD%9C%E3%82%8B%EF%BC%88Ajax%E8%8B%A6%E6%89%8B%E3%81%AE%E8%87%AA%E5%88%86%E3%81%A8%E3%81%8A%E5%88%A5%E3%82%8C%E3%81%97%E3%82%88%E3%81%86%EF%BC%89" target="_blank" rel="noopener noreferrer" class="bapGithub" data="超最低限GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>ツイッター風Railsアプリ最短復習<br> (忙しい人の流し読みで開発シリーズ)</div>
<a href="https://qiita.com/annaPanda8170/items/844684cb739f99d3f114" target="_blank" rel="noopener noreferrer" class="bapQiita" data="超最低限Qiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/cheaptweet" target="_blank" rel="noopener noreferrer" class="bapGithub" data="超最低限GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>ツイッター風Railsアプリをデプロイする<br> (前編:unicornのみで取り急ぎ繋げよう)</div>
<a href="https://qiita.com/annaPanda8170/items/88c601833e60fc4ddb40" target="_blank" rel="noopener noreferrer" class="bapQiita" data="ツイッター風デプロイQiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/cheaptweet/tree/%E3%83%84%E3%82%A4%E3%83%83%E3%82%BF%E3%83%BC%E9%A2%A8Rails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer" class="bapGithub" data="超最低限GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
<div class="bapWrapper">
<div class="bapTitle"><span>● </span>ツイッター風Railsアプリをテストする(統合テスト編)</div>
<a href="https://qiita.com/annaPanda8170/items/6f07235b271063401482" target="_blank" rel="noopener noreferrer" class="bapQiita" data="ツイッター風テスト統合Qiita">Qiita <i class="fas fa-link"></i></a>
<a href="https://github.com/annaPanda8170/cheaptweet/tree/%E3%83%84%E3%82%A4%E3%83%83%E3%82%BF%E3%83%BC%E9%A2%A8Rails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%83%86%E3%82%B9%E3%83%88%E3%81%99%E3%82%8B%EF%BC%88%E7%B5%B1%E5%90%88%E3%83%86%E3%82%B9%E3%83%88%E7%B7%A8%EF%BC%89" target="_blank" rel="noopener noreferrer" class="bapGithub" data="超最低限GitHub">GitHub <i class="fab fa-github-alt"></i></a>
</div>
</div>
</div>
<div id="li6-outer" class="li-outer">
<div id="li6" class="li">
<div class="skillOpening">
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-css3.png" class="skillOpeningImage" id="skillOpeningImage1" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling">
<img src="image_javascript.svg" alt="" class="skillOpeningImage" id="skillOpeningImage2">
<img src="image_ruby.png" alt="" class="skillOpeningImage" id="skillOpeningImage3">
<img src="image_rails.svg" alt="" class="skillOpeningImage" id="skillOpeningImage4">
<img src="image_github.png" alt="" class="skillOpeningImage" id="skillOpeningImage5">
<img src="image_aws.png" alt="" class="skillOpeningImage" id="skillOpeningImage6">
<img src="image_c.svg" alt="" class="skillOpeningImage" id="skillOpeningImage7">
<div id="pieChart99" class="pieChart">???</div>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="image_c.svg" alt="" class="skillImage">
</div>
</div>
<div id="pieChart7" class="pieChart">20</div>
<p class="skillDescription"><span>C言語</span>
<br>学習開始したばかりです。アルゴリズムの本がC++で書かれていることが多いようなのでまずはC言語を勉強し始めました。</p>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-css3.png" class="skillImage" id="skillImageHtml" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling">
</div>
</div>
<div id="pieChart1" class="pieChart">92</div>
<p class="skillDescription"><span>HTML・CSS</span>
<br>問題なく扱えます。<br>今後の目標は、SEO対策をマスターすることと、canvas要素を扱えるようにすることです。</p>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="image_javascript.svg" alt="" class="skillImage">
</div>
</div>
<div id="pieChart2" class="pieChart">78</div>
<p class="skillDescription"><span>JavaScript</span>
<br>問題なく扱えます。<br>JQueryを中心に使っています。<br>今後の目標は、JQueryを全て純JavaScriptに翻訳できるようにすることです。</p>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="image_ruby.png" alt="" class="skillImage">
</div>
</div>
<div id="pieChart3" class="pieChart">88</div>
<p class="skillDescription"><span>Ruby</span>
<br>問題なく扱えます。ただ、まだまだ効率的に書けると感じています。<br>今後の目標は、別言語を学んでRubyを客観的に捉えることと、gem制作をすることです。</p>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="image_rails.svg" alt="" class="skillImage">
</div>
</div>
<div id="pieChart4" class="pieChart">75</div>
<p class="skillDescription"><span>Rails</span>
<br>GitHubにのっているだけで3000人を超える人が制作に関わっているRubyフレームワーク、奥深さに毎度驚かされます。<br>基礎は捉えています。<br>今後の目標は、あらゆるバージョンで使えるようになることです。</p>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="image_github.png" alt="" class="skillImage">
</div>
</div>
<div id="pieChart5" class="pieChart">72</div>
<p class="skillDescription"><span>Git・GitHub</span>
<br>難しくて使うのがめんどくさいと思っていたのが、いつのまにか使わないとめんどくさいと感じるようになってきました。<br>基礎は捉えています。<br>今後の目標は、まだ知らない機能を模索することです。</p>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="image_aws.png" alt="" class="skillImage" id="skillImageAws">
</div>
</div>
<div id="pieChart6" class="pieChart">68
</div>
<p class="skillDescription"><span>AWS</span>
<br>EC2、S3、Route 53をよく使用しています。<br>まだまだ自由に扱えるとは言い難いです。<br>今後の目標は、CUIで自由に操作できるようになることです。</p>
</div>
<div class="skillWrapper">
<div class="skillImageWrapper">
<div class="skillImageFrame">
<img src="image_docker.png" alt="" class="skillImage">
</div>
</div>
<div id="pieChart8" class="pieChart">40
</div>
<p class="skillDescription"><span>Docker</span>
<br>docker-composeを主に使用しています。<br>環境の移行が楽になる一方、開発過程での更新を反映させるのに手間や時間がかかり戸惑っております。</p>
</div>
<div class="arrow">
<div class="scroll">scroll</div>
<div class="arrowUpper"></div>
<div class="arrowDowner"></div>
</div>
</div>
</div>
<div id="li7-outer" class="li-outer">
<div id="li7" class="li">
<div id="gmail">
annapanda8170@gmail.com
<div id="gmailButton">COPY<br>Email Address</div>
</div>
</div>
</div>
</div>
<nav>
<ul>
<li><span id="listName1" class="listName">About Me</span></li>
<li><span id="listName2" class="listName">Games</span></li>
<li><span id="listName3" class="listName">Applications</span></li>
<li><span id="listName4" class="listName">WebPageDemos</span></li>
<li><span id="listName5" class="listName">B.A.P.</span></li>
<li><span id="listName6" class="listName">Skill</span></li>
<li><span id="listName7" class="listName">Contact</span></li>
</ul>
</nav>
</div>
<div id="logo_container">
<div class="logo" id="logo1">annaPanda</div>
<div class="logo" id="logo2"> PortfolioSite</div>
</div>
</body>
</html>