ramer-dev/portfolio

주요 기능

사용자 기능

• Greeting!
• Profile
• Tech Stack
• Contact
• Project List
• Career

인터랙션 기능

• On scroll animate 3d object
• On click at my project, Popup description.

Background

"인터랙션이 풍부한 웹이 무엇이 있을까?"

이번 프로젝트를 기획할 때는 기술적보다는 디자인과 UX적 측면에서 더 접근하였었습니다. 그러던 중 Three.js라고 하는 3D 렌더 라이브러리를 활용한 웹사이트를 보게 되었고, 저도 이렇게 근사한 웹을 구현 해보고 싶다는 생각을 하는것으로부터 시작하게 되었습니다.

기술적인 부분을 설계하던 중, 저에게 친숙한 프레임워크인 React로 구성하려 했으나, 포트폴리오라는 페이지 특성이 모두에게 보여지는 페이지이기에 검색엔진 노출 또한 고려하여 SSR을 지원하는 NEXT.js를 활용하게 되었습니다. 그리고 utilty-first라는 특성을 지원하여 css 파일을 오가는 컨텍스트 스위칭도 없어 손쉬운 개발을 할 수 있었습니다.

What I've Learned

--개발을 마치고 배운점을 쓰도록 하자--

Tech stacks

• FE : Next.js, TypeScript, Tailwind CSS, Three.js

Environment Setup

1. install js packages
npm install

2. Run FE Server
npm run dev

이 프로젝트는 Ramer의 개인 포트폴리오 게시용 프로젝트입니다