沿革 | アラフォーWEBデザイナーのポートフォリオ

はじめに

このポートフォリオサイトのデザインについて

ポートフォリオというより、リソース重視のECサイト（インテリア・雑貨）風のデザインにした
英語と日本語で別フォント（セリフ体）指定で、「size-adjust」でx-heightを調整
“Intersection Observer API”利用で目次同期する
「@container scroll-state()」クエリーを使用したセクションを作る

以上を目的として作成

ヘッダー①

iosのSafariにはホバーの概念がない

iosのSafariでホバーアニメーションが効かなかった。iosのSafariにはホバーの概念が存在しないとの事。ホバー時と同じ挙動を行うように「input」を設置したが、チェックアウト時に収納しなかった。

結果、スタイルを分けた

@media (hover:hover) {
"ホバーの概念がある場合に適用されるcss"
}
@media (hover:none) {
"ホバーの概念がない場合に適用されるcss"
}

「label」に高さが指定できない

ついでにタッチポイント領域の修正しようと思ったが、「label」はデフォルトでは「height」が指定できないらしく、「label」が入っている要素と入っていない要素で高さが揃わなかった。一度別要素を入れ子にして「display: block;」で高さを揃える必要があった。

ロゴについて

前回のポートフォリオ作成時に出来た内の一つで、ジオメトリーで「arai」を表現した

もう一つはもったいないのでフッターで使用。過去のポートフォリオへのリンクとなっている。

"パンくず"の追加

今更追加。差別化する為に「HOME」はアイコンにした

FIrefoxで見出しが滲む

Firefox用に以下を設定

-moz-osx-font-smoothing: grayscale;

ヘッダー②

リンクが増えてきことにより、ビューポート幅428px以下でハンバーガー表示に切り替える必要が出てきた。

「Works」の挙動にて”input”を利用している経緯もあり、今回はJavaScript（Jquery）で制御する方法で落ち着いた。

実績詳細ページ

const url = window.location.hash;

実績一覧ページのリンクにハッシュを付けて、そのハッシュタグによって分岐させて該当する画像を差し込む仕様とした。

スキルセクション

新しいCSSコンテナスクロール状態クエリ「@container scroll-state()」を使用して「スキル」セクションのデモを作ってみた。

@container scroll-state(snapped) {
"centerにスナップされた時に発火"
}

※ WindowsおよびmacOS では、Chrome133以降で対応しています。また、Windows環境ではEdge133以降が対応ブラウザです。一部Androidでは動作しますが、iOS/iPadOSは非対応です。

その他ページ

その他ページを追加。"実績一覧"に載せきれなかた分やそれ以前までに作成した成果物（仕事・個人）を掲載しています。

目次の同期

“Intersection Observer API”利用で目次を同期する

要素位置を検知して目次に同期できる“Intersection Observer API”なる便利なものがあったので、スクロールで要素の位置を検知して、追従設定した目次に同期させた

const options = {
　　root: null,
　　rootMargin: "-50% 0px",
　　threshold: 0
};
const observer =
new IntersectionObserver(doWhenIntersect,options);
const target = document.querySelector('.target'); observer.observe(target);

デザインについて

表示コンテンツに合わせてテキストの色が変わるだけでは、指標を認識できない可能性を考慮しテキストの左に目印が付くデザインにしました。