ポートフォリオは、自分の履歴や能力を周囲に伝えるための作品集です。就職の面接やクライアントへの売り込みで、自分に何ができるのかをアピールする大切なツールになります。
ただし、過去の作品を無造作に並べただけでは、ポートフォリオ本来の役割は果たせません。ポートフォリオは、あなたの作品をまとめた「器」であると同時に、それ自体がひとつの完成した作品としてあなた自身を映す「鏡」なのです。
たとえるなら、ポートフォリオは1冊の本や1本の映画のようなもの。ストーリーに沿って読み手を最終ページまでエスコートする企画・構成が、本物のポートフォリオ作りに欠かせない要素となります。
https://school.japandesign.ne.jp/portfolio/what-is-a-portfolio.html

スキルの整理
スキルの紹介
スキルの証明
名刺にQRコードを貼って知らせる
プレゼン能力の証明
採用を突破する武器

２．掲載する制作物をリストアップ

じつは成果物として掲載できるものは、まだまだ多くはありません。
今後、機会を見つけて増やしていきます。

❏❏❏　ライティング

最近の作品のうち、公開できるもの、記名のもの

❏❏❏　コーディング

まだ、受注したものはないので、codestepを中心に成果物をまとめる

３．ポートフォリオ・Webサイトの情報収集

今日はここまで。今週すこしづつ考えていきます。

2021-07-05

【92日目】 #codestep 中級編2つ目coffeeshopのReadMoreを整理しました【完成動画も】

【codestep】 codestep codestep中級編2:CoffeeShop ReadMore

今日は、codestep中級編2つ目のcoffeeshopを精読しました。
知り合いにコーヒーショップに「ホームページ作ってね」と言っていただいているので、気合が入ります。

この課題のテーマは、私の中では

backgroundに載せる文字のabsolute
backgrouundの画像をスクロール時にも固定する
RreadMore ボタンの作り方

でした。この記事では、３つめのReadMoreについて整理します。
このコードは自力では書けるレベルではありませんでしたので、模範解答のおさらいついでにまとめています。

codestep 中級編２CoffeeShopにあるReadMoreとは

まずは、模範サイトを見たほうが早いので掲載しますね。

「初期には、左右の赤い鍵状に囲われているボタンですが、hoverすると四角く囲う」というものです。
作り方を見てみましょう。

ReadMoreボタンの作り方

まずbottnのかたちを作ります。

#about .btn {
  width: 160px;
  height: 50px;
  line-height: 3.5;
  display: inline-block;
  color: #000;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;         // これを親要素とします

そしてそもそもこのbottunはhtmlを見ると、

 <a class="btn" href="#"><span>Read More</span></a>

と、.btnとspanで二重に覆われており、

#about .btn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

と指定されています。

①この表現に必要なものは以下の通り

右縦棒：wide2px,height50%
右横棒：wide20%,height2px
左縦棒：wide2px,height50%
左横棒：wide20%,height2px

②この四本を左右それぞれ、右下と左上を起点としたabsoluteを作り、鍵のかたちとする

疑似要素のbefore,afterについてはこちらの記事がわかりやすかったです。before/afterが前後につかなくても良いなんて！
https://mihune-web.com/before_after/

【右縦棒】

.btn::before{
position:absolute;　//親要素に対して下のright,bottomを起点にする
content:"";
right:0;           //右の
bottom:0;　        // 底辺を起点
wide:2px;          //幅2pxで
height:50%;　　　　//高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

【右横棒】



.btn::after{
position:absolute;　//親要素に対して下のright,bottomを起点にする
content:"";
right:0;           //右の
bottom:0;　        // 底辺を起点
wide:20%;          //幅は親要素btnの長さの20%
height:2px;　　　　//高さ
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

【左縦棒】

.btn span::before{
position:absolute;　//親要素に対して下のleft,topを起点にする
content:"";
left:0;           //左の
top:0;　       　 // 上辺を起点
wide:2px;          //幅2pxで
height:50%;　　　　//高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

【左横棒】


.btn span::after{
position:absolute;　//親要素に対して下のleft,topを起点にする
content:"";
left:0;           //左の
top:0;　        　// 上辺を起点
wide:20%;          //幅は親要素btnの長さの20%
height:2px;　　　　//高さ
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

③hoverしたときに、この4本の棒が、0.3秒かけて自然な動きで100%の長さになってReadMoreを四角く覆う

【縦棒は長さを100%にする】

#about .btn:hover::before,
#about .btn span:hover::before {
  height: 100%;
}

【横棒の長さを100%にする】

#about .btn:hover::after,
#about .btn span:hover::after {
  width: 100%;
}

完成ページはこんなかんじです

2021-07-03

【91日目】怪しい案件

マンション管理人暴力団架空対談書きます

ココナラで「架空対談か書きます」というスキルを販売しています。

ベネフィットをわかりやすく伝える架空対談作ります 3,000円→1,000円に値下中。どんな状況設定でもOK。

先日、この案件にお問い合わせがありました。
内容は、詳しく書けないのですが、「あるシチュエーションで、マンション管理人と麻薬密売人の対談」を書いてほしいというものでした。

お尋ねすると、自分の小説に挿入したいのだとか。たしかに過去にも小説を書かれている実績がある方でしたので、お受けしました。

しっかし、いろいろググりましたが、すごい世界ですなぁ、密売人。。。

【毎朝1時間】プログラミング初心者のオヤジが、Web制作とセールスライティングを学んで、案件をゲットするまでのブログ

コーディングの知識がほとんどないオヤジが独学で仕事をゲットするまでの日記です。目標は、売れるLPを企画からデザイン、コーディングまでできるオヤジです。

【97日目】 #codestep中級ハンバーガーメニュー登場

ハンバーガーメニュー

【96日目】jQuery標準デザイン講座18まで来ました

【95日目】ワクチン接種の左肩が痛いけど #codestep 中級3つ目をはじめました

【94日目】ポートフォリオ作成への道(2)

【93日目】ポートフォリオ作成への道(1)

１．ポートフォリオの制作目的を明確化

２．掲載する制作物をリストアップ

❏❏❏　ライティング

３．ポートフォリオ・Webサイトの情報収集

【92日目】 #codestep 中級編2つ目coffeeshopのReadMoreを整理しました【完成動画も】

codestep 中級編２CoffeeShopにあるReadMoreとは

ReadMoreボタンの作り方

①この表現に必要なものは以下の通り

②この四本を左右それぞれ、右下と左上を起点としたabsoluteを作り、鍵のかたちとする

③hoverしたときに、この4本の棒が、0.3秒かけて自然な動きで100%の長さになってReadMoreを四角く覆う

完成ページはこんなかんじです

【91日目】怪しい案件

ハンバーガーメニュー

１．ポートフォリオの制作目的を明確化

２．掲載する制作物をリストアップ

❏❏❏ ライティング

３．ポートフォリオ・Webサイトの情報収集

codestep 中級編２CoffeeShopにあるReadMoreとは

ReadMoreボタンの作り方

①この表現に必要なものは以下の通り

②この四本を左右それぞれ、右下と左上を起点としたabsoluteを作り、鍵のかたちとする

③hoverしたときに、この4本の棒が、0.3秒かけて自然な動きで100%の長さになってReadMoreを四角く覆う

完成ページはこんなかんじです

❏❏❏　ライティング