song su ji
eye-opening
frontend
go to github page. scroll down. figma designdraft.
loading : 100%
Hello, I'm Song Su-ji, a new front-end developer.

어떤 일이라도노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다.
신입의 열정과 도전정신을 깊숙히 새기며 배움에 있어 겸손함을 유지하며
세부적인 곳까지 파고드는 개발자가 되겠습니다.

송수지 SONG SU JI(1995.05.06)

어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다. 신입의 열정과 도전정신을 깊숙히 새기며 배움에 있어 겸손함을 유지하며 세부적인 곳까지 파고드는 개발자가 되겠습니다.

    사용 스킬

  • HTML/CSS
  • Javascript/jQuery
  • PHOTOSHOP
  • ILLUSTRATOR
  • FIGMA
  • REACT
  • PHP

    인생 키워드

  • 열정적인
  • 노력파
  • 협동적인
  • 목표지향
  • 꿈, 개발자
  • 성실함
  • 겸손함
GITHUB INSTARGRAM
site-opening
project

main, sub, detail, login page

loeuvresite
루에브르목업
site view code view

main page site

lakasite
라카목업
site view code view

Mobile site

nerdysite
널디목업
site view code view

sitemap

mlbsite
엠엘비목업
site view code view
site-opening
script open
테트리스

tetris game

forEach 반복문과 switch, 삼항연산자를 조건문으로 사용해 함수를 생성하여 리팩토링하기 편리하도록 작업을 진행하여 테트리스 게임을 제작하였습니다.

site view
typing game ....
typing 했을 때 발생하는 다양한 이벤트를 생성하여 typing game을 제작하였습니다.
site view

puzzle game

퍼즐게임
site view
뮤직어플

music app

함수와 함께 매게변수를 사용하여 전달 인자를 불러와 버튼을 클릭하면 해당 곡이 플레이되도록 이벤트가 생성하여 작업했습니다. 클릭했을 때 발생하는 이벤트의 반복적인 작업을 효율적으로 실행하기 위해 for문과 swith를 함께 사용하여 뮤직어플리케이션을 제작하였습니다.

site view
카드게임

card game

forEach 반복문과 switch, 삼항연산자를 조건문으로 사용해 함수를 생성하여 리팩토링하기 편리하도록 작업을 진행하여 테트리스 게임을 제작하였습니다.

site view
타이핑게임

typing game

forEach 반복문과 switch, 삼항연산자를 조건문으로 사용해 함수를 생성하여 리팩토링하기 편리하도록 작업을 진행하여 테트리스 게임을 제작하였습니다.

site view
채팅어플

chatting app

nodejs를 통해 socket.io 라이브러리를 사용하여 양방향 채팅이 가능하도록 하였고 name, message, time 등의 정보를 객체화하여 불러오는 방식을 이용해 채팅앱을 제작하였습니다.

site view
site-opening
project

01

Tous Les Jours react를 사용하여 제작한
spa사이트입니다.

reactwidth : 1920px

뚜레쥬르

02

movie site react와 api 이용하여 제작한
movie사이트를 입니다.

react반응형 사이트

영화사이트

03

to do list react를 사용해서 제작한
to do list입니다.

react 반응형 사이트

영화사이트

04

Tous Les Jours react로 만들었던 사이트를
vue를 사용해서 제작한 사이트입니다.

vuewidth : 1920px

뚜레쥬르

05

map of bread php 사용해서 댓글, 로그인, 회원가입이
가능한 사이트를 제작하였습니다.

phpwidth : 1920px

빵동여지도

studyjavascript

grammar study

01. IMAGE EFFECT

image가 상하 좌우로 움직일 수 있도록 효과를 생성하여 IMAGE EFFECT에 대한 공부를 진행하였습니다.

site view code view

02. TO FOLLOW

mouse를 따라 움직이던 도형의 크기가 커지고 색상도 변경이 되게 효과를 주어 MOUSE EFFECT에 대한 공부를 진행하였습니다.

site view code view

03. MENU MOVE

image에 흑백효과 주어 mouse를 올려 놓으면 filter: saturate(100%);로 바뀌도록 작업하여 image 컬러감을 주는 효과를 넣어 MOUSE EFFECT를 주는 공부를 진행하였습니다.

site view code view

04. HIDDEN MENU

setTimeout으로 값을 출력하여 스크롤을 내리면 메뉴가 나타났다가 스크롤을 처음부분으로 끝까지 올리면 다시 menu가 사라지도록 동작구현하여 MENU EFFECT 공부를 진행하였습니다.

site view code view

05. mouse move

image에 background color 주어 image색상이 안 보이도록 배치하고 mouse 커서가 이동하는 방향에만 image색상이 보이도록 하는 IMAGE EFFECT에 대한 공부를 진행하였습니다.

site view code view

06. TEXT EFFECT

transform과 접목시켜 mouse를 좌우 움직이면 text도 함께 좌우로 움직이도록 효과를 넣어 TEXT EFFECT에 대한 공부를 진행하였습니다.

site view code view

Thank
you for
watching!

mycontact

song su ji

E-MAIL: songsuji0@gmail.com github

How was my portfolio?

Thank you for viewing my portfolio.
If you have any further questions,
please send them to songsuji0@gmail.com.

available programs :

html

css

js

react

scss

php

figma

I'm Song Su-ji, a new front-end developer. I'm Song Su-ji, a new front-end developer. I'm Song Su-ji, a new front-end developer.