portfolio/index.html at gh-pages · big2men/portfolio · GitHub

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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html lang="en">
<!--

WEBLOCKS v1.0.0

ダウンロードありがとうございます。
あなたが作った組み合わせはこちらです。
http://weblocks.toiee.jp/#103,201,402,301,302,502,902

こちらには全ブロックのカタログをご用意しています。
http://weblocks.toiee.jp/catalog-103,201,402,301,302,502,902

-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Weblocks v1.0.0">

    <!-- タイトルを変更してください start -->
    <title>堀田　駿 - ポートフォリオ</title>
    <!-- タイトルを変更してください end -->

    <!-- google web font -->
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet">
    <!-- fontawesome -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- slick -->
    <link href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- external style -->
    <link href="assets/css/externals.css" rel="stylesheet">
    <!-- Weblocks -->
    <link href="assets/css/main.css" id="weblocks_stylesheet" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wb-factory">

        <!-- weblocks ヘッダー 103 start -->
<!--  : data-background-image: 背景画像を表示します
-->
<header class="wb-block wb-header wb-block-103" data-background-image="assets/img/img01.jpg">
  <!-- ナビ start -->
  <!--  : data-spy="affix": ナビを追従したい時に使用します。追従させたくない場合は、削除してください。
        : data-offset-top : ナビの追従を始めるスクロール位置を指定します。
  -->
  <nav class="navbar navbar-static-top wb-navbar" data-spy="affix" data-offset-top="100">
    <div class="container wb-navbar-container">
      <!-- ハンバーガーメニュー start -->
      <div class="navbar-header wb-navbar-header">
        <!-- ロゴ start -->
        <a class="navbar-brand wb-logo" href="/">
          S H
          <!-- ロゴ画像を使いたい時は、上のLogoを消して、imgタグのコメントを外してください。-->
<!--           <img src="assets/img/logo.png"> -->
        </a>
        <!-- ロゴ end -->
        <!-- ハンバーガーボタン start -->
        <div class="wb-navbar-hamburger">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#wb_block_103_navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <!-- ハンバーガーボタン end -->
      </div>
      <!-- ハンバーガーメニュー end -->
      <!-- ナビのリスト start -->
      <div class="collapse navbar-collapse" id="wb_block_103_navbar">
        <!-- 左のナビ start -->
        <ul class="nav navbar-nav navbar-left">
          <li><a href="#projects">開発実績</a></li>
          <li><a href="#contribution_engineer">技術者としての貢献</a></li>
        </ul>
        <!-- 左のナビ end -->
        <!-- 右のナビ start -->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#contribution_customer">顧客への貢献</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <!-- 右のナビ end -->
      </div>
      <!-- ナビのリスト end -->
    </div>
  </nav>
  <!-- ナビ end -->

  <div class="container wb-container">
    <!-- コンテンツ start -->
    <!--  : data-animation: アニメーションを指定します。
                      fadeInDown-series : 下層の項目を順次表示します。
    -->
    <div class="wb-contents wb-font-white text-center" data-animation="fadeInDown-series">
      <!-- タイトル start -->
      <h1 class="wb-font-bold">ポートフォリオ<br><small class="wb-font-white">Shun Hotta</small></h1>

      <!-- タイトル end -->
      <!-- ボタン start -->
      <a href="#projects"><i class="fa fa-chevron-down fa-3x"></i></a>
      <!-- ボタン end -->
    </div>
    <!-- コンテンツ end -->
  </div>
</header>
<!-- weblocks ヘッダー 103 end -->


<!-- weblocks 3つの特徴 402 start -->
<section class="wb-block wb-section wb-block-402 wb-bg-white-cream" id="projects">
  <div class="container wb-container">
    <!-- コンテンツ start -->
    <div class="wb-contents">
      <!-- タイトル start -->
      <h2 class="wb-font-bold text-center">開発実績</h2>
      <!-- タイトル end -->
      <div class="row">
        <!-- 1つめの特徴 start -->
        <div class="col-sm-4 text-center wb-padding-side-40 wb-padding-top-30">
          <!-- 1つめの画像リンク -->
          <a href="https://app.exe-up.jp/" target="app"><img src="assets/img/circle03.png" alt="" width="100" class="img-circle img-responsive center-block" /></a>
          <!-- 1つめの説明 -->
          <h4 class="wb-font-bold">カラダカエル<small>2016</small></h4>
          <p>習慣化を強力にサポートするツール。<br>
            フロントサイドは React + Redux のシングルページアプリケーションとして、サーバーサイドは Ruby on Rails により API が実装されている。
            インフラはAWS上で構築されている。 Docker コンテナを利用している。<br>
            プロジェクトリーダーとして企画から開発、テストまで担当。
          <!-- 1つめの説明 end -->
        </div>
        <!-- 1つめの特徴 end -->

        <!-- 2つめの特徴 start -->
        <div class="col-sm-4 text-center wb-padding-side-40 wb-padding-top-30">
          <!-- 2つめの画像リンク -->
          <a href="http://weblocks.toiee.jp/" target="app"><img src="assets/img/circle01.png" alt="" width="100" class="img-circle img-responsive center-block" /></a>
          <!-- 2つめの説明 start -->
          <h4 class="wb-font-bold">WEBLOCKS<small>2015</small></h4>
          <p>プロトタイピングツール＋ジェネレーター。
            レスポンシブなキャンペーンページ等のパララックスページを短時間で作ることができる。
            このポートフォリオページはWEBLOCKSを利用。<br>
            サーバーサイドは Node.js、フロントサイドには Vue.js を採用。
            開発チームで業務の合間を縫って開発。<br>

            サーバーサイドとフロントエンド、ディレクションを担当。</p>
          <!-- 2つめの説明 end -->
        </div>
        <!-- 2つめの特徴 end -->

        <!-- 3つめの特徴 start -->
        <div class="col-sm-4 text-center wb-padding-side-40 wb-padding-top-30">
          <!-- 3つめの画像リンク -->
          <a href="https://dmetlabel.com/" target="app"><img src="assets/img/circle02.png" alt="" width="100" class="img-circle img-responsive center-block" /></a>
          <!-- 3つめの説明 start -->
          <h4 class="wb-font-bold">LABEL<small>2015〜2016</small></h4>
          <p>ここでしか買えない海外製品や一点ものの商品を扱うECサイト（閉店済み）。<br>
            フレームワークは Ruby on Rails で、インフラはAWSで構築。
            全文検索エンジンの Elastic Search を利用している。<br>
            中途採用メンバーだったため追加機能の実装や、運用を担当。
          </p>
          <!-- 3つめの説明 end -->
        </div>
        <!-- 3つめの特徴 end -->
      </div>
    </div>
    <!-- コンテンツ start -->
  </div>
</section>
<!-- weblocks 3つの特徴 402 end -->

<!-- weblocks 3つの特徴 402 start -->
<section class="wb-block wb-section wb-block-402 wb-bg-white-cream" id="projects">
  <div class="container wb-container">
    <!-- コンテンツ start -->
    <div class="wb-contents">
      <div class="row">
        <!-- 1つめの特徴 start -->
        <div class="col-sm-4 col-sm-offset-2 text-center wb-padding-side-40 wb-padding-top-30">
          <!-- 1つめの画像リンク -->
          <a href="http://www.open-qhm.net/" target="app"><img src="assets/img/circle03.png" alt="" width="100" class="img-circle img-responsive center-block" /></a>
          <!-- 1つめの説明 -->
          <h4 class="wb-font-bold">QHM + haik<small>2009〜2015</small></h4>
          <p>誰でも高度なWebサイトを「作れる！」システム。
            PHPで書かれており、データベースレスのため、レンタルサーバーに置けば即動作する。<br>
            PukiWiki ベースの自社フレームワークを使用。開発と運用、サポートを担当。
          <!-- 1つめの説明 end -->
        </div>
        <!-- 1つめの特徴 end -->

        <!-- 3つめの特徴 start -->
        <div class="col-sm-4 text-center wb-padding-side-40 wb-padding-top-30">
          <!-- 3つめの画像リンク -->
          <a href="http://gapvas.com/" target="app"><img src="assets/img/circle02.png" alt="" width="100" class="img-circle img-responsive center-block" /></a>
          <!-- 3つめの説明 start -->
          <h4 class="wb-font-bold">Gapvas<small>2014</small></h4>
          <p>Business Model Canvas の作成や共有ができるWebサービス。<br>
            現在は、京都 D-School で利用されている。<br>
            サーバーサイドフレームワークは CakePHP 2、フロントエンドには jQuery を利用。
            個人的に友人と協力して開発。サーバーサイドとフロントエンドを担当。</p>
          <!-- 3つめの説明 end -->
        </div>
        <!-- 3つめの特徴 end -->
      </div>
    </div>
    <!-- コンテンツ start -->
  </div>
</section>
<!-- weblocks 3つの特徴 402 end -->

        <!-- weblocks コンテンツ：2段組み 301 start -->
<!--  : wb-bg-white-cream: クリーム色の背景
-->
<section class="wb-block wb-section wb-block-301 wb-bg-blue-light" id="contribution_engineer">
  <div class="container wb-container">
    <!-- コンテンツ start -->
    <div class="wb-contents wb-padding-top-bottom-0">
      <div class="row">
        <div class="col-sm-6 wb-padding-top-bottom-70">
          <!-- タイトル start -->
          <h2 class="wb-font-bold">技術者としての貢献</h2>
          <!-- タイトル end -->
          <!-- 説明 start -->
          <p>日々の業務に新しい技術や開発手法を取り入れることに取り組む。</p>

          <p>
            ここ数年では、レガシーなシステムへのテストの導入や、
            社内コミュニケーション円滑化のため Slack + hubot の導入、
            カンバン方式やストーリー駆動開発の導入を成功させた。<br>
          </p>

          <p class="wb-margin-bottom-40">
            後輩の教育指導を行う。<br>
            全くの新人プログラマが、Ruby on Rails を使ってWebサービスを作れるよう指導を担当。
            1ヶ月でWebサービスのリリースを実現させた。
          </p>
          <!-- 説明 end -->
        </div>
        <div class="col-sm-6">
          <!-- wb-trim-right-bottom-80: 右下80px 画像がずれるようになっています。
                                        ずれを変更したい場合は、数値を10〜100まで指定できます。 -->
          <div class="wb-trim-right-bottom-100">
            <!-- 画像 start -->
            <!--  : data-animation: アニメーションを指定します。
                              fadeInRight: 右からスライド表示します
            -->
            <img src="assets/img/browser-L.png" class="img-responsive center-block" data-animation="fadeInRight">
            <!-- 画像 end -->
          </div>
        </div>
      </div>
    </div>
    <!-- コンテンツ end -->
  </div>
</section>
<!-- weblocks コンテンツ：2段組み 301 end -->


        <!-- weblocks コンテンツ：2段組み 302 start -->
<!--  : wb-bg-white-cream: クリーム色の背景
-->
<section class="wb-block wb-section wb-block-302 wb-bg-white-cream wb-sep-triangle-bottom" id="contribution_customer">
  <div class="container wb-container">
    <!-- コンテンツ start -->
    <div class="wb-contents">
      <div class="row">
        <div class="col-sm-6">
          <!-- 画像 start -->
          <!--  : data-animation: アニメーションを指定します。
                            fadeInLeft: 左からスライド表示します
          -->
          <img src="assets/img/seminar.jpg" class="img-responsive center-block" data-animation="fadeInLeft">
          <!-- 画像 end -->
        </div>
        <div class="col-sm-6">
          <!-- タイトル start -->
          <h2 class="wb-font-bold">顧客への貢献</h2>
          <!-- タイトル end -->
          <!-- 説明 start -->
          <p>新製品キャンペーンやワークショップの企画・ディレクションを担当。</p>
          <p>
            新テンプレートの販売前購入キャンペーンを行い、
            新テンプレートを試着できるサービスを発案し即実装、ユーザーの不安解消に貢献した。
            また実際に新製品を体験できるイベントを開催し、ユーザーからのフィードバックを製品へ反映するなど、
            顧客目線での取り組みを行う。
          </p>

          <p class="wb-margin-bottom-40">
            先日、30代〜70代のユーザーにプロトタイピングからWebサイトを作ってもらうワークショップを開催。
            チーム内のアイデアをまとめ、実行プランに落としこむなど、ディレクションを担当。
            当日はファシリテーターを担当。
            学習度の低い講義型ではなく、ワークショップ型を採用することで、高い満足度を実現した。
          </p>
          <!-- 説明 end -->
        </div>
      </div>
    </div>
    <!-- コンテンツ end -->
  </div>
</section>
<!-- weblocks コンテンツ：2段組み 302 end -->


        <!-- weblocks コンタクト 502 start-->
<section class="wb-block wb-section wb-block-502 wb-bg-mint" id="contact">
  <div class="container wb-container">
    <!-- コンテンツ start -->
    <div class="wb-contents">
      <!-- タイトル start -->
      <h2 class="wb-font-bold">Contact</h2>
      <!-- タイトル end -->
      <div class="row">
        <div class="col-sm-6">
          <!-- コンタクト情報 start -->
          <table class="table wb-table-noline">
            <tbody>
              <tr>
                <!-- 住所 start -->
                <th>Address</th><!-- 見出し -->
                <td>大阪府茨木市在住<br>最寄り駅は阪急総持寺駅</td><!-- 住所など -->
                <!-- 住所 end -->
              </tr>
              <tr>
                <!-- メール start -->
                <th>Email</th><!-- 見出し -->
                <td>stars.big2men@gmail.com</td><!-- メールアドレス -->
                <!-- メール end -->
              </tr>
            </tbody>
          </table>
          <!-- コンタクト情報 end -->
          <hr class="wb-margin-bottom-50">
          <!-- SNS start -->
          <div class="wb-social-buttons text-center">
            <!-- facebook start -->
            <!--   サイトのURL、サイトのタイトル の部分を変更してください -->
            <a href="https://www.facebook.com/stars.big2men"
               title="Facebook" target="sns"><i class="fa fa-facebook-square"></i></a>
            <!-- facebook end -->
            <!-- twitter start -->
            <!--   サイトのURL、サイトのタイトル の部分を変更してください -->
            <a href="https://twitter.com/stars_big2men"
               title="Twitter" target="sns"><i class="fa fa-twitter"></i></a>
            <!-- twitter end -->
            <!-- google plus start -->
            <!--   サイトのURL、サイトのタイトル の部分を変更してください -->
            <a href="https://github.com/big2men"
               title="GitHub" target="sns"><i class="fa fa-github"></i></a>
            <!-- google plus end -->
          </div>
          <!-- SNS end -->
        </div>
        <div class="col-sm-6">
          <!-- google map start -->
          <!--  : data-map: マップを表示します（削除しないでください）
                : data-map-address: 住所を指定します
                : data-map-height: 地図の高さを指定します
          -->
          <div data-map
               data-map-address="総持寺駅"
               data-map-height="200"
               class="wb-margin-side-30"></div>
          <!-- google map end -->
        </div>
      </div>
    </div>
    <!-- コンテンツ end -->
  </div>
</section>
<!-- weblocks コンタクト 502 end -->


        <!-- weblocks フッター 902 start -->
<!--  : wb-bg-gray-dark: 濃いグレーの背景
-->
<footer class="wb-block wb-section wb-block-902 wb-bg-gray-dark">
  <div class="container wb-container">
    <!-- コンテンツ start -->
    <div class="wb-contents text-center wb-padding-top-bottom-80">
      <!-- コピーライト start -->
      <p>©2016 Shun Hotta. All rights reserved.</p>
      <!-- コピーライト end -->
    </div>
    <!-- コンテンツ end -->
  </div>
</footer>
<!-- weblocks フッター 902 end -->

<!-- スクロールアップ start -->
<!--  ページトップへスクロールします。利用する場合は、コメントをはずしてください。 -->
<!-- <div class="wb-scrollup"><i class="fa fa-angle-double-up"></i></div> -->
<!-- スクロールアップ end -->


    </div>
    <!-- google map -->
    <script src="//maps.google.com/maps/api/js?sensor=false"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <!-- slick -->
    <script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    <!-- Weblocks -->
    <script src="assets/js/weblocks.bundle.js"></script>
  </body>
</html>