Giter Site home page Giter Site logo

manabuyasuda / website-template Goto Github PK

View Code? Open in Web Editor NEW
60.0 6.0 13.0 16.06 MB

静的Webサイト制作を少しモダンにするためのテンプレート

Home Page: https://manabuyasuda-website-template.netlify.com/styleguide/

License: MIT License

HTML 76.16% JavaScript 4.31% CSS 18.74% Vue 0.79%
pug sass aigis gulp ecss ssi svg-sprite stylelint eslint prettier

website-template's Introduction

30歳のときに「CSS設計が世界中で議論されていること」に興味を持ち、「自分もこのような仕事をしたい」とウェブ業界に転職。 上場企業を含む36社(2023年時点)のお客さま(ANAさま、京セラさま、Panasonicさまなど)とお仕事をさせていただいています。 案件実績はForkwellに記載しています。

CSS設計、スタイルガイド制作、アクセシブルなコーディングが得意です。多言語サイトやJamstackサイト、React(TypeScript)を使用したウェブアプリも担当してきました。 TAMのグループ会社であるTAMSANのエンジニアチーム(本人を含めて5人)のリーダーを担当しており、メンバーとの1on1やキャリアMTG、採用活動、会社全体のマネジメントにも参画しています。

モノゴトを深く知り、整理していくプロセスが好きです。 最新技術を追うというよりも、「問う技術」「プロセス設計」「ナレッジマネジメント」「ファシリテーション」「コーチング」のようなソフトスキルを意識しているタイプでもあります。 エンジニアの3分類だと、技術:プロダクト:組織=2:3:5のイメージです。 エンジニアを分類する、3つのタイプ|山本 正喜 / Chatwork CEO

iPhoneやMacを中心にしたブログを過去に書いていて、月間10万PVを達成したこともあります。 テキストベースのアウトプットは日常的にしているので、書くことは苦にならないタイプです。

SNSやブログなどはbento.meにまとめています。ぜひクリックしてください!

Reactなどを使ったウェブアプリケーションの経験値を増やしたいです。 コードを書く仕事は大変なこともありますが、カタチのあるものに収束させていくプロセスに面白みを感じるからです。 メンタルヘルステックにも興味があり、バックエンドやインフラを含めた包括的な知識や技術を身につけることで、サービス開発をチームでするための役割を果たせるようになることが中期的な目標と考えています(現在はフロントエンド領域のみ)。

本当の意味で相手の役に立てる人でありたいです。 コーチング的な支援は得意なほうだと思っていますが、背中を押したり、手を引っ張れるような積極的な支援で、その人の強みや良さを引き出せる仕事をしたいです。

Find out more!

website-template's People

Contributors

manabuyasuda avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

website-template's Issues

.st-Grids間に余白を追加する

現状では2カラムと3カラムのような指定を組み合わせるとそれぞれの間に縦の余白がつかない。
.st-Gridsが並列に並んでいる場合には.st-Grids_Item内に指定している余白と同じ値が.st-Gridsと.st-Gridsの間につくようにする。

yarnの導入

パッケージのバージョンを固定したいので、yarnを導入する。

ES2015に対応する

いわゆる普通のWebサイト制作にES2015は現時点でオーバースペックな面もある。
例えば、JQueryプラグインがあるような状況。

現状ではjsファイルを個別に書いて、commonとmoduleでそれぞれ連結、commonを先に読み込むことで依存関係を解決している。
ES2015を導入する場合、モジュールの依存関係はどのように解決するのがいいのか、必要な構文だけ使うようにするのか。

.st-Gridsにバリエーションを追加する

均等なグリッドだけでなく、8:4や7:3のような比率も作っておく。同じパターンが続くときはひとつの.st-Grids内で完結して、違うパターンになるときは別の.st-Gridsを並列で記述する。
切り替わるタイミングで要素順が変更できるようにもしておく。ただし、3つ以上の要素がある場合はリバースはできない。

名前は.st-Grids-col8to4のようにする。

.st-Gridsに5カラムを追加する

現状では複雑に打ち消し合っているけど、切り替わるごとにリセットして必要な余白をつける、ような書き方にできたらしたい。

canonicalタグの導入

ページの評価を1つにまとめるためにcanonicalタグを追加する。
URLはsite.rootUrl + pageRootPathで取得可能。

Pugのディレクトリ名を変更

インクルードするときのパスが意味の通るものにしたい。

現状

  • include /_include/_meta.pug
  • include /_include/_layout.pug

改良後

  • include /_partial/_meta.pug
  • include /_partial/_default-template.pug

もしくは

  • include /_partial/_meta.pug
  • include /_template/_default.pug

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.