5SUNS's Portfolio

PUBLISHER

PORTFOLIO

PUBLISHER

PORTFOLIO

Learning new technologies

Growing as a publisher

Can do skills

Tenacious

포기하지 않는

Perfectionistic

완벽주의자

About Me

Name

이오성

Birth

2000.**.**

Certificate

2024

컴퓨터 활용능력 2급

2024.12 창원상공회의소

2022

운전면허 2종 보통

2022.08 마산운전면허시험장

Education

2025

그린컴퓨터아카데미 UI/UX 반응형 웹디자인&웹퍼블리셔 양성과정

수료 2025.01 ~ 2025.06

2025

그린온라인캠프 웹퍼블리싱 & 웹개발을 위한 코딩 기초

수료 2024.12 ~ 2025.01

2025

동서대학교 운동처방학과

졸업 2019.03 ~ 2025.03

2019

진해중앙고등학교

졸업 2016.03 ~ 2019.02

Can do skills

Main Project

기여도: 기획, 디자인, 코딩 100%

All
Renewal
Clone

ART & culture

미술 교육 콘텐츠를 전문 개발하는 아트앤컬처의 리뉴얼 페이지입니다.

#리뉴얼
#반응형
#마우스트래킹
#로그인페이지
#오토슬라이드
#스티키
#아코디언메뉴

Website

Figma Github Project

overlay

가로 스크롤 섹션

스크롤시 가로로 스크롤 되는 섹션을 구현하는데 어려움을 겪었습니다. offsetTop 속성으로 섹션 위치를 찾고 window에 scroll 이벤트를 추가했습니다. 스크롤 위치에 따라 transformX 값을 계산하여 가로로 이동 할 수 있도록 구현했습니다. 모바일에서는 가로 스크롤을 해제하고 세로 스크롤 방식으로 변경하였습니다.

Britz

한국의 음향기기 전문 기업 브리츠의 리뉴얼 페이지입니다.

#리뉴얼
#반응형
#오토슬라이드
#메인페이지

Website

Figma Github Project

overlay

로직 충돌

헤더의 속성을 바꾸는 로직이 중복되거나 꼬이는 어려움을 겪었습니다. mouseenter, mouseleave 이벤트와 scroll 이벤트가 서로 영향을 주는 상황에서 로직 충돌이 발생했습니다. 공통 함수를 만들어 스타일 변경을 일괄적으로 처리하도록 설계했고 상태에 따라 스타일을 변경할 수 있도록 했습니다.

NICE Group

금융 인프라 전문 기업, NICE그룹의 클론 페이지입니다.

#클론코딩
#반응형
#GSAP
#AOS
#스와이퍼슬라이드
#라이트모드
#다크모드
#언어변경
#아코디언메뉴

Website

Figma Github

overlay

GSAP

이미지를 그리드로 나눠서 나타나게 하는 애니메이션을 구현하는 데 어려움을 겪었습니다. GSAP demo 사이트에서 사용 예제들을 보고 구현해 보면서 사용하는 법을 익혔습니다. NICE 그룹의 웹페이지 코드를 분석해 보았고, 이미지 위에 마스크 아이템을 씌우는 것이었습니다. 한번 구현해 보니 다른 이미지에 적용하는 것도 쉬워졌습니다.