自分のポートフォリオサイト作成プロジェクト
準備段階
ここに自分が作成していくポートフォリオサイトの作成ログなどを載せていく。
まず使用する技術はReactで書いていく。
ドメイン取得とかは今はしない。
とりあえず、Github pagesで作成していく。
参考URL
やるべきタスクを洗い出してみる
- UI作成
- Reactのコーディング
- GithubPageの設定
このぐらいで結構簡単に見える。
でもまず、UIの作成する前に何を書くかを決めよう。
- 名前
- 所属
- 技術スタック
- 今までの成果物
- 今までの自分の変遷(履歴)
- 一応かける技術
- 各種URL
でもこんぐらいかな
いろんな人のポートフォリオサイト見てみよう
このサイトはめっちゃ動きがすごい
これはちょっと参考にできるかわかんないけど
一応頭の中にとどめておこう
これとか結構いいかも
エンジニアの作成したポートフォリオサイトはちょっとあんまり参考にならないかもｗ
自分もこうならないようにデザインもうちょっと考えよう
やっぱりデザインはLoneTrailの様なデザイン案を使いたい
ちょうどこの前デザイン開設動画も満たしこれでちょっとはましになるはず
あと3dモデルとかがんばったらできないかな？
結構宇宙風にしたい感がある。
ただ背景は
ここの後ろのちょっと紙っぽい白で作成したい
でいろんなところで宇宙関係のオブジェクトをちりばめる感じ
オブジェクトは
やっぱり動画みたいな感じで浮かばせる
あと流星の軌跡みたいなのが一番作りたい
サイトのローディング画面は作成しない
音もつけない
フォントはSans-Selifsが使用されているらしいのでこれを使っていく
Futura mediumはここにあった
Helvetica Regular
こういうサイトローディング結構いいかもしれない
多分めっちゃ実装はきついと思う
そいえばなんか時系列軸みたいなのも作成したい
こういう感じでフォントのウェイトを変えていくだけでも結構いい感じになってる。
この画像の感じで下に行くほど太くて上に行くほど細くなってく感じなのは文字以外にも応用ができそう
いろんなオブジェクトに対して適用できそう
ただ実装はむずい
なんかロゴも欲しいかも
三角とか六角形も活用していく
レーダーチャートでもよさそう
六角形は絶対使う
UIデザインをまとめると
- フォント：
San-Selifs - 背景色：
#F6EFE2 - 文字のカラー：
#201919 - アニメーション：
ロケット？、流星の軌跡など - 基本的にはborder-radiusはなしでいく。
Github pageの作成
まず、Githubにてリポジトリ
あとは以下の手順に従ってpageを作成
GithubPagesの使用方法
Reactの初期設定についてよりreactファイルの作成
Reactコーディング
ダウンロードフォントの使用方法にてFutura Mediumを使用。
<h1 className="futura-font-bold back-black padding-16">
Into
The
<span className="accent"> U</span>
nknown
<span className="accent"> F</span>
amiliar
<span className="accent"> W</span>
orld
</h1>ちょっとコードはダサいけどデザインは好き
これいいよね
どっかに数字をインタラクティブに増やしてくれるReactライブラリがあったから
それを使って技術スタック欄をいい感じにしたい
ここをLoneTrailStyleにするの結構むずいな
アイコンとかも活用していい感じにしたい
とりあえず六角形を作ってみた
一応この人のも参考になるかも
プロファイルはこんな感じで付け足してく
なんか>とかをHTMLで使いたいときは変な書き方しないといけないらしい
SVG欲しいならここがいいかも
ここにSVG残しておく
XとGithubのアイコンのSVG
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50" style={{"fill":"#201919;"}}>
<path d="M 6.9199219 6 L 21.136719 26.726562 L 6.2285156 44 L 9.40625 44 L 22.544922 28.777344 L 32.986328 44 L 43 44 L 28.123047 22.3125 L 42.203125 6 L 39.027344 6 L 26.716797 20.261719 L 16.933594 6 L 6.9199219 6 z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64" style={{"fill":"#201919;"}}>
<path d="M32 6C17.641 6 6 17.641 6 32c0 12.277 8.512 22.56 19.955 25.286-.592-.141-1.179-.299-1.755-.479V50.85c0 0-.975.325-2.275.325-3.637 0-5.148-3.245-5.525-4.875-.229-.993-.827-1.934-1.469-2.509-.767-.684-1.126-.686-1.131-.92-.01-.491.658-.471.975-.471 1.625 0 2.857 1.729 3.429 2.623 1.417 2.207 2.938 2.577 3.721 2.577.975 0 1.817-.146 2.397-.426.268-1.888 1.108-3.57 2.478-4.774-6.097-1.219-10.4-4.716-10.4-10.4 0-2.928 1.175-5.619 3.133-7.792C19.333 23.641 19 22.494 19 20.625c0-1.235.086-2.751.65-4.225 0 0 3.708.026 7.205 3.338C28.469 19.268 30.196 19 32 19s3.531.268 5.145.738c3.497-3.312 7.205-3.338 7.205-3.338.567 1.474.65 2.99.65 4.225 0 2.015-.268 3.19-.432 3.697C46.466 26.475 47.6 29.124 47.6 32c0 5.684-4.303 9.181-10.4 10.4 1.628 1.43 2.6 3.513 2.6 5.85v8.557c-.576.181-1.162.338-1.755.479C49.488 54.56 58 44.277 58 32 58 17.641 46.359 6 32 6zM33.813 57.93C33.214 57.972 32.61 58 32 58 32.61 58 33.213 57.971 33.813 57.93zM37.786 57.346c-1.164.265-2.357.451-3.575.554C35.429 57.797 36.622 57.61 37.786 57.346zM32 58c-.61 0-1.214-.028-1.813-.07C30.787 57.971 31.39 58 32 58zM29.788 57.9c-1.217-.103-2.411-.289-3.574-.554C27.378 57.61 28.571 57.797 29.788 57.9z"></path>
</svg>技術スタックもいい感じ
タイプライターみたいなの作りたいときはこれを使うといいらしい
<Typewriter words={["sable Languages."]} typeSpeed={200} />これだけで簡単に使えて便利
こっちのほうがよさそう
こっちは多機能だけどここまではいいかなということで見送り
上のSimple typewiriterを使用することにした。
次に使える言語でどの程度得意かどうかを表すパラメータみたいなのを作りたい
このサイトに円グラフの美麗なグラのCSSがあった
個人的には円グラフより棒グラフのほうがいいかも
でもこのイメージ画像の回転した後にグラフの内容を表す線（ラベル）みたいなのは正直欲しい
LoneTrailStyleに則すならグラフは数直線ありの棒グラフが結構いいかもしれない
それグラフはビューポートに入ったらだんだん伸びていく感じでアニメーションする
LTStyleは結構アメリカの研究資料みを感じてるから
アメリカでのグラフの使用例を調べてみたらいい感じにデザインがみつかるかもしれないな
このなかでいうとスイススタイル／Swiss Internationalが近いかも
これをちょっと調べてみたらいい感じのが出てくるかも
これによると以下の原則が大事らしい
グラフィックデザインでの特徴
- **グリッドシステム
- **非左右対称構成
- **写真・イラストを利用した明確な情報提示（特にモノクロ写真等）
- **サンセリフ（特にヘルベチカ）の利用
- 左端揃え・右端ラグ（不揃い）の文字組
ヘルべチカはこのLTStyle解説動画でも言っていたやつ
非左右対称構成はちょっと意識してたけど
技術スタックの欄だと綺麗なことを意識しちゃって左右対称になっちゃったんだよな
これはちょっと考える必要がありそう
この技術スタックの欄もう少しスイススタイルっぽいものにしたいけど
一旦これ別の保管庫でExcalidraw使って配置してみた方がいいかも
クリップしてね。
これ結構いいかも
でもFramerMotionじゃないんだ
カウントアップにこの記事がいいかも
リアルタイムWebコンテンツにおいてプログレスUIを配置するケースは少なくない。これは進行状況を知らせるために用いられ、たとえばアップロード進捗やAPIリクエスト進捗など思い出される。 さてこのプログレスUI（進捗値）をページに描画するにあたり、瞬時に切り替わるような単純な差し替えでは面白くない。せっかくだから、なめらかに推移するようなエフェクトをかけてリアルタイム感を演出したい。 そんなニーズに最適なReact componentがある。 このエントリーでは、数値変化にアニメーションを与える「react-number-easing」を紹介したい。 もくじ導入方法インストール設置props基本的な使い方まとめ 導入方法 react-number-easing は、以下コマンドから導入できる。 インストール 設置 props Name Default Hint value null 目標値を設定 speed 500ms アニメーションの速度を設定 ease quintInOut アニメーション方式を設定 decimals 0 表示する小数点以下の桁数を設定 customFunctionRender Number(value).toString(decimals) レンダリング関数のカスタム設定 基本的な使い方 以下でreact-number-easingを使用したReact componentの例を示そう。6秒毎に数値がアニメーションする、というものだ。 まとめ 数値変化にアニメーションを与えるReactコンポーネント「react-number-easing」の紹介だった。 当該コンポーネントの使用は、いたって簡単でステートの更新で機能する。さらにpropsは少なく非常にシンプルな作りのため迷子になるようなことはなかった。アニメーション方式は内部でeasesライブラリを読み込んでいて、ひと通りのeasingは選択できる。雰囲気にあったものを適用するとよいだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
こっちの方がいいかも
これでちょっといい感じのアニメーション作れそう
こんな感じの数字を適用していて見たら結構いい感じ
この記事がめっちゃSVGを使って円を描く方法をわかりやすく説明してくれる
svgはこんな感じで簡単に書ける
export const Circle = () => {
return <div className="back-white">
<svg>
<circle cx="75" cy="75" r="70"></circle>
<circle className="line" cx="75" cy="75" r="70"></circle>
</svg>
</div>
}とりあえ箱を回転させてみたけどこれが結構いい感じになった。
import { motion } from "framer-motion"
export const AnimBox = (prop: {ele: JSX.Element}) => {
return <motion.div
animate={{
x: [0, 500, 0],
y: [-50, -50, -50]
}}
transition={{
duration: 5,
ease: "easeInOut",
repeat: Infinity,
repeatDelay: 0,
}}
>
{prop.ele}
</motion.div>
}これを家のＰＣで見たらめちゃいいけど
静的な値で移動距離を管理してるから
ノートPCでみたらめっちゃ画面からはみ出ちゃうわ
この部分を音楽機器とかによくあるつまみにしたら結構宇宙ぽくなるかもしれない
この四角の扱い困ってたからいいかも
これは消してまた後で再考しよう
まずはセクションを増やしていかないと
次は作成してきたアプリでも載せてみようかな
remusializatoion oretier てくぽのち おしあげ
この四つとかかな
あとりんなとかあったわ
まあそこら辺のアプリを載せていこうそういうデザインがいいかな
カード形式にしてoretierみたいな感じで下にアプリ名と説明、使用した技術を載せよう
これでcssのクリップが簡単にできるぞ！
こんな感じになった
これでhoverしたときに説明を出す感じでいいかな
これに表示する文を考えないと
- Oshige
This is Flutter Applications. buisiness
-
Ore
- remusi
- router
- てくぽ
ちょっと3dの箱作りたくなってきた
このリンクを見ていい感じに編集してよくなった
それとこの流星の軌跡も作成した
作成して以下のような感じ
作成方法はuseEffectとuseState、svg、setIntervalを使用して行った
コードとしてはこんな感じ
import React, { useState, useEffect } from 'react';
interface Point {
x: number;
y: number;
}
export const BackGround = () => {
return <div className='stars relative'>
<Star r={3} angle={13/10 * Math.PI}/>
<Star r={5} angle={7/6 * Math.PI}/>
<Star r={3} angle={5/4 * Math.PI}/>
<Star r={2} angle={13/12 * Math.PI}/>
<Star r={4} angle={19/14 * Math.PI}/>
</div>
}
const Star = (props: {r: number, angle: number}) => {
const r = props.r;
const angle = props.angle;
const X_BASE = window.innerWidth + 10;
const Y_BASE = -10;
const X_LIMIT = -window.innerWidth * 1.3;
const Y_LIMIT = -window.innerHeight * 1.3;
const SVG_COLOR = '#20191986'
const INIT_POINT = {x: X_BASE, y: Y_BASE}
const [point, setPoint] = useState<Point>(INIT_POINT);
const [i, inc] = useState<number>(0);
const [lineBase, setLineBase] = useState<Point>(INIT_POINT);
useEffect(() => {
const interval = setInterval(() => {
const x = Math.cos(angle) * (r + i);
const y = Math.sin(angle) * (r + i);
setPoint({x: X_BASE + x, y: -y});
inc(i + 1)
if(i > 256) {
const linex = Math.cos(angle) * (r + (i - 256));
const liney = Math.sin(angle) * (r + (i - 256));
setLineBase({x: X_BASE + linex, y: -liney})
}
if(x <= X_LIMIT || y <= Y_LIMIT) {
inc(0)
setPoint(INIT_POINT)
setLineBase(INIT_POINT)
}
}, 16); // 60fpsのアニメーションを実現するため、16msごとに更新 256, 1300
return () => clearInterval(interval);
}, [point]);
return <div className='star absolute'>
<svg width={window.innerWidth * 0.95 } height={window.innerHeight}>
<circle cx={point.x} cy={point.y} r={r} fill={SVG_COLOR}/>
<line x1={lineBase.x} y1={lineBase.y} x2={point.x} y2={point.y} stroke={SVG_COLOR} strokeWidth={1}></line>
</svg>
</div>
}ここにspeedコンストラクタを追加して速度をそれぞれ変更できるようにしよう
追加した。
あとこのサイトのロゴが欲しいわ
作ってみたけどうーんて感じ
今は
-
01- 概要
-
02- 自己紹介
-
03- 使用できる言語
-
04- 作ったアプリの例
だけどもっとなんかいろいろほしいからそこを考えよう。 -
05- 好きなもの
- Constellation
-
06- ゲームについて
- Strategic Cognition
-
07- 将来
- Temporal frontier
-
08- contact
-
09- このサイトについてと孤星への感謝
- LONETRAIL
こんな感じかなー？
いったんデザインとかあんまり考えないでここら辺埋めてみようかな
svgで曲線書く方法
途中で
そこから文字色を
これを使用して重なった要素に対して色を変更できるようになったかもしれない
これを使用するとreactにscssが導入可能
多分SCSSを使用することではにかむが簡単になるとかの利点があるからちょっと検討
ただし、大学祭には間に合わなそうだからそれが終了してから導入しよう
そういえばCSSのセレクタでfirst-letterを使うと、セレクタが適用されているクラスの文字の一文字目にだけスタイルを適用できる。このサイトは一文字目に色々するデザインだから使用してみる。
これでスクロール時にアニメーションできるらしい
import React, { ReactNode } from 'react';
import { motion } from 'framer-motion';
interface AnimatedOnViewProps {
children: ReactNode;
}
const AnimatedOnView: React.FC<AnimatedOnViewProps> = ({ children }) => {
return <div>
<motion.div
initial={{ opacity: 0 }}
transition={{
duration: 1,
delay: 1
}}
whileInView={{
opacity: 1,
}}
viewport={{amount: 0.3}}
>
{children}
</motion.div>
</div>
};
export default AnimatedOnView;framermotionを使用するとスクロール出現時にアニメーションを適用することができる。
ここから下は背景を変えようかな
次にscssを適用した
方法としては
npm install sass
npm install node-sassを実行してreact内のcssファイルをすべてscssに拡張子を変更するだけ
このコードでこんなのができた。
$trans: translateY(100px) rotate3d(-10, 2, 4, 45deg);
.card {
transform: $trans;
border-radius: 16px;
}
.phone{
stroke: var(--white);
}
.flutter{
fill: var(--white);
}
.card-ac-phone{
stroke: var(--black);
}
.card-ac-flutter{
stroke: var(--black);
fill: var(--black);
}
.card-pull{
background-color: var(--accent);
transform: $trans + translateX(-64px) translateZ(75px);
}
@for $i from 1 through 10 {
.card-ab-#{$i} {
transform: translateY(-15px * $i);
position: absolute;
}
}
box-shadowを調整してアイコンも変えてみた
planetをcsvのstroke-dasharrayを使用していい感じになった
.pn-circle{
fill: transparent;
stroke: var(--white);
stroke-width: 4px;
stroke-dashoffset: calc(360 - (360 * 100) / 100);;
}
@keyframes planet-spin {
0%{
transform: rotateZ(0deg) rotateY(0deg) scale(1.3);
stroke-dasharray: 0 360;
}
50%{
transform: rotateZ(180deg) rotateY(180deg) scale(1.7);
stroke-dasharray: 360 0;
}
100%{
transform: rotateZ(360deg) rotateY(360deg) scale(1.3);
stroke-dasharray: 0 360;
}
}
contact欄には何を書くか決める
- github
- discord
- mail
この四つを載せようかな
載せた
意外とデザインはいい感じになった
最後に権利表記とLONETRAILへの感謝を書いた
これでこのサイト制作は一旦終了だね
