2023
Portfolio
impact
0
2023
Portfolio
impact
scroll

저의 이름은 신동진입니다. 특수체육을 전공으로 공부하였고, 다양한 분야의 업무를 하며 나의 적성에 맞는 일을 찾고자 노력을 했습니다. 그러다보니 국비지원학원에서 코딩을 약 6개월간의 여정을 시작했습니다. 여정의 시간을 보내면서 재밌어하는 모습을 보면서 코딩도 내 적성에 맞다고 생각하게 되었습니다.

특수체육을 전공하며
뛰어난 신체 능력을 갖추었지만,
나는 더 큰 꿈을 향해 나아가고 싶었다.
다양한 분야에서의 업무 경험과 특수체육 전공의 뛰어난 신체 능력,
이 모든 것을 코딩의 세계에 접목시켜,새로운 가능성을 열어나갈 수 있다.
나는 코딩을 통해 꿈을 향해 나아가고,평원처럼 넓은 세상에서 내 적성을 마음껏 펼쳐나갈 수 있다.
Portfolio Is
the Passion
to action
site coding
1

WEBSTANDARD

CODING
VIEW
WEBSTANDARD
SITE TO
ACTION

웹 표준성과 웹 접근성을 준수하면서 만든 사이트 입니다.
ir효과를 이용하여 모든 사용자가 불편함이 없이 사이트를 쉽게
이용할 수 있도록 제작하였습니다.
슬라이드 효과는 swiper 라이브러리를 이용하여 제작하였습니다.

2

WEBRESPONSIVE

CODING
VIEW
WEBRESPONSIVE
SITE TO
ACTION

React와 SCSS를 사용하여 작업했습니다.
미디어 쿼리를 사용하여 다양한 디바이스에
대응하여 화면 크기에 따라 반응하도록 만든 반응형 사이트입니다.
슬라이드 효과는 swiper 라이브러리를 이용하여 제작하였습니다.

3

PHP

CODING
VIEW
PHP
SITE TO
ACTION

PHP는 서버 측에서 실행되는 스크립트 언어로,
동적인 웹 페이지를 생성하고 다양한 웹 애플리케이션을 개발하는 데 사용됩니다.
HTML과 통합하여 웹 페이지에 동적인 콘텐츠를 삽입하고 MyAdmin에서
데이터베이스와의 상호작용, 사용자 입력 처리, 파일 조작 등을 수행할 수 있습니다.

4
PHP 
TEAM 
PROJECT
CODING
VIEW
PHP TEAM
PROJECT SITE
TO ACTION

PHP를 사용해서 팀 프로젝트로 주제를 선정하여 사이트를 제작했습니다.
팀원들과 협동해서 문제점을 발견하면 해결하는 능력을 키우면서 제작했습니다.
MyAdmin에서 데이터베이스를 관리하고 수정 및 삭제를 할 수 있습니다.
슬라이드 효과는 javascript를 이용해서 제작했습니다.

5
CLONE 
SITE 
CODING
VIEW
CLONE SITE
SITE TO
ACTION

클론 사이트(Clone site)는 기존에 존재하는
웹 사이트의 디자인, 레이아웃, 기능 등을 복제한 사이트를 말합니다.
웹 개발자나 디자이너들이 특정 사이트의 구조와 동작 원리를 이해하고자 제작했습니다.
기존의 사이트를 분석하고, 해당 기술과 기능을 습득하기 위해 사용했습니다.

javascript
parallaxs
effect

parallaxs

패럴랙스 효과(Parallax Effect)는 웹 디자인에서 사용되는 시각적 효과 중 하나로,
여러 개의 레이어가 서로 다른 속도로 움직이는 것처럼 보이도록 만드는 효과입니다.
이 효과는 웹 페이지의 스크롤이나 마우스 움직임에 반응하여
배경과 전경을 부드럽게 이동시키는 방식으로 구현됩니다.

parallaxs

패럴랙스 효과를 사용하면 사용자는 웹 페이지를
스크롤할 때 요소들이 독특하게 움직이는 느낌을
받을 수 있습니다. 이로 인해 웹 페이지는 더욱 동적이고
흥미로운 시각적 경험을 제공할 수 있습니다.

parallaxs

패럴랙스 효과(Parallax Effect)는 웹 디자인에서 사용되는 시각적 효과 중 하나로,
여러 개의 레이어가 서로 다른 속도로 움직이는 것처럼 보이도록 만드는 효과입니다.
이 효과는 웹 페이지의 스크롤이나 마우스 움직임에 반응하여
배경과 전경을 부드럽게 이동시키는 방식으로 구현됩니다.

code view
mouse
effect

mouse

마우스 효과(Mouse Effect)란
웹 페이지에서 마우스 움직임에 따라 요소들이 반응하는 시각적 효과를 말합니다.
이 효과를 사용하면 마우스 커서가 특정 요소 위로 이동할 때
요소의 모양이 변경되거나 애니메이션이 발생하여 사용자에게 상호작용성을 제공합니다.

mouse

마우스 효과는 다양한 방식으로 구현될 수 있습니다. 가장 일반적인 방법은 JavaScript를
사용하여 마우스 이벤트를 감지하고, 요소의 스타일을 동적으로 변경하는 것입니다.
예를 들어, 마우스가 요소 위로 이동하면 배경색이 변경되거나, 크기가 변하거나, 투명도가
조정되는 등의 효과를 적용할 수 있습니다.

mouse

패럴랙스 효과를 사용하면 사용자는 웹 페이지를
스크롤할 때 요소들이 독특하게 움직이는 느낌을
받을 수 있습니다. 이로 인해 웹 페이지는 더욱 동적이고
흥미로운 시각적 경험을 제공할 수 있습니다.

code view
game
effect

game

게임 효과(Game Effect)는 JavaScript를 사용하여
웹 페이지에 게임과 관련된 시각적, 상호작용적 효과를 구현하는 것을 의미합니다.
이러한 효과를 사용하면 웹 페이지에서 게임 요소를 표현하고
사용자와의 상호작용을 통해 게임적인 경험을 제공할 수 있습니다.

game

게임 효과를 웹 페이지에
추가함으로써 사용자는 보다 게임적인 경험을
즐길 수 있으며, 웹 사이트의 상호작용성과
사용자 참여도를 높일 수 있습니다.

game

게임 효과를 구현하는 데에는
JavaScript 외에도 HTML5의 Canvas나 WebGL 같은 그래픽 라이브러리를 사용할 수도 있습니다.
이러한 기술을 활용하여 2D나 3D 그래픽을 구현하고,
게임에 필요한 물리 엔진이나 충돌 감지 등의 기능을 쉽게 사용할 수 있습니다.

code view
slider
effect

slider

Slidereffect는 JavaScript를 사용하여 웹 페이지에서 요소를 슬라이딩하는 효과를 말합니다.
슬라이딩은 요소를 수평 또는 수직으로 움직이거나 사라지거나 나타나게 함으로써
화면에서 전환되는 효과를 생성합니다. 이를 통해 이미지, 텍스트, 동영상 등의 콘텐츠를
시각적으로 전환하고 다른 콘텐츠로 대체할 수 있습니다.

slider

슬라이드 효과는 이미지 갤러리, 프로모션 배너, 캐러셀 등
다양한 형태의 콘텐츠를 시각적으로 전환하고 보여줄 수 있는 기능을 제공합니다.
사용자는 슬라이드를 통해
다양한 콘텐츠를 탐색하고 시각적인 효과를 즐길 수 있습니다.

slider

슬라이드 효과를 구현하기 위해서는 요소들의
전환, 슬라이드 제어, 자동 재생, 인디케이터 등을 포함한 다양한 기능을 사용할 수 있습니다.
이를 활용하여 사용자는 웹 페이지에서 다양한 콘텐츠를 탐색하거나 프로모션, 갤러리, 카루셀 등과 같은 기능을 구현할 수 있습니다.
슬라이드 효과는 웹 디자인에서 많이 활용되며 사용자에게 보다 흥미로운 시각적 경험을 제공하는 데 도움이 됩니다.

code view
quiz
effect

quiz

퀴즈 효과(Quiz Effect)는 JavaScript를 사용하여 웹 페이지에
퀴즈와 관련된 상호작용적 효과를 구현하는 것을 의미합니다.
이러한 효과를 사용하면 웹 페이지에서 퀴즈를 제시하고
사용자가 답변을 선택하거나 입력할 수 있도록 할 수 있습니다.

quiz

퀴즈 효과를 구현하는 데에는
JavaScript 외에도 HTML과 CSS를 활용할 수 있습니다.
JavaScript를 사용하여 사용자의 답변을 감지하고 처리하고,
HTML과 CSS를 사용하여 질문과 선택지를 표시하고 스타일링할 수 있습니다.

quiz

퀴즈 효과를 웹 페이지에 추가함으로써 사용자는
퀴즈를 즐기며 상호작용적인 경험을 할 수 있습니다.
또한, 퀴즈 결과를 통해 사용자의 성과를 평가하거나
지식을 향상시킬 수 있는 기회를 제공할 수 있습니다.

code view
work
1
STUDY 
INDEX 
CODING
VIEW
STUDY INDEX
SITE TO
ACTION

교육을 받으면서 공부하고 배운 내용을
페이지에 정리하면서 기록을 했습니다.
궁금한 내용이 있을 경우 정리했던 페이지를 참고하면서
문제점을 해결하는 능력을 키우고 추가로 페이지를 만드는 능력을 키웠습니다.

2

JAVASCRIPT

CODING
VIEW
JAVASCRIPT
SITE TO
ACTION

JAVASCRIPT를 공부하기 위해 정리한 페이지입니다.
먼저 JAVASCRIPT를 사용하기 이전에 어떻게 구성되어있는지 확인하고
어떻게 사용을 해서 원하는 결과를 얻을 수 있는지 공부했습니다.
script를 만들다 문제가 있으면 참고하기 좋습니다.

3

REACT.JS

CODING
VIEW
REACT.JS
SITE TO
ACTION

리액트(react.js)란 자바스크립트 라이브러리의 하나로서
사용자 인터페이스를 만들기 위해 사용된다.
하나의 페이지를 다양한 형식의 js로 만들어보았습니다.
이 페이지는 react.js를 사용해서 만든 페이지입니다.

4

VUE.JS

CODING
VIEW
VUE.JS
SITE TO
ACTION

Vue.js는 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크 입니다.
다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다.
하나의 페이지를 다양한 형식의 js로 만들어보았습니다.
이 페이지는 vue.js를 사용해서 만든 페이지입니다.

5

NEXT.JS

CODING
VIEW
NEXT.JS
SITE TO
ACTION

Next.js는 React를 기반으로 한 프레임워크로,
React 기반의 웹 애플리케이션을 개발하기 위해 사용됩니다.
하나의 페이지를 다양한 형식의 js로 만들어보았습니다.
이 페이지는 next.js를 사용해서 만든 페이지입니다.

6
YOUTUBE 
SITE 
CODING
VIEW
YOUTUBE
SITE TO
ACTION

YOUTUBE API는 누구나 손쉽게 API를 활용하여 YOUTUBE 내의
동영상 목록, 조회수 등 다양한 내용을 수집할 수 있도록 가능하게 하는 서비스입니다.
해당 페이지는 react.js를 사용해서 만들었으며
YOUTUBE API를 사용해서 원하는 영상을 가져왔습니다.

thank
you

저는 항상 새로운 도전과 성장에 열려있으며, 코딩 분야에서 더 나은 개발자로 성장하기 위해 노력할 것입니다. 주어진 기회에 감사하며, 회사의 성장과 발전에 이바지할 수 있는 개발자로서의 역량을 발휘하고 싶습니다.

contact
me
PHONE : 010-5702-6539
E-mail : dongjin6539@naver.com