Skip to content
This repository has been archived by the owner on Nov 15, 2024. It is now read-only.

[f] プロフィールページ #8

Merged
merged 12 commits into from
Apr 27, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions gatsby-config.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
module.exports = {
siteMetadata: {
name: `Hello Typescript World!`,
tagline: `Gatsby + SASS + Typescript = 💪`
title: 'Web Developer - Yuma Kitamura',
titleTemplate: "%s | Portfolio",
description: 'This is the Web Developer \'Yuma Kitamura\' Portfolio.',
url: 'https://yuukit.me/',
image: 'src/images/bakeneko2.png',
twitterUsername: '@jiyuujin'
},
plugins: [
`gatsby-plugin-sass`,
`gatsby-plugin-typescript`
'gatsby-plugin-react-helmet',
'gatsby-plugin-sass',
'gatsby-plugin-typescript',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: `${__dirname}/src/images`,
}
}
]
}
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
"dependencies": {
"@babel/core": "7.9.0",
"gatsby": "2.20.3",
"gatsby-plugin-react-helmet": "^3.2.4",
"gatsby-plugin-sass": "2.2.1",
"gatsby-plugin-typescript": "2.3.1",
"gatsby-source-filesystem": "^2.2.2",
"node-sass": "4.13.1",
"react": "16.13.1",
"react-dom": "16.13.1",
Expand All @@ -19,6 +21,7 @@
},
"devDependencies": {
"@nekohack/eslint-config-react": "0.1.1",
"@types/react-helmet": "^5.0.15",
"@typescript-eslint/eslint-plugin": "2.25.0",
"@typescript-eslint/parser": "2.25.0"
}
Expand Down
30 changes: 30 additions & 0 deletions src/components/Footer/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
max-width: 100%;
min-height: 120px;
padding: 30px 0;
margin-top: 24px;
color: #fefefe;

.contact {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8vmin;
width: 100%;

a {
color: #dd66a1;
}
}

.copyright {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8vmin;
}
}
17 changes: 17 additions & 0 deletions src/components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { FC } from 'react'
import * as SC from './index.module.scss'

export const Footer: FC = () => {
return (
<footer className={SC.footer}>
<p className={SC.contact}>
<a href="https://webneko.dev/contact" target="_blank" rel="noopener">
CONTACT
</a>
</p>
<p className={SC.copyright}>
Created © 2020 jiyuujin LAB. All Rights Reserved.
</p>
</footer>
)
}
49 changes: 36 additions & 13 deletions src/components/Home/index.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
padding: 32px;
position: relative;
display: flex;
align-items: center;
align-items: flex-start;
flex-direction: column;
}

.title {
font-weight: 700;
font-size: 88px;
font-size: 48px;
text-transform: uppercase;
line-height: 1;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
Expand Down Expand Up @@ -54,20 +54,43 @@

a {
color: #ec28e0;
}

&:hover {
color: #fff;
&:hover {
padding: 8px;
height: 100%;
background-color: #dd66a1;
color: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
margin-left: -8px;
margin-bottom: -8px;
border-radius: 3px;
}
}
}
}

.basic {
font-weight: 200;
font-size: 28px;
text-transform: uppercase;
line-height: 1;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
margin: 16px 0 24px 0;
max-width: 100%;
text-align: left;

.subtitle {
font-size: 1.2rem;
margin: 18px 0;
}

&:hover {
padding: 8px;
height: 100%;
background: #dd66a1;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
margin-left: -8px;
margin-bottom: -8px;
border-radius: 3px;
.description {
font-size: 0.8rem;
margin: 12px 0;
line-height: 24px;

a {
color: #dd66a1;
}
}
}
45 changes: 42 additions & 3 deletions src/components/Home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const Home: FC = () => {
<div className={SC.title}>
Web Developer
<div className={SC.name}>Yuma Kitamura</div>
<div className={SC.locale}>Osaka, Kyoto (Japan)</div>
<div className={SC.locale}>Osaka, Kyoto in Japan</div>
</div>
<div className={SC.social}>
<div className={SC.item}>
Expand All @@ -17,7 +17,7 @@ export const Home: FC = () => {
target="_blank"
rel="noopener noreferrer"
>
blog
Blog
</a>
</div>
<div className={SC.item}>
Expand All @@ -26,10 +26,49 @@ export const Home: FC = () => {
target="_blank"
rel="noopener noreferrer"
>
twitter
Twitter
</a>
</div>
</div>
<div className={SC.basic}>
基本情報
<div className={SC.description}>
ネット上では 自由人、jiyuujin と名乗って生息しています。誕生日は1988年11月04日。大阪府豊中市生まれ。性別は男性。現在は関西圏(京都や大阪)を中心に活動しています。
</div>
<div className={SC.subtitle}>
職業
</div>
<div className={SC.description}>
<ul>
<li>フロントエンドエンジニア</li>
<li>Webデベロッパ</li>
<li>HRアドバイザ</li>
</ul>
</div>
</div>
<div className={SC.basic}>
職歴
<div className={SC.description}>
自分のキャリアのスタートはiOSネイティブアプリのエンジニアとして。これまでのキャリアの中でiOSネイティブアプリエンジニアとして業務を通じ基礎的なコーディングを取得、Webを扱うサーバサイドで足りていないと言った環境も相まってjQueryを始めとしたCSS設計、フレームワークの使用など徐々にフロントエンドエンジニアという領域にも踏み込んでいきました。
</div>
<div className={SC.subtitle}>
関連リンク
</div>
<div className={SC.description}>
<ul>
<li>
<a href="https://github.com/jiyuujin/Curriculum-Vitae">
職務経歴書
</a>
</li>
<li>
<a href="https://scrapbox.io/nekohack/skillset">
スキルセット (公開予定)
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
)
Expand Down
86 changes: 86 additions & 0 deletions src/components/SEO/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { Helmet } from 'react-helmet'

type SEOPropTypes = {
title: string
description: string
image: string
pathname: string
article: boolean
}

const SEO = ({
title,
description,
image,
pathname,
article
}: SEOPropTypes) => (
<StaticQuery
query={query}
render={({
site: {
siteMetadata: {
title,
titleTemplate,
description,
url,
image,
twitterUsername
}
}
}) => {
const seo = {
title: title,
description: description,
image: image,
url: `${url}${pathname || '/'}`
}
return (
<Helmet title={seo.title} titleTemplate={titleTemplate}>
<meta name="image" content={seo.image} />
<meta name="description" content={seo.description} />
<meta property="og:url" content={seo.url} />
<meta property="og:image" content={seo.image} />
<meta property="og:title" content={seo.title} />
<meta property="og:description" content={seo.description} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content={seo.image} />
<meta name="twitter:creator" content={twitterUsername} />
<meta name="twitter:title" content={seo.title} />
<meta
name="twitter:description"
content={seo.description}
/>
</Helmet>
)
}}
/>
)

export default SEO

SEO.defaultProps = {
title: null,
description: null,
image: null,
pathname: null,
article: false
}

const query = graphql`
query SEO {
site {
siteMetadata {
title
titleTemplate
description
url
image
twitterUsername
}
}
}
`
Binary file added src/images/bakeneko2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/pages/404.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from 'react'
import Layout from '../components/Layout'

export default class extends React.Component<{}> {
public render() {
return (
<Layout>
Page not found.
</Layout>
)
}
}
4 changes: 4 additions & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import * as React from 'react'
import Layout from '../components/Layout'
import SEO from '../components/SEO'
import { Home } from '../components/Home'
import { Footer } from '../components/Footer'
import * as SC from './index.module.scss'

export default class IndexPage extends React.Component<{}> {
public render() {
return (
<Layout>
<SEO title="Web Developer - Yuma Kitamura" />
<div className={SC.container}>
<Home />
<Footer />
</div>
</Layout>
)
Expand Down