제가 어떻게 제 꿈의 투자조합 사이트를 만들었는지.

15500 단어 reactshowdevwebdevprogramming

TL;박사 01 명
2021년에 제 개인 사이트에 커다란 업데이트를 가져왔습니다!이 새로운version 6에 아주 멋진 기능이 생겨나면서 나는 여러 해 동안 노력해 왔다.(개선 방법에 대한 피드백을 환영합니다.)

View Deployed Site ↗️

카탈로그
  • Introduction
  • v0.1 (Template)
  • v1 - v4 Bootstrap Goodness
  • v5 Marks A Big Change

  • v6 Brings It All Together
  • Career Timeline (Draggable)
  • Articles with Animated Thumbnails
  • Dev.to API Intergration
  • Optimized File Structure
  • Rebuilt Navigation
  • Simplified Animations

    • 소개하다.
    다음은 개발자로서의 성장에 매우 중요한 인코딩 여행입니다.
    보시다시피 제 사이트의 앞부분 버전은 제가 원하는 것이 아닙니다.그러나 나의 인코딩 기술이 형성되기 시작하면서 나의 사이트도 형성되기 시작했다.
    내가 이 경험을 공유하는 것은 하나의 생각을 표현하기 위해서이다.흥분되는 새로운 프로젝트처럼 낡은 프로젝트로 돌아가는 것은 커다란 학습 경험이 될 수 있다.때로는 여러 차례의 재구축을 거친 후에 예상한 결과가 발생할 수도 있다...
    Back To Top
    v0.1(템플릿)
    오랫동안 저는 Adobe Portfolio 사이트를 가지고 있어서 제 디자인 프로젝트를 잘 보여줄 수 있습니다.그것은 내 Behance profile 에 연결되어 있기 때문에 새로운 내용을 추가하기가 매우 쉽다.(실제로 나는 여전히 이 사이트를 이용하여 나의 디자인의 특정한 내용을 제공한다.)

    나는 그것을 통해 디자인 업무를 얻었고, 심지어는 디지털 마케팅 경쟁에서 3등을 했다.그러나 나는 템플릿 레이아웃에만 한정되어 진정으로 자신의 사이트를 만들고 싶었다.
    그래서 2020년부터 전 창고 개발 훈련 캠프를 시작했을 때 저는 매우 흥분했습니다. 왜냐하면 우리의 숙제는 새로운 투자조합 사이트를 작성하는 것을 포함했기 때문입니다.
    Back To Top
    v1 - v4 부팅
    저는 처음에 v1 일반적인 정적 안내 사이트였는데 수업 시간에 프로젝트와 작은 UI 조정을 계속 추가했습니다.이것은 매우 통용되는 것이지만, 나는 내가 인코딩한 일이 있어서 매우 기쁘다.🙌 (점수를 제때에 제출한다.)
    나는 내 프로젝트의 줄임말 그림에 있는 이 작은 정지 효과에 대해 매우 자부심을 느낀 것을 기억한다.나는 몇 시간이 걸려서야 비로소 알아냈다.😆

    Back To Top
    v5는 거대한 변화를 상징한다
    내 훈련 캠프가 곧 끝날 때, 나는 자신의 React 서류 가방을 구축하기 위해 충분한 코드를 배웠다.이것은 버전v5으로 내 브랜드에 대한 철저한 재설계와 재상상이 뒤따랐다.🎉 (더 좋은 줄임말이 있다.😉)
    나는 약 일주일 동안 전체 사이트를 설계하고 인코딩했는데, 지금까지 나는 많은 기본 요소를 보존했다.
  • 짙은 색 배색 방안으로 작품의 범례를 돋보이게 한다
  • 빈 세그먼트를 사용한 최소 레이아웃
  • 기술 섹션, 내가 사용한 기술 및 예제 항목 나열
  • Adobe Portfolio 디자인 프로젝트 사이트
    • 약식 버전에 대한 링크

    변동분 요소 업데이트
    다음 몇 달 동안, 나의 사이트에는 많은 소형이나 실험적인 업데이트가 나타났다.
  • GSAP3
    • 스크롤 기반 애니메이션 사용
  • 소셜 링크와 네비게이션의 측면 부분을 고정시킨다.
  • 내 취향의 카드를 표시하고 사용자 정의 정지 효과가 있음
    • Back To Top
    v6 통합
    새로운 기능을 시도하는 것은 매우 재미있지만, 나의 사이트는 오히려 약간 프랑켄슈타인처럼 변했다.
    나는 정말 블로그를 만들어서 백엔드를 완전히 만들지 않은 상황에서 나의 사이트에 댓글을 표시하고 싶다.
    갱신이 필요한 핵심 분야...
  • 디자인 방향을 보완하고 더욱 충실하게 한다
  • 애니메이션처럼 작동하지 않는 것들을 삭제/간소화
  • 블로그와 직업 부분
    • 과 같은 부족한 핵심 기능 추가
  • 향후 성장을 지원하기 위해 사이트 탐색 및 구성 요소 폴더를 재구성합니다.
    • 그래서 더 이상 말할 필요가 없다. 다음은 이미 바뀐 영역이다!✨
    Back To Top

    1. 직업 시간표(드래그 가능)
    나는 사람들이 나의 링크드 인이나 이력서에 가지 않도록 시각적이고 재미있는 방식으로 나의 업무 경력을 보여주고 싶다.이러한 색깔은 과학 기술 분야와 서로 어울려 후자는 {development:blue}, {디자인:red}와 {learning/education:green}을 설립했다.
    이 부분은 장치의 마우스 또는 손가락을 이동하여 드래그할 수 있습니다.CSS 격자와 Flexbox로 인코딩을 하니 정말 대단합니다!

    Back To Top

    2. 애니메이션 축소판이 있는 글

    나는 Dev.to에서 나의 블로그를 시작하고, 그것으로 나의 사이트 글의 백엔드를 지원할 것을 선택했다.(자세한 내용은 다음 섹션에서 설명합니다.)
    나의 브랜드 이미지에 있어서 중요한 것은 가능한 한 상품 카드를 적게 보는 것이다.나는 단순화된 원소를 좋아한다. 모든 원소는 하나의 목적이 있고 작은 원소나 단일한'pop'원소를 추가한다.
    내가 생각해낸 해결 방안은 글의 이미지 축소판을 hover에 표시하는 것이다.동시에 행동 호소(CTA) 링크가 엇갈렸다.
    Back To Top

    3. API 통합 개발
    앞에서 말한 바와 같이, 나는 Dev.to API를 사용하여 나의 사이트의 글에 지원을 제공한다.
    게시물을 필터링하고 검색할 계획이 많지만 Dev.to API는 아직 테스트 단계이며 기능이 완전하지 않습니다.
    그래서 이 단계에서 사용자가 발표한 글을 한 번에 9편씩 가져오고 요청할 페이지를 동적으로 표시하는 API 호출이 있습니다.
    나는 문장 그룹을 순환해서 볼 수 있는 간단한'prev/next'페이지 시스템이 하나 더 있다.
    axios.get(`https://dev.to/api/articles?username=gedalyakrycer&per_page=9&page=${currentPage}`)
  .then(res => {
    setArticles(res.data);
  })
  .catch(error => {
      console.log(error);
  })
    위의 API 호출은 useEffect에 있으며 현재 페이지가 더 많은지 확인합니다1.그렇다면 우리는 과거로 돌아갈 수 있다는 뜻이다.이것은 "prev"페이지 나누기 단추를 활성화합니다.
    if (currentPage > 1) {
  setNewContentAvailable(true);
} else {
  setNewContentAvailable(false);
}
    다른 개별 예제useEffect에서 API 데이터가 저장된 상태가 비어 있는지 확인합니다.
    만약 그렇다면, "다음"단추를 사용하지 않고 사용자에게 메시지를 표시합니다.
    useEffect(() => {
  if (articles.length === 0) {
    setOldContentAvailable(false);
  } else {
    setOldContentAvailable(true);
  }
}, [articles])
    모든 코드가 함께 작동하는 것을 보고 싶다면, check out my github.
    Back To Top

    4. 파일 구조 최적화
    내 사이트의 마지막 버전은 홈페이지와 대략 두 페이지뿐이다.
    코드에 있어서, 나는 어느 정도에 모든 내용을 거대한 구성 요소 폴더에 조직했다.
    장소가 발전함에 따라 이것은 지속가능한 해결 방안이 아니다.
    그래서 최근 라운드에서 나는 모든 내용을 세 개의 주요 폴더로 재구성했다.
  • /pages 폴더에는 지정된 페이지의 모든 컨텐트를 결합하는 최상위 수준의 구성 요소가 포함되어 있습니다.나는 이 구성 요소들을 사용해서 나의 공유기를 가리킨다.
  • /components 폴더는 이제 각 페이지에 특정한 하위 폴더로 구성됩니다.
  • 또한 각 사이트 섹션에는 로직과 대부분의 상태를 처리하는 데 사용되는 주요 컨테이너 구성 요소가 있습니다.그들은 도구를 표현적인 부분으로 바꾸었다.
  • 에는 여러 페이지에 나타날 수 있는 모든 구성 요소를 저장하는 하위 폴더/ui가 있습니다.(예를 들어 표지).
  • /utils 폴더는 도움말 함수, json과 상하문 파일을 포함한다
    • 이런 폴더 구조는 항목과 조직 논리를 더욱 쉽게 찾을 수 있게 한다.
    Check out the full folder structure here .
    Back To Top

    5. 탐색 재구성
    새로운 다중 페이지 사이트 구조가 생겨서 나는 처음부터 내비게이션을 재구성할 기회를 잡았다.
    나는react의 안내 없이 그것을 완성하고 처음부터 그것을 구축하는 과정을 즐기고 싶다.(다음 업데이트에서 제 사이트에서react 가이드를 완전히 삭제하고 싶습니다.)

    휴대전화에서는 소셜미디어 아이콘을 수직 포석에서 수평 포석으로 전송하기도 했다.나는 이것이 사용자에게 더욱 우호적이라고 생각한다.

    Back To Top

    6. 애니메이션 단순화
    내 사이트의 앞의 몇 가지 버전에서 나는 거의 GSAP3로 모든 요소에 애니메이션을 만들었다.그것은 정말 멋있어 보이지만, 솔직히 말하면 예측할 수 없는 것이고, 항상 효과가 있는 것은 아니다.
    기껏해야 애니메이션이 시작되지 않을 뿐만 아니라, 더 나쁜 것은 한 부분이 사라질 것이다.GSAP3 라이브러리의 문제가 아니라 지식과 실현의 차이다.
    나는 웹 사이트를 지속적으로 작업할 수 있는 애니메이션으로 간소화하기로 결정했다.나는 100% 시간 동안 일을 완성할 수 있는 것을 사용하고, 그리고 50% 시간 동안 사람을 놀라게 할 수 있는 것을 사용하고 싶다.
    나의 성장과 학습이 깊어짐에 따라 나는 정확한 방식으로 이러한 추가 요소를 천천히 보충할 것이다.
    Back To Top

    요약
    저의 투자조합 사이트의 여정과 최신 업데이트를 읽어 주셔서 감사합니다.나는 결과에 매우 만족하며, 동시에 더욱 많은 변화를 기대하고 있다.😂
    약간의 미래의 보충...
  • 게이츠비 유적지로 변신
  • 모든 디자인 프로젝트를 Adobe Portfolio에서 내 사이트로 이전
  • 애니메이션 습득
  • dev.to
    • 에 링크하지 않고 제 사이트에서 글을 엽니다.
  • 내 코드로 연락처 리스트를 다시 작성한다(이것은 내가 엄격히 따르는 몇 가지 부분 중 하나이다)
    • 당신의 투자조합을 반드시 아래와 같이 공유해야 합니다.나는 그들을 매우 보고 싶다!
    Back To Top
    Figma 디자인의 축소판을 사용합니다.
    GRPC 학습 의 길 (3) - protobuf 의 역할
    (동적 기획) 로봇이 미로를 걷는 문제

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage