또 다른 웹사이트 개편.-CSS 튜토리얼-php.cn

어제 마음속으로 이 글을 썼습니다.

알겠습니다. 그래서...웹사이트를 완전히 다시 만들었을 수도 있습니다...다시

sid ・ 2021년 12월 23일

#웹개발 #쇼데브 #html #css

그래도 거의 4년이 흘렀고 돌이켜보면 웹 디자인에 대한 나의 초기 시도는 그저 별로 좋지 못했다고 자신있게 말할 수 있습니다. 내 오래된 웹사이트는 마치 13세 어린이가 디자인한 것처럼 보였습니다. 왜냐하면 그렇게 그리고 그 13세 어린이가 바로 나였기 때문입니다.

그 이후:

저는 3년의 학교 생활을 더 마쳤습니다. 이제 거의 전문직 학생이 되었습니다.
저는 좋은 UI 디자인의 핵심 기본 사항을 연구하는 데 셀 수 없이 많은 시간을 보냈습니다. 인정할 수 없을 만큼 많은 디자인 기사를 읽었습니다.
더 나은 코드를 작성하는 방법을 배웠습니다. 더 이상 충돌이 발생하지 않습니다... 대부분의 경우.
Adam Wathan이 쓴 UI 리팩토링이라는 책을 읽었는데, 이 책을 읽고 UI 디자인에 대한 제 생각이 완전히 바뀌었습니다.

하지만 그 동안 저는 웹사이트 업데이트라는 작은 세부사항 하나를 소홀히 했습니다. 예, 짐작하셨겠지만요. 이제 16살이 된 이 댓글은 다음과 같습니다.

에드바르 부스크-닐슨 • 2021년 3월 6일

웹사이트의 UI가 정말 마음에 듭니다. 색상 선택도 짱! 하지만 제 생각에는 개인 웹사이트의 경우 자신의 기술과 경험에 중점을 두어야 합니다. 적어도 당신의 목표가 채용 담당자에게 자신을 판매하는 것이라면. 죄송하지만 대부분의 채용 담당자는 블로그 게시물에 관심을 두지 않습니다. 그들은 당신이 무엇을 할 수 있는지, 얼마나 오랫동안 그 일을 해왔는지에 관심을 갖습니다. 프로젝트 포트폴리오도 중요합니다. 블로그 게시물은 귀하의 성격과 관심을 확실히 보여주지만 채용 담당자는 이를 읽을 시간이 없을 것입니다. 당신은 금요일 저녁에 그들이 겪는 마지막 지원일 수도 있습니다. 당신이 하고 싶지 않은 일은 그들의 시간을 낭비하는 것입니다.

하지만 그 훌륭한 작품 외에는! 물론 이건 제 생각일 뿐입니다.

정말 집에 들이닥치기 시작했습니다.

다양한 프로젝트를 진행하는 데 너무 많은 시간을 보냈지만 이를 실제로 전시할 곳이 없었고 따라서 채용 담당자에게 깊은 인상을 줄 수 있는 플랫폼도 없었습니다. 게다가 내 프로젝트 대부분의 UI를 살펴보면 여전히 다소 평범했습니다. 저는 그들을 놀라게할 무언가가 필요했습니다. 그래서 며칠 전 전력을 다해 개인 웹사이트(원하는 경우 포트폴리오)를 다시 디자인하고 다시 만들기로 결정했습니다.

기술

이전 개인 웹사이트는 모두 HTML, CSS, JavaScript로 구축되었습니다. 간단하고 기능적이지만 마치 전자레인지로 맛있는 음식을 만들어 보는 것과 같습니다. 게다가 내 React 실력을 꼭 뽐내고 싶었다(솔직히 그게 진짜 이유였다).

그래서 저는 Next.js를 선택했습니다. 왜? 글쎄요, 당시에는 좋은 선택인 것 같았고 결과적으로도 그랬습니다. 게다가 저는 이미 그것에 대한 많은 경험을 갖고 있었습니다.
Yet another website redesign.

CSS로는 Tailwind CSS를 선택했습니다(2024년에 안 쓴다면 진짜인가요? ?).

디자인

이전 웹사이트를 쳐다보는 데 너무 많은 시간을 보낸 후, 조명 모드가 적합하지 않다고 판단했습니다. 나는 실질적인 영향을 미칠 수 있는 급격한 변화를 원했습니다. 스위치를 켜고 완전히 어두운 모드로 전환하는 것보다 더 좋은 방법이 있을까요? 귀하의 웹사이트가 악당 아크를 시작하는 것과 같습니다.

글꼴은 인터를 선택했어요. 특히 내 사이트가 다음과 같이 보이는 Windows 장치에서 다른 글꼴을 사용하려는 시도가 여러 번 실패한 후:
Yet another website redesign.

...macOS에서는 이에 비해 Tailwind CSS에서 제공하는 기본 시스템 글꼴을 사용하지 않기로 했습니다.

Yet another website redesign.

분명히 Mac의 글꼴은 뛰어났습니다. 하지만 기본 샌프란시스코 글꼴이 Apple 전용이기 때문에 대안이 필요했습니다. Inter를 입력하세요. 제가 본 글꼴 중 가장 멋진 글꼴 중 하나이며 San Francisco를 완벽하게 대체할 수 있습니다.

Yet another website redesign.

보셨나요? 저 폰트가 참 예쁘죠?

메인 컬러는 보라색으로 했어요. 딱히 이유는 없고, 그냥 예전에 사용했던 인디고를 섞어보기로 했어요.

레이아웃

히어로 섹션부터 시작했어요. 쉽고 간단하고...아 잠깐만요... 제가 타자기 효과가 있다고 말했었나요?.
Yet another website redesign.

이후 빠르게 다음 섹션을 고민하게 되었습니다.

Edvard의 의견 재검토:

에드바르 부스크-닐슨 • 2021년 3월 6일

하지만 그 훌륭한 작품 외에는! 물론 이건 제 생각일 뿐입니다.

하지만 제 생각에는 개인 웹사이트의 경우 특히 채용 담당자에게 깊은 인상을 남기는 것이 목표라면 자신의 기술과 경험에 집중해야 합니다.

블로그 섹션을 완전히 없애기로 결정했습니다. 다양한 프레임워크와 도구에 대한 저의 1000가지 단어를 여러분이 좋아할지라도 채용 담당자는 아마도 그렇지 않을 것입니다. 게다가 학교 마지막 2년이 되면서 강의량이 늘어나서 블로그를 유지할 시간이 없었습니다.

또한 내 기술 섹션을 모든 채용 담당자가 볼 수 있도록 상단, 전면 및 중앙으로 이동했습니다. 아, 그리고 멋진 효과를 추가해 보는 건 어떨까요? 아래에 표시된 효과를 위해 저는 framer-motion을 사용했는데, 그들은 이를 "React를 위한 프로덕션 준비 모션 라이브러리"라고 설명합니다. 더 이상 동의할 수 없습니다.
Yet another website redesign.

보셨나요? 저 애니메이션이 얼마나 멋진지 보세요.

다음으로 프로젝트 섹션을 다루었습니다. 홈페이지에 상위 4개 프로젝트를 소개하고 나머지 프로젝트에 대한 링크를 포함했습니다. 이 섹션에서는 프로젝트를 클릭하면 페이지 하단에서 튀어 올라 자세한 내용을 제공하는 모달이라는 멋진 아이디어를 생각해 냈습니다. 물론, 이 작업을 위한 도구는 프레이머 모션이었습니다.

한 시간 후에는 다음과 같은 결과가 나왔습니다.
Yet another website redesign.

친구들이 평가하기 전까지는 완벽하다고 생각했어요:

너무 탄력이 있으니 톤을 좀 줄여주세요.

좋아요. 하지만 바운스를 정말 줄여야 해요.

탄력이 이상해 보입니다.

처음에는 바꾸는 걸 거부했어요. 하지만 몇 시간 동안 조정한 후에 바운스가 약간 과도하다는 것을 깨달았습니다. 그래서 전화를 걸었습니다.

Yet another website redesign.

최종 버전. 꽤 괜찮아보이죠?

마지막으로 모든 채용 담당자가 볼 수 있도록 내 LinkedIn 및 이메일 링크는 물론 내 GitHub 프로필 링크가 포함된 연락처 섹션을 추가했습니다.
Yet another website redesign.

앞서 말씀드린 대로 프로젝트 페이지도 구축했습니다. 이는 홈페이지의 프로젝트 섹션과 매우 유사했으며, 제가 수년에 걸쳐 개발한 모든 프로젝트를 보여주기 위해 동일한 모달을 사용했습니다. (참고: 이 섹션은 아직 진행 중인 작업이므로 조금이라도 놀라지 마세요. 드물다).

그래서 저는 마침내 힘들게 얻은 모든 지식으로 제 웹사이트를 업데이트하게 되었습니다. 이 제품이 16세 어린이가 디자인한 것처럼 보이지 않기를 바랍니다. 아 잠깐... ?

여기에서 내 웹사이트를 확인하고 여기에서 코드를 확인할 수 있습니다. 이 게시물이 마음에 드셨다면 저장소에 별표를 주시고 팔로우를 고려해 주세요.

시드크래프트코드 / 포트폴리오

Next.js로 구축된 개인 포트폴리오 웹사이트

create-next-app으로 부트스트랩된 Next.js 프로젝트입니다.

시작하기

먼저 개발 서버를 실행합니다.

npm run dev
<span class="pl-c"># or</span>
yarn dev
<span class="pl-c"># or</span>
pnpm dev
<span class="pl-c"># or</span>
bun dev로그인 후 복사

    전체 화면 모드로 전환
    


    전체 화면 모드 종료
    

브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.

pages/index.js를 수정하여 페이지 편집을 시작할 수 있습니다. 파일을 편집하면 페이지가 자동으로 업데이트됩니다.

API 경로는 http://localhost:3000/api/hello에서 액세스할 수 있습니다. 이 엔드포인트는 페이지/api/hello.js에서 편집할 수 있습니다.

pages/api 디렉토리는 /api/*에 매핑됩니다. 이 디렉터리의 파일은 React 페이지가 아닌 API 경로로 처리됩니다.

이 프로젝트는 next/font를 사용하여 맞춤 Google 글꼴인 Inter를 자동으로 최적화하고 로드합니다.