PRIME

FRONT-END

PORT_FOLIO

SCROLL DOWN

新しい道を作り
いつもチャレンジする

フロントエンド開発に活かしている私の考え方は、

“好奇心を持ち、計画的に行動すること”

これまでの経験を通じて、決してあきらめない姿勢を大切にし、常により良い成果を目指して取り組んできました。
また、常に顧客の視点を意識しながら、一つの技術や言語にとどまらず、新しい技術やトレンドを学び、実践を通して経験を積んでいます。

#継続力がある
#最後までやり切る
#粘り強く取り組む

詳細を見る

MY_STORY

2012年からデザインに興味を持ち、自らデザインし、制作することを楽しんできました。さまざまなプロダクトデザインの経験を通じてWebデザインにも関心を持つようになり、Webデザインの基礎を学びながらコーディングを始めました。
プログラミングを通じて自分のアイデアを形にすることに大きな達成感を覚え、そこから本格的にプログラミングの世界へ踏み出しました。

[ 2015 - 2016 作品 ]

IT分野に進む前は、2015年よりデザイナーとして活動を開始し、2016年6月からは韓国でフリーランスの展示デザイナーとして、現場管理およびデザイン設計に従事しました。
インターンから始まり、さまざまな分野のプロジェクトに携わってきました。こうしたデザイン経験は、プログラマーとしての成長にも役立っており、言語やアルゴリズムを学ぶ中で、デザイナーが意図する表現や方向性をより深く理解できるようになりました。
常に最新のトレンドに沿って新しい技術を学べることに達成感を感じています。不足している部分を一つずつ補いながら、プログラムに関する知識と実装力を高めるため、継続して学習しています。

TECH STACK

アイコンにマウスを合わせると、詳細な説明が表示されます。

# FRONTEND

HTML5

WEBアクセシビリティと標準準拠を遵守し、セマンティックタグを使用してマークアップすることができます。
CSS3

positionおよびdisplayプロパティを適切に活用して、レスポンシブWebを適用することができます。
JavaScript

配列、条件分岐、メソッド、DOMを理解し、さまざまな状況に適用することができます。
TypeScript

型定義を活用し、コードの可読性と保守性を高めながら実装することができます。
React

フックやコンポーネント設計を理解し、再利用性の高いUIを構築することができます。
Next.js

SSRや静的サイト生成を活用し、効率的なWebアプリケーションを構築することができます。
Sass

SCSSの文法とモジュール化を活用し、スタイルを整理しながら実装することができます。
jQuery

DOM操作やイベント処理を理解し、既存サイトの動きやUI制御に活用することができます。

# BACKEND

Node.js

サーバーのAPIを構築し、DBと連携してCRUD機能を実行することができます。
PHP

基本的な構文とサーバーサイド処理を理解し、Webアプリケーション開発に活用することができます。
Laravel

MVC構造を理解し、ルーティングやデータ連携を含む基本的な機能を実装することができます。

# DATABASE

MySQL

テーブル設計、クエリの実行、データの追加・更新・削除など、基本的なデータ管理を行うことができます。
PostgreSQL

リレーショナルデータベースの構造を理解し、プロジェクトに合わせたデータ設計と操作を行うことができます。
MongoDB

Mongooseを使用してスキーマを定義し、アプリケーションと連携したデータ処理を行うことができます。

# USING_TOOL

VS Code

主に使用しているコーディングツールで、コーディングを便利にする拡張機能をインストールして利用しています。
GitHub

リポジトリ管理やコード共有、バージョン管理の流れを理解して活用することができます。
Postman

APIリクエストの確認やレスポンス検証を行い、開発中の動作確認に活用することができます。
Figma

デスクトップやモバイルのUI/UXデザインを作成し、デザイン確認に活用することができます。
Adobe Illustrator

ベクター形式のデザイン要素やアイコン、グラフィック素材を制作することができます。
Adobe Photoshop

マスク効果やレイヤーを活用し、さまざまなグラフィック要素を制作することができます。
JSON

オブジェクト構造を理解し、APIレスポンスや設定データとして活用することができます。

WORKS

KAZARU

個人プロジェクト

Photoshop、Illustrator、Figmaを用いて制作したECサイトデザインです。
アメリカのトレンドデザインやハイブランドのデザインを参考にし、
モノトーンを基調とした、ユーザーが見やすいデザインを意識して制作しました。もっと見る

~~~

純粋なデザインツールのみを使用して作成しました。
当初からWebサイトがどのように作られているのかに興味があり、
趣味としてこのプロジェクトを始めました。
制作期間は長くありませんでしたが、次回はより時間をかけて、フロントエンド技術も取り入れながら
実際に動作するWebサイトとして制作したいと考えています。

#PhotoShop
#Illustrator
#Figma
#Web Design
#prototype

Figma

TOSS（ver.jp）

個人プロジェクト

TOSSの金融サービスを参考に、日本向けのWebサイトとして再構成した個人プロジェクトです。
TOSS社のメインカラーを参考にし、シンプルで信頼感のあるUI・UXを意識して制作しました。
必要な情報だけを分かりやすく整理し、ユーザーが直感的に操作できる構成を目指しました。

#PhotoShop
#Illustrator
#Figma
#Web Design
#金融システムデザイン

Figma

PrimeKim

個人プロジェクト

Next.jsとMongoDBを用いて開発したECサイトです。
MongoDBを活用し、商品データの登録・取得・更新・削除などのCRUD機能を実装しました。もっと見る

~~~

Next.js 14を使用することで、フロントエンドとバックエンドの連携について理解を深めることを目的に制作しました。一部未完成のコンポーネントがあるため、機能追加やUI改善を継続的に進めています。

#TypeScript
#Next.js
#MongoDB
#TailWind_CSS
#レスポンシブ対応

GitHub

L.E.O.T

個人プロジェクト

L.E.O.Tは「Locate Estate Of Tomorrow」の略で、
未来の理想的な住まいを見つけるという意味を込めた不動産サイトです。もっと見る

~~~

オレンジをメインカラーにし、初めてReact.jsを使用して制作しました。
コンポーネント分割やページ構成を意識しながら、Reactの基礎理解を深めることを目的に取り組みました。
デザイン面では、物件情報を見やすく整理し、
ユーザーが必要な情報にスムーズにアクセスできる構成を目指しました。
また、アニメーションを取り入れることで、画面全体に動きを加え、
不動産サイトとしての高級感や信頼感を演出しました。