kitamuradev / sample-developer-portfolio Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 241 KB

Sample Developer Portfolio

Home Page: https://sample-developer-portfolio.vercel.app

JavaScript 0.17% Astro 98.64% SCSS 1.19%

astro gsap lottie lottie-web scss

sample-developer-portfolio's People

Contributors

Watchers

sample-developer-portfolio's Issues

faviconを差し替える

add color pallet

<style is:global>
  :root {
    --color-primary: #0EA5E9;
    --color-background-body: #0B1121;
    --color-background-workbox: #112240;
    --color-section-line: #233554;
    --color-section-headtext: #CCD6F6;
    --color-basetext: #8892B0;
  }

  html {
    font-size: 100%;
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-background-body);
    color: var(--color-basetext);
  }
</style>

setup scss files

_mediaquery.scss

$breakpoints: (
  'sm': 'screen and (width <= 520px)', // 520px以下（520pxも含む）
  'md': 'screen and (width <= 768px)', // 768px以下（768pxも含む）
) !default;

@mixin mq($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

_functions.scss

// example - rem(24) => 1.5rem
@function rem($fontSize) {
  @return calc($fontSize / 16) * 1rem;
}

// hover wrapper
@mixin hover {
  @media (hover: hover) and (pointer: fine) {
    @content;
  }
}

_global.scss

// line height
$lh_sm: 1.4 !default;
$lh_md: 1.5 !default;
$lh_lg: 1.6 !default;
$lh_xl: 1.7 !default;
$lh_2xl: 1.8 !default;

// font size
// letter spacing

ローディングアニメーションは初回訪問時のみ実行するようにする

スクロールに応じてヘッダーの表示/非表示を制御する

let prevScrollPos = window.pageYOffset;

window.addEventListener("scroll", function() {
  let currentScrollPos = window.pageYOffset;
  if (prevScrollPos > currentScrollPos) {
    // 上にスクロールしている場合、ヘッダーを表示する
    document.querySelector("header").style.top = "0";
  } else {
    // 下にスクロールしている場合、ヘッダーを非表示にする
    document.querySelector("header").style.top = "-100px";
  }
  prevScrollPos = currentScrollPos;
});

ローディングアニメーション実装

基本方針は lottie web にローカルのjsonファイルを食わせる

アニメーションアセット

https://lottiefiles.com/134296-pet-loading

ローディング中は画面スクロールさせない実装

window.addEventListener("load", () => {
  document.body.style.overflow = "hidden";

  setTimeout(() => {
    const loader = document.querySelector(".loader");
    loader.style.display = "none";
    document.body.style.overflow = "visible";
  }, 3800);
});

Aboutセクションの絵文字を一定時間おきにランダムで入れ替える

サイドバー展開時に背景に blur をかける

サイドバーを背景タップで閉じる

document.querySelector("#content").addEventListener("click", () => {
        document.querySelector('.header__menu__btn').classList.remove("is-active");
        document.querySelector('.header__menu__aside').classList.remove("is-active");
        document.body.classList.remove("blur");
});

【Header.astro】コンポーネント分割する

【GSAP】複数の要素をつなげてフェードインさせるアニメーション

アニメーションを繋げる
- timeline() を使う
- 第一引数の delay はアニメーションの開始時間
- stagger で delay の値を加算（例：要素１は 0.6, 要素２は0.9 ...）
要素単体にフェードインアニメーションをかける場合は from() メソッドのみでいい

gsap
  .timeline({
    delay: 3.8,
  })
  .from(".fade-in", {
    opacity: 0,
    y: 10,
    duration: 0.5,
    ease: "power2.inOut",
    stagger: 0.2,
  });

deploy to Vercel

404ページ作成

【components/Header.astro】z-indexをcomponent内のCSS変数で管理する

CSS変数 - Astro

:root {
  --layer-1: 100;
  --layer-2: 200;
  --layer-3: 300;
}

.header {
  z-index: var(--layer-1);
}

.modal {
  z-index: var(--layer-3);
}

.popup {
  z-index: var(--layer-2);
}

【サイドバー】セクションにジャンプした後にサイドバーを閉じるようにする

media query の記法を修正

media query range（範囲）記法から従来の記法に戻します

range 記法がなぜかモバイル版Chromeで機能していなかった
media query は Sass の @mixin で書いているので従来の記法に戻したとしても開発に支障はないと判断したため

デザイン修正

letter-spacing の付け忘れ（hero__cta）
任意の単語の色を primary に変える（hero__text）

スクロールに応じてヘッダーの表示/非表示を切り替える仕様を取り消す

理由

スマホで操作たときにやたらめったらヘッダーの表示と非表示が切り替わってウザイ
挙動が不安定

【SectionTitle.astro】クラス名変更

OGPを設定する

スクロールバーをカスタマイズ

やり方
 デザイン参考

バグ修正

以下のバグを修正する

サイドバー展開時にスクロールできてしまう
サイドバーの位置がおかしい
- header__nav fade-in__header で付与しているフェードインアニメーションが影響している
- インラインに transform: translate(0px, 0px) が付与されてしまうことが原因
- にフェードインアニメーションを付与するのではなく、`header__nav-list__item` にフェードインアニメーションをかける（[参考](https://brittanychiang.com/)）

kitamuradev / sample-developer-portfolio Goto Github PK

sample-developer-portfolio's People

Contributors

Watchers

sample-developer-portfolio's Issues

_mediaquery.scss

_functions.scss

_global.scss

media query range（範囲）記法から従来の記法に戻します

Recommend Projects

Recommend Topics

Recommend Org

Jobs