Skip to content

lhr0055/ReactWebProject

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Turtle's Profile Website

구분 내용
인원 1인
작업기간 24.06.07 ~ 06.13
사용언어 및 라이브러리 React, HTML, CSS, BootStrap
참고 - 미리캔버스로 밑배경 제작 및 그림 업그레이드
- 코파일럿 AI를 사용하여 거북이 캐릭터 생성
- Icon8
- 눈누폰트

개요

리액트 기반의 개인 포트폴리오 웹사이트를 제작하였습니다
이력서에 들어갈만한 내용과 프로젝트에 대한 내용을 담은 미니 홈페이지이며 약간의 재미요소를 담아 게임 컨셉으로 제작하였습니다. 게임의 기능이 들어가있지않지만 애니메이션 및 폰트에서 느낌을 살려보았습니다. 제가 지향하는 개발자의 모습인 거북이를 바탕으로 전체적인 색감과 캐릭터를 정하였으며, AI를 사용하여 원하는 이미지를 직접 생성해보는데 도움을 받았습니다.

느낀 점
해당 프로젝트를 진행하면서 저는 HTML, JavaScript, CSS 등 웹 개발에 필요한 다양한 기술들을 자유롭게 활용할 수 있어 좋았습니다. 포트폴리오 웹사이트라는 정해진 컨셉 내에서 저만의 창의성과 개성을 마음껏 표현할 수 있었기 때문에 부담감 없이 프로젝트를 수행할 수 있었습니다. 이와 같이 기술적인 자유도와 창의성 발휘의 기회가 주어진 이 프로젝트를 통해 저는 단순한 이력서의 형식이아닌 포트폴리오로서의 가치를 지닌 결과물을 만들어낼 수 있었습니다.


Loading

loding


설명

  • 거북이가 돌아가는 모습으로 로딩 애니메이션을 표현해봤습니다.
  • 거북이에게 마우스를 올리면 속도가 올라갑니다.
  • 비밀번호 확인을 통하여 홈페이지에 접근할 수 있지만 게스트로 입장하기를 클릭하는 경우 비밀번호 없이 입장 가능합니다.

Main

main


설명

  • 메인페이지에는 연락처 및 사이트 정보 등 간단한 자기소개 내용이 나타납니다.
  • 상단에는 거북이가 헤엄치듯 움직이는 애니메이션 효과를 주었고 거북이 알을 클릭하면 Skill 페이지로 이동됩니다.
  • 하단에는 캐러셀을 이용하여 자기소개 항목을 간단하게 넣어봤습니다.

Skill

project


설명

  • Skill 페이지에서는 기술 스택 및 프로젝트를 한눈에 확인할 수 있습니다.
  • 전체 나열된 것은 기술 스택이며 이중 색이 표시된 항목은 프로젝트를 진행한 스택입니다.
  • 해당 프로젝트는 깃과 노션을 통해 확인할 수 있으며 원하는 항목의 버튼을 누르면 페이지가 이동됩니다.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages