NA를 소개합니다😗

저에 대한 정보가 담겨있는 포트폴리오 페이지를 소개합니다.
밑 링크로 가시면 구경해보실 수 있어요!

https://plush777.github.io/

🎈 계기

1년 조금 안되는 기간동안 퍼블리셔 생활을 하고있는데, 생각해보니 그 많은 시간동안 "나"를 표현하는 페이지 하나 없다는게 너무 부끄러워서 이번에 만들어보자! 라는 생각으로 드디어,,, 포트폴리오 페이지를 만들어 보았습니다!

✨ 계획?

어떤식으로 화면을 구성할 것인지에 대한 내용은 노션에 이정도,,만 적어두었습니다. 사실 기획을하고 디자인 후 개발을 해야되는게 맞는데, 빨리 만들어보고 싶은 급한 마음에... 다른 사이트나 포트폴리오 디자인적인 부분만 참고를 하고 만들었습니다.

🔧 사용한 기술들

• HTML5
• SCSS
• Jquery
• CSS 이미지 스프라이트 (이것도 기술에 포함되는건가..?)
• 로고 디자인 : 어도비 XD

🔨 사용한 라이브러리

• gulp.js (빌드 자동화)
• fullpage.js (스크롤 인터렉션)
• swiper.js (반응형 슬라이드)

🎇 페이지 설명

section 구성

각 섹션의 구성은 fullpage.js 라이브러리를 사용해서 한장씩 넘기는듯한 애니메이션을 사용하였고, 그나마 눈에 피로가 가지않는 색상 (#292a2d , #ddd) 을 사용했습니다. 또한, 키프레임을 적극 활용하여 심심하지 않게 opacity 애니메이션도 적용해봤습니다!

section1 : 인사말 및 소개

처음 이 페이지를 방문했을 때, 인사말이 FadeIn이 되고 부족한 정보들은 ReadMe 버튼을 만들어서 토글할 수 있게 해두었습니다.

section2 : 사용할 수 있는 기술

깔끔하게 보이기 위해서 한줄로 나열한 레이아웃을 사용했습니다. 모바일 기기에서는 퍼블리싱 부분이 두줄로 나뉘어서 보여지게 됩니다.

section3 : 진행한 프로젝트

아직은 휑하지만,, 추후에 많이 추가될 예정인 부분입니다. 모바일 기기에서는 슬라이드 레이아웃으로 변경됩니다.

section4 : 연락처

간단히 이메일과 깃허브 & 벨로그 주소가 있는 섹션입니다. setTimeout 함수를 사용하여 4번째 페이지에 들어왔을 때 4.5초 뒤에 키프레임 애니메이션이 실행되게 적용을 하였습니다.

🎨 가장 신경쓴 부분이 있다면?

이번 페이지를 만들 때는 키프레임 애니메이션에 중점을 두고 하였습니다.
별거 아닌것 같지만 생각보다 헤멘 부분도 좀 있었고,, 키프레임 구문 연습도 되고 나름 재밌게도 한 것 같네요! 😀

CSS 이미지 스프라이트

가뜩이나 사용한 라이브러리도 많은데, 이미지까지 하나씩 로드해서 보여주면 사이트가 버벅거릴 수도 있을것 같아서 이미지 스프라이트 기법을 사용하였습니다.

밑 링크는 참고한 글 / 스프라이트 이미지 사이트입니다!

스프라이트 이미지 사용법
https://gaenarinari.tistory.com/entry/%EC%8A%A4%ED%94%84%EB%9D%BC%EC%9D%B4%ED%8A%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%82%AC%EC%9A%A9

스프라이트 이미지 작업에 좋은 사이트
https://spritegen.website-performance.org/
http://www.spritecow.com/
https://www.iloveimg.com/ko

⏳ 수정해야 할 부분들

• 완벽하지 않은 반응형

모바일 크롬에서는 간격도 잘 적용되고 하는데, 네이버로 보니까 간격 적용이 안되네요,,,
간격을 margin이 아니라 column-gap 속성으로 줬는데 아직 크롬 외의 브라우저에서는 호환이 안되나 봅니다..!

• 가관인 JS 코드의 상태...

$(document).ready(function() {
  
  	/* 문제의 부분 */
	$('.fullpage').fullpage({
        sectionsColor: ['#292a2d', '#ddd', '#292a2d', '#ddd'],
        anchors: ['section1', 'section2', 'section3', 'section4'],
        autoScrolling: true,
        scrollHorizontally: true,
        navigation: true,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',
        controlArrows: false,
        loopTop:true,
        loopBottom:true,
        onLeave: function (section, index) {
            if (index == 1){
                $('#fp-nav ul li a span,.fp-slidesNav ul li a span').css({background:"#fff"});
                $('.secTitle').removeClass('s02_active s03_active s04_active');
                $('.subTitle').removeClass('fadeEffect');
            } else if(index == 2){
                $('#fp-nav ul li a span,.fp-slidesNav ul li a span').css({background:"#333"});
                $('.subTitle').removeClass('fadeEffect');
                $('.readMe').removeClass('active');
                $('.mobileReadMe').removeClass('active');
                $('.secTitle').addClass('s02_active');
                setTimeout(function(){
                    $('.secTitle.s02 .moveBorder').fadeOut();
                },4500);
            } else if(index == 3){
                $('#fp-nav ul li a span,.fp-slidesNav ul li a span').css({background:"#fff"});
                $('.subTitle').removeClass('fadeEffect');
                $('.secTitle').removeClass('s02_active');
                $('.secTitle').addClass('s03_active');
                setTimeout(function(){
                    $('.secTitle.s03 .moveBorder').fadeOut();
                },4500);
            } else if(index == 4){
                $('#fp-nav ul li a span,.fp-slidesNav ul li a span').css({background:"#333"});
                $('.subTitle').addClass('fadeEffect');
                $('.readMe').removeClass('active');
                $('.mobileReadMe').removeClass('active');
                $('.secTitle').removeClass('s02_active s03_active');
                $('.secTitle').addClass('s04_active');
                setTimeout(function(){
                    $('.contactPage').addClass('animation_On')
                    $('.secTitle.s04 .moveBorder').fadeOut();
                },4500);
            }
        }
	});

    /* swiper */
    const swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        autoplay: false,
        speed:500,
        delay:1000,
        slidesPerView: 'auto',
        
        pagination: {
            el: ".swiper-pagination",
            type: "fraction",
        },

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
    });

    /* readMe 토글 */
    $('.btnReadMeToggle').on({
        "click":function(){
            $(this).closest('.readMe').toggleClass('active');
        }
    });

    /* 모바일 readMe 토글 */
    $('.btnMobileReadMe').on({
        "click":function(){
            $(this).closest('.mobileReadMe').toggleClass('active');
        }
    });

    if(window.matchMedia("(max-width: 1870px)").matches == true) {
        $('#container .section .listWrap.projectPage').removeClass('hover');
        $('#container .section .listWrap.contactPage').removeClass('hover');
    }
});

if문 안에 remove & addClass랑 setTimeout 함수가 많이 보이는데, 각 섹션에 들어왔을 때 키프레임 애니메이션을 실행하고, 실행이 다 되면 요소가 사라지는 기능을 구현하고 싶어서,, 막무가내로 했더니 코드가 생각 외로 길어졌네요,,,

반응형 수정하면서 이부분도 갈아엎어야겠다는 생각이,,😥

• 코드 리펙토링

• 열심히 해서 프로젝트 항목 6개 다 채우기!