오늘은 개학 이후 진행할 프로젝트와 스터디 관련해서 정할 게 있어서, 포트폴리오는 첫 화면의 스타일링, 그리고 참고자료에서 수용할 만한 스타일링등을 적용하는 작업을 했다.
기능 말고 css만 했다 이말이다.
오늘 한 일
- 메인 화면 텍스트 조정
- 메인 화면 폰트 조정
- 메인 화면 효과 적용
- 아이콘 추가
- 포트폴리오 셀 파트 효과 적용
메인 화면 조정
메인 화면은 전에도 말했지만, 누군가 내 포트폴리오를 켜면 보이는 첫 화면이기 때문에 강렬한 인상이 필수적이다.
다른 완성된 두 포트폴리오를 참고해서 큰 텍스트와 주요 링크 아이콘들을 삽입했다.
텍스트도 나를 잘 표현할 수 있는 걸로 일단은 적어놨는데, 좀 긴거같아서 추후 조정 예정이다.
자세히 보면 위쪽 두 줄과 아래 세 줄의 폰트가 다른데, 굵은 글씨
(폰트 자체 weight가 높은)를 도입하면서, 다른 폰트를 찾아보다 최근 합류하게 된 구름톤 유니브에서 제공하는 구름 산스를 넣으면 이쁠 것 같아서 기존의 SCDream과 병행사용했다.
아이콘은 footer에 있는걸 그대로 가져오되, border의 굵기를 폰트와 비슷한 느낌이 들도록 늘렸다.
fade-in 효과 적용
다른 포트폴리오들의 또 다른 공통점은 정보 제공시에 밋밋하게 보여주는 것이 아니라, 효과를 적용함으로써 일반적인 정보도 UX를 고려한 느낌이 든다는 것이다.
나도 이러한 장점을 적극 수용하여 스크롤에 따라 fade-in 효과를 넣어 밋밋했던 기존 화면을 조금이라도 다채롭게 바꿨다.
메인 화면이다. 내 얼굴이 들어간 사진을 배경에 넣을 생각이다.
기존에도 나쁘지 않았던 포트폴리오 셀이지만, 효과를 넣으니 훨씬 낫다.
이 효과들은 Intersection Observer API를 활용해 만들었다.
이 API를 사용하면 특정 요소가 뷰포트에 들어올 때 콜백 함수를 실행할 수 있게 한다. 이를 통해 요소들이 스크롤에 따라 자연스럽게 페이드 인되게 할 수 있다.
Intersection Observer API
특정 요소가 뷰포트에 들어올 때 콜백 함수를 실행
import React, { useRef, useEffect } from 'react';
import Head from '../components/Head';
import { styled } from '@linaria/react';
import MainSwiper from '../components/portfolio_c/MainSwiper';
import PortfolioCell from '../components/portfolio_c/PortfolioCell';
import Foot from '../components/Foot';
import First from './First';
const Portfolio: React.FC = () => {
const cellWrapperRef = useRef<HTMLDivElement>(null);
//IntersectionObserver
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
} else {
entry.target.classList.remove('fade-in');
}
});
});
if (cellWrapperRef.current) {
observer.observe(cellWrapperRef.current);
}
return () => {
if (cellWrapperRef.current) {
observer.unobserve(cellWrapperRef.current);
}
};
}, []);
return (
<>
<First/>
<PortfolioWrapper>
<Head />
<MainSwiper />
<CellWrapper ref={cellWrapperRef}>
<PortfolioCell />
</CellWrapper>
<Foot />
</PortfolioWrapper>
</>
);
};
export default Portfolio;
const PortfolioWrapper = styled.div`
margin-top:110vh;
`;
const CellWrapper = styled.div`
opacity: 0;
transition: opacity 1s;
&.fade-in {
opacity: 1;
}
`;
// Fade-in animation style
const fadeInStyle = `
.fade-section {
opacity: 0;
transition: opacity 1s;
}
.fade-in {
opacity: 1;
}
`;
// Append fade-in styles to the document head
document.head.insertAdjacentHTML('beforeend', `<style>${fadeInStyle}</style>`);
그럼 오늘의 기록 끝!
