G.SUNAH
PORTFOLIO

HELLO, WORLD!
I'M FRONTEND DEVELOPER I'M FRONTEND DEVELOPER I'M FRONTEND DEVELOPER I'M FRONTEND DEVELOPER

Plan and
orgnize
anything

  • Blog
  • JavaScript &
    CSS Animation
  • Work
    Projects
  • Website
    Portfolio
  • Contact Me

Helloโœ‹๐Ÿป
My SideProject

  • React Auckland
    ์ฒซ ๋ฒˆ์งธ๋กœ ์ œ์ž‘ํ•œ React ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.
    ์„น์…˜ ๋ณ„๋กœ jsx ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด export ํ•œ ํ›„ App.js์—์„œ import ํ•˜์—ฌ ๋ฐ›์•„์™€ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ props๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฐํŠธ๋ช…, ๋ฐฐ๊ฒฝ์ƒ‰ ๋“ฑ์„ ์ „๋‹ฌํ•˜๊ณ  ์ ์šฉ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค.
  • React Hotels Combined
    ๋‘ ๋ฒˆ์งธ๋กœ ์ œ์ž‘ํ•œ REACT ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.
    npm์„ ํ†ตํ•ด Swiper๋ฅผ ์„ค์น˜ํ•˜์—ฌ Autoplay์™€ loop ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋œ ์Šฌ๋ผ์ด๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜์˜€๊ณ , SCSS๋ฅผ ์‚ฌ์šฉํ•ด ์Šคํƒ€์ผ๋ง ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • React API Site
    API๋ฅผ ํ™œ์šฉํ•œ React ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.
    TMDB , Youtube , Unsplash API๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์˜ํ™”, ์˜์ƒ, ์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์„ ์ œ์ž‘ํ•˜์˜€๊ณ  BrowserRouter๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ URL ์ฃผ์†Œ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํ™”๋ฉด์„ ๋ Œ๋”๋ง ํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.
  • React Youtube API
    Youtube API๋ฅผ ํ™œ์šฉํ•œ REACT ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.
    ์™ผ์ชฝ ๋ฉ”๋‰ด๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ํ‚ค์›Œ๋“œ๋กœ ๊ฒ€์ƒ‰ํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ , useState์™€ onChange๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ input value ๊ฐ’ ์„ค์ •์„ ํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.
  • Vue Vue Site
    Vue ์‚ฌ์ดํŠธ ์ž…๋‹ˆ๋‹ค.
    ์„น์…˜์„ ์ปดํฌ๋„ŒํŠธ๋‹จ์œ„๋กœ ๋‚˜๋ˆ„์–ด ์ž‘์—…ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • PHP PHP site
    PHP ์‚ฌ์ดํŠธ ์ž…๋‹ˆ๋‹ค.
    ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ๊ฒŒ์‹œ๋ฌผ ๋“ฑ๋ก, ๋Œ“๊ธ€ ์ž‘์„ฑ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ œ์ž‘ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

Hello,
My Publishing Site

01 Lee Seung Gi

๋ฐ์Šคํฌํƒ‘, ๋ชจ๋ฐ”์ผ UI ๊ฐœ๋ฐœ
์ฐธ์—ฌ๋„ 100%

02 DSP Media

๋ฐ˜์‘ํ˜• UI ๊ฐœ๋ฐœ
์ฐธ์—ฌ๋„ 100%

03 Amway Foundation

๋ฐ˜์‘ํ˜• UI ๊ฐœ๋ฐœ
์ฐธ์—ฌ๋„ 100%

04 Gran Fondo

๋ฐ˜์‘ํ˜• UI ๊ฐœ๋ฐœ
์ฐธ์—ฌ๋„ 100%

05 more

๊ทธ ์™ธ ์ž‘์—…๋ฌผ

Hello,
My CSS Animation

  • Marquee

    transform์„ ์‚ฌ์šฉํ•˜์—ฌ x์ถ•์œผ๋กœ ์ด๋™ํ•˜์—ฌ
    marquee ํšจ๊ณผ๋ฅผ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

  • Wave Effect

    ๊ฐ™์€ animation ํšจ๊ณผ์— ์›€์ง์ด๋Š” ์‹œ๊ฐ„์„ ๋‹ค๋ฅด๊ฒŒ ํ•˜์—ฌ
    ์ถœ๋ ๊ฑฐ๋ฆฌ๋Š” ๋ฌผ๊ฒฐ ํšจ๊ณผ๋ฅผ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

  • Sticky Effect

    display: flex๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜์˜€๊ณ ,
    position: sticky๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฒน๊ฒน์ด ์Œ“์ด๋Š” ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

  • Todo List

    before, after ๊ฐ€์ƒ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ
    checkbox ๋””์ž์ธ์„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • Shiny Card

    background-clip ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ธ€์”จ์— ์€๋ฐ• ํšจ๊ณผ๋ฅผ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.
    transform : rotate ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›€์ง์ด๋Š” ํšจ๊ณผ๋ฅผ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

  • Snowball

    background gradient๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ
    ์Šค๋…ธ์šฐ๋ณผ์ด ์›€์ง์ด๋Š” ํŠธ๋ ‰์— ์ƒ๋™๊ฐ์žˆ๋Š” ํšจ๊ณผ๋ฅผ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

Hello,
My JavaScript

  • Music
    Player
    JavaScript
  • Drawing JavaScript
  • Memory
    Game
    JavaScript
  • Typing
    Game
    JavaScript
  • Coin flip JavaScript
  • Calendar JavaScript
HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue โ€ข HTML โ€ข CSS โ€ข jQuery โ€ข JavaScript โ€ข React โ€ข Vue