내가 포트폴리오를 구상하게 된 계기

---

아이디어

이전에는 이메일 서명에 about.me가 포함되어 있었습니다. 수시로 업데이트를 하는데 추가하고 싶은 링크가 부족하네요. 그 당시에는 linktree와 carrd가 별거 아니었고, 설사 그렇다 하더라도 나는 어떻게든 내가 작업한 프로젝트를 추가하고 싶습니다. 최소한 링크와 몇 가지 "내 소개" 텍스트와 같은 기본 포트폴리오 기능은 JS 없이도 작동해야 합니다.

---

테마

COVID 코딩 세션 동안 Silent Hill의 편안한 분위기가 저와 함께합니다. B.G.M., 폰트, 색 구성표만 있으면 충분하다고 생각합니다. 색 구성표를 만들고 싶지만 색 이론은 내 영역이 아닙니다. 쿨러를 빠르게 방문하여 성공했습니다. 음악으로는 아직 야마오카 아키라를 고용할 수는 없지만 deadeyejam의 잼 for the dead를 잼 for the dead jamming for the dead로 가지고 있습니다(감사합니다!).

곧 그래픽을 추가할 수도 있지만 지금은 이것과 도구를 배우는 것이 좋습니다.

---

도구

HTML

검색 엔진이 HTML 문서를 읽는 방법을 아는 기본 사항은 엔진이 페이지에 관련 정보가 있는지 판단하는 데 도움이 됩니다. 대신 s, headers(

,

, ...),

, <메인 />...

이번 프로젝트에서는 <대화 />를 시도하게 되었습니다. 작동하려면 JavaScript가 필요합니다. 제 생각에는

태그를 추가로 먹는 것보다 "대화상자" 태그를 갖는 것이 더 좋습니다. 디저트로. 검색엔진이 느낄 수 있다면 이런 느낌일지도 모르겠네요.

<세부정보 /> JS 없이 세부정보를 요약할 수 있습니다. 추가 스타일링을 하면 저에게 딱 맞습니다.

CSS / SASS

첫 번째 Webkit 버전의 포트폴리오는 SASS부터 CSS까지 처리하여 JS 요구 사항을 충족합니다. React로 전환하면 SASS 파일 중 일부를 선택하여 정적 스타일시트로 만드는 선택적 프로세스가 추가됩니다.

정적 스타일시트가 선택사항이 되지 않도록 React의 %PUBLIC_URL%을 외부 스타일시트에 적용하는 방법을 확인해볼까 생각했습니다. 지금은 선택적 정적 스타일시트 처리가 수행됩니다.

반응하다

포트폴리오를 구성요소별로 나누는 것은 링크, 포트폴리오 아이템, 스킬 등 대부분 정보 목록이 되기 때문에 바람직합니다.

React의 구성 요소가 자체 모듈 스타일시트를 가질 수 있다는 점도 알아두면 좋습니다. 하지만 정적 스타일시트에 일부 구성 요소 스타일을 포함하려면 스타일 모듈을 기본 SASS 파일로 가져와야 합니다.

Github 페이지

3개의 랜딩 페이지와 페이지 자산을 위한 간단한 호스트입니다.

수파베이스

포트폴리오에는 어떻게든 정보 소스가 있어야 합니다. Supabase를 사용하면 이미 클라우드에 데이터베이스, 파일 저장소 및 API에 대한 웹 관리자가 있습니다! Edge Functions에 대한 로컬 개발 환경을 원하는 데는 약간의 학습 곡선이 있습니다. 다음에 대한 CLI 경로를 설정할 준비를 하십시오.

• Docker 설정(아직 설정하지 않은 경우)
• Supabase 프로젝트 초기화
• Supabase 프로젝트에 온라인으로 연결
• Supa 데이터베이스에 대한 로컬 설정 가져오기 및 생성
• VSCode에서 Deno 구성
• 로컬 데이터베이스 시작
• Edge 함수 작성

... 그리고 마침내 온라인으로 기능을 배포합니다.

---

결과

https://github.com/rhizene/status

---

다음은 무엇입니까?

• 정적인 스타일시트와 콘텐츠를 관리하고 SEO를 개선하기 위해 Next를 살펴보는 것을 고려하고 있습니다.
• 테마 그래픽, 브랜드 로고 등
• 더 나은 소개 및 탐색 아이디어.

위 내용은 내가 포트폴리오를 구상하게 된 계기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!