diff --git a/components/contact/Item.tsx b/components/contact/Item.tsx index 156c4c1..30ac192 100644 --- a/components/contact/Item.tsx +++ b/components/contact/Item.tsx @@ -49,8 +49,16 @@ const Svg = props => { ) } +const paths = { + mail: 'M16 3v10c0 .567-.433 1-1 1h-1V4.925L8 9.233 2 4.925V14H1c-.567 0-1-.433-1-1V3c0-.283.108-.533.287-.712C.467 2.107.718 2 1 2h.333L8 6.833 14.667 2H15c.283 0 .533.108.713.288.179.179.287.429.287.712z', + github: 'M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8', + twitter: 'M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z', + facebook: 'M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0', + hatena: 'M13.647 0C14.947 0 16 1.053 16 2.353v11.294c0 1.3-1.053 2.353-2.353 2.353H2.353C1.053 16 0 14.947 0 13.647V2.353C0 1.053 1.053 0 2.353 0h11.294zm-2.47 9.647c-.52 0-.94.42-.94.94s.42.942.94.942.94-.43.94-.95-.42-.94-.94-.94zm-5.436 1.85c.8 0 1.37-.028 1.72-.08.35-.056.65-.148.88-.275.3-.155.52-.376.68-.66.16-.284.24-.61.24-.986 0-.52-.14-.936-.42-1.247-.28-.32-.66-.49-1.16-.53.44-.12.77-.3.97-.54.21-.23.31-.55.31-.95 0-.32-.07-.59-.2-.84-.14-.24-.33-.43-.59-.58-.23-.13-.49-.21-.81-.27-.31-.05-.86-.08-1.65-.08H3.77v6.99h1.97zm.49-2.79c.47 0 .79.058.96.174.18.12.26.33.26.62 0 .27-.09.46-.28.57-.18.12-.51.17-.96.17h-.67V8.71h.7zm5.77.47V4.47h-1.64v4.707H12zM5.95 6.053c.473 0 .79.054.955.16.163.107.245.29.245.554 0 .253-.087.43-.26.535-.177.103-.498.155-.968.155h-.38V6.053h.41z' +} + export default ({ item, isShow }) => { - const { url, color, d } = item + const { title, url, color, d } = item return ( @@ -60,7 +68,7 @@ export default ({ item, isShow }) => { rel="noreferrer noopener" > - + diff --git a/components/contact/data.ts b/components/contact/data.ts deleted file mode 100644 index 57355c3..0000000 --- a/components/contact/data.ts +++ /dev/null @@ -1,32 +0,0 @@ -export default [ - { - name: 'mail', - url: 'mailto:info@shgtkshruch.com', - color: '#d14836', - d: 'M16 3v10c0 .567-.433 1-1 1h-1V4.925L8 9.233 2 4.925V14H1c-.567 0-1-.433-1-1V3c0-.283.108-.533.287-.712C.467 2.107.718 2 1 2h.333L8 6.833 14.667 2H15c.283 0 .533.108.713.288.179.179.287.429.287.712z' - }, - { - name: 'github', - url: 'https://github.com/shgtkshruch', - color: '#181717', - d: 'M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8' - }, - { - name: 'twitter', - url: 'https://twitter.com/shgtkshruch', - color: '#1da1f2', - d: 'M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z' - }, - { - name: 'facebook', - url: 'https://www.facebook.com/shgtkshruch', - color: '#385998', - d: 'M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0' - }, - { - name: 'hatena', - url: 'http://b.hatena.ne.jp/sh19e/bookmark', - color: '#00a4de', - d: 'M13.647 0C14.947 0 16 1.053 16 2.353v11.294c0 1.3-1.053 2.353-2.353 2.353H2.353C1.053 16 0 14.947 0 13.647V2.353C0 1.053 1.053 0 2.353 0h11.294zm-2.47 9.647c-.52 0-.94.42-.94.94s.42.942.94.942.94-.43.94-.95-.42-.94-.94-.94zm-5.436 1.85c.8 0 1.37-.028 1.72-.08.35-.056.65-.148.88-.275.3-.155.52-.376.68-.66.16-.284.24-.61.24-.986 0-.52-.14-.936-.42-1.247-.28-.32-.66-.49-1.16-.53.44-.12.77-.3.97-.54.21-.23.31-.55.31-.95 0-.32-.07-.59-.2-.84-.14-.24-.33-.43-.59-.58-.23-.13-.49-.21-.81-.27-.31-.05-.86-.08-1.65-.08H3.77v6.99h1.97zm.49-2.79c.47 0 .79.058.96.174.18.12.26.33.26.62 0 .27-.09.46-.28.57-.18.12-.51.17-.96.17h-.67V8.71h.7zm5.77.47V4.47h-1.64v4.707H12zM5.95 6.053c.473 0 .79.054.955.16.163.107.245.29.245.554 0 .253-.087.43-.26.535-.177.103-.498.155-.968.155h-.38V6.053h.41z' - } -] diff --git a/components/contact/index.tsx b/components/contact/index.tsx index 3d28550..489fe9d 100644 --- a/components/contact/index.tsx +++ b/components/contact/index.tsx @@ -5,7 +5,6 @@ import { mq } from '../variables' import Section from '../common/Section' import Heading from '../common/Hgroup' import Item from './Item' -import items from './data' const List = styled.ul` display: flex; @@ -17,7 +16,7 @@ const List = styled.ul` } ` -export default () => { +export default ({ items }) => { const [isTypingDone, setIsTypingDone] = useState(false); return ( diff --git a/components/history/Item.tsx b/components/history/Item.tsx index 638c6ca..c416650 100644 --- a/components/history/Item.tsx +++ b/components/history/Item.tsx @@ -133,7 +133,7 @@ const btnStyle = css` ` export default ({ item, typingDone, isSelected, onAnimationEnd, updateCurrentIndex }) => { - const { age, name, text, url } = item + const { age, title, body, url } = item return ( @@ -144,10 +144,10 @@ export default ({ item, typingDone, isSelected, onAnimationEnd, updateCurrentInd isShow={isSelected} onClick={updateCurrentIndex} onFocus={updateCurrentIndex} - >{name} + >{title} - {text.map((t, i) => {t})} + {body.split('\n').map((t, i) => {t})}
{ +export default ({ next, items }) => { const [currentIndex, setCurrentIndex] = useState(-1); const [typingDone, setTypingDone] = useState(false); diff --git a/components/skill/Item.tsx b/components/skill/Item.tsx index 62cce30..9d5ac38 100644 --- a/components/skill/Item.tsx +++ b/components/skill/Item.tsx @@ -53,11 +53,11 @@ const Skill = styled.li` `; export default ({ item, startAnimation }) => { - const { name, text } = item + const { title, body } = item return ( - - {name} + + {title} ) } diff --git a/components/skill/data.ts b/components/skill/data.ts deleted file mode 100644 index 743b0b3..0000000 --- a/components/skill/data.ts +++ /dev/null @@ -1,102 +0,0 @@ -export default [ - { - name: 'HTML', - text: 'WEB標準に則ったコーディング' - }, - { - name: 'Pug', - text: '効率的で変更に強いコーディング' - }, - { - name: 'CSS', - text: 'レイアウトからアニメーションまで' - }, - { - name: 'Sass', - text: '効率的で保守性の高いコーディング' - }, - { - name: 'PostCSS', - text: 'Sassに足りない機能を補完' - }, - { - name: 'BEM・SMACSS', - text: '大規模でも破綻しないCSS設計' - }, - { - name: 'JavaScript', - text: '最新の仕様にキャッチアップしながら保守性の高いコーディング、独自のUIや演出を作成' - }, - { - name: 'jQuery', - text: 'ライブラリーを組み合わせつつ独自のプログラムも実装' - }, - { - name: 'React', - text: 'Next.jsでのSPA実装、StoryBookによるコンポーネント管理' - }, - { - name: 'Vue.js', - text: 'Nuxt.jsでのSPA実装、StoryBookによるコンポーネント管理' - }, - { - name: 'gulp', - text: 'プロジェクトにあったビルド環境の作成' - }, - { - name: 'webpack', - text: 'プロジェクトにあったのビルド環境の作成' - }, - { - name: 'Jamstack', - text: 'パフォーマンスとセキュリティ・DXを高めた開発' - }, - { - name: 'WordPress', - text: 'テーマ作成、小・中規模サイトの制作' - }, - { - name: 'Rails', - text: '中規模Webサービスの開発' - }, - { - name: 'Vagrant', - text: 'プロジェクトの環境構築' - }, - { - name: 'Docker', - text: 'プロジェクトの環境構築' - }, - { - name: 'AWS', - text: 'サーバー構築・ドメイン・CDN・Lambda' - }, - { - name: 'Terraform', - text: 'Infrastructure as Code' - }, - { - name: 'Itamae', - text: 'Infrastructure as Code' - }, - { - name: 'Git', - text: 'すべてのプロジェクトをバージョン管理' - }, - { - name: 'GitHub', - text: 'プルリクエストベースのチーム開発' - }, - { - name: 'CircleCI', - text: 'CI/CD の設計・実装' - }, - { - name: 'VIM', - text: '素早いコーディングができるようにカスタマイズ' - }, - { - name: 'Chrome', - text: 'パフォーマンスの計測やデバック' - }, -] diff --git a/components/skill/index.tsx b/components/skill/index.tsx index 2a610fc..97ac0ec 100644 --- a/components/skill/index.tsx +++ b/components/skill/index.tsx @@ -5,7 +5,6 @@ import { mq } from '../variables' import Section from '../common/Section' import Heading from '../common/Hgroup' import Item from './Item' -import items from './data' const List = styled.ul` display: flex; @@ -17,7 +16,7 @@ const List = styled.ul` } ` -export default ({ next }) => { +export default ({ next, items }) => { const [isTypingDone, setIsTypingDone] = useState(false); function onTypingDone() { diff --git a/components/work/Item.tsx b/components/work/Item.tsx index bc850ab..c9be3aa 100644 --- a/components/work/Item.tsx +++ b/components/work/Item.tsx @@ -67,7 +67,7 @@ const A = styled.a` ` export default ({ isTypingDone, item }) => { - const { title, age, url, text, image } = item + const { title, age, url, body, image } = item const [inview, setView] = useState(false); const [textAnimationDone, setTextAnimationDone] = useState(false); @@ -92,7 +92,7 @@ export default ({ isTypingDone, item }) => { >{url}
- setTextAnimationDone(true)}>{text} + setTextAnimationDone(true)}>{body} { isShow={isTypingDone && inview} textAnimationDone={textAnimationDone} > - {title} + {title} ) diff --git a/components/work/data.ts b/components/work/data.ts deleted file mode 100644 index a8b86d0..0000000 --- a/components/work/data.ts +++ /dev/null @@ -1,37 +0,0 @@ -export default [ - { - title: 'Mykinso', - image: '/works/mykinso.jpg', - age: '2017 -', - url: 'https://mykinso.com', - text: '腸内フローラ解析の会社で、Rails による WEB アプリケーション開発や Vue.js によるフロントエンドの開発をしています。LP のコーディングもしており、一貫性のある CSS の設計やスタイルガイドの整備をしています。' - }, - { - title: 'Nozomi Finacial Group', - image: '/works/nozomi-financial-group.jpg', - age: 2017, - url: 'https://nozomifinancial.net/', - text: 'アメリカと日本で活躍されているコンサルタントのコーポレートサイトをデザイン・制作しました。シンプルなデザインに統一しつつ、アニメーションで演出を加えました。日英の多言語対応も行い、WordPressですべての文言を更新できるようにしました。' - }, - { - title: 'aviva pro', - image: '/works/aviva-pro.jpg', - age: 2016, - url: 'https://www.aviva.co.jp/avivapro_web/', - text: 'AVIVA様のWEBデザインコースのランディングページのコーディングを担当しました。落ち着いたデザインを守りつつ、アクセントとしてスクロールエフェクトやホバーエフェクトを工夫しました。' - }, - { - title: 'hydro power', - image: '/works/hydro-power.jpg', - age: 2016, - url: 'https://hpjsuiso.com/', - text: 'コーポレートサイトのコーディング、スマートフォンUIを担当しました。波の動きをSVGで再現し、破綻しにくいCSSの設計を採用しました。' - }, - { - title: 'schoo tours', - image: '/works/schoo-tours.jpg', - age: 2013, - url: 'https://shgtkshruch.github.io/schoo-tours/', - text: '架空の旅行会社のランディングページのデザイン・コーディングを担当しました。写真をきれいに見せるために要素をできるだけ省いたフラットなデザインを採用しました。' - } -] diff --git a/components/work/index.tsx b/components/work/index.tsx index 4b58327..97a6d42 100644 --- a/components/work/index.tsx +++ b/components/work/index.tsx @@ -5,7 +5,6 @@ import { mq } from '../variables' import Section from '../common/Section' import Heading from '../common/Hgroup' import Item from './Item' -import items from './data' const List = styled.div` padding-top: 4rem; @@ -14,7 +13,7 @@ const List = styled.div` } ` -export default ({ next }) => { +export default ({ next, items }) => { const [isTypingDone, setIsTypingDone] = useState(false); function onTypingDone() { diff --git a/netlify.toml b/netlify.toml index 8277491..8ca5135 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,3 +1,3 @@ [build] - command = "npm run build && npm run export" - publish = "out" \ No newline at end of file + command = "yarn build && yarn export" + publish = "out" diff --git a/pages/_app.tsx b/pages/_app.tsx index 5756bb2..a8cb054 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,8 +3,8 @@ import { useEffect } from 'react' import Router from 'next/router' import * as gtag from '../lib/gtag' -import "../static/index.css" -import "react-typist/dist/Typist.css" +import '../public/static/app.css' +import 'react-typist/dist/Typist.css' import 'tippy.js/dist/tippy.css' import 'tippy.js/animations/shift-toward-subtle.css' import 'tippy.js/themes/material.css' diff --git a/pages/_document.tsx b/pages/_document.tsx index 8584f81..7d2116e 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -11,7 +11,6 @@ export default class MyDocument extends Document { return ( - Shigetaka Shirouchi diff --git a/pages/index.tsx b/pages/index.tsx index 1abf338..dd62bd9 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,7 @@ import { useState } from 'react' import { Global, css } from '@emotion/core' +import Head from 'next/head' import Container from '../components/layout/Container' import Intro from '../components/intro' import Work from '../components/work' @@ -12,7 +13,7 @@ import ColorTheme from '../components/common/ColorTheme' import GitHubCorner from '../components/common/GitHub-Corner' import { mq, theme } from '../components/variables' -export default function Home() { +export default function Home({ works, history, skills, contacts }) { const [index, setIndex] = useState(0) function next() { @@ -21,6 +22,9 @@ export default function Home() { return ( <> + + Shigetaka Shirouchi +
- {index > 0 && } - {index > 1 && } - {index > 2 && } - {index > 3 && } + {index > 0 && } + {index > 1 && } + {index > 2 && } + {index > 3 && }