Svelte로 새 포트폴리오 만들기!

안녕하세요!
첫 번째 Svelte 프로젝트의 경우 이전 포트폴리오가 그다지 마음에 들지 않았기 때문에 Svelte로 새 포트폴리오를 만들기로 결정했습니다.

우선 여기에서 실시간으로 확인할 수 있습니다.
My New Portfolio

따라서 프로젝트 체크리스트에는 다음이 있습니다.

PDF 이력서 다운로드 및 다른 페이지에 대한 링크가 포함된 홈페이지

내 프로젝트의 스와이퍼가 있는 프로젝트 페이지

내 교육 정보 등이 포함된 약력 페이지

404페이지

하드 코딩되지 않은 콘텐츠를 위해 내 CMS와 통신하는 모든 것!

그래서 시작할 때 보시다시피 Vite를 사용하여 새 프로젝트를 만들었습니다here.

그 후 나는 단순히 아바타, 약간의 텍스트 및 몇 개의 버튼으로 구성된 홈 페이지를 빠르게 디자인하고 코딩했습니다.


이 코드와 유사합니다.

<div class="container">
  <div class="photo">
    <div class="picture">
      <a href="/sobre">
        <img src={avatar} alt="Minha foto" />
      </a>
      <a style="color: #ff3e00;border:none!important;" href="/sobre">
        <h1 class="title">Lucas Lima (LL)</h1>
      </a>
    </div>
    <div class="text">
        <h1>Boas vindas, aventureiro(a).</h1>
        <h1>Seja bem-vindo(a) ao meu portfólio!</h1>
    </div>
    <div class="grid-btn-container">
      <div class="btn">
        <a href="/projetos"><Button text={"Me leve aos projetos!"} /></a>
      </div>
      <div class="btn">
        <a><Button text={"Me dá logo um PDF!"} /></a
        >
      </div>
    </div>
  </div>
</div>

멋진 타자 효과를 위해 Typewriter package 을 사용했습니다.

 <Typewriter cursor="#ff3e00" interval={60} cascade>
    <h1>Boas vindas, aventureiro(a).</h1>
    <h1>Seja bem-vindo(a) ao meu portfólio!</h1>
 </Typewriter>

그래서 그 홈페이지가 설정되면 라우팅을 만들 차례입니다! 나는 this repo에서 유용할 수 있는 모든 것을 검색하는 것으로 시작했고 거기에서 Svelte에서 찾을 수 있는 가장 쉬운 라우팅 메커니즘과 같은 tinro을 찾았습니다.

그런 다음 다음과 같은 경로 파일을 만들었습니다.

<script>
  import { Route } from "tinro";
  import Home from "./pages/Home.svelte";
</script>

<main>
  <Route path="/">
    <Home />
  </Route>
  <Route fallback redirect="/404" />
</main>

그 tinro는 너무 작지만 강력해서 단 한 줄의 코드로/404 경로(아직 구현되지 않음)로 리디렉션하여 폴백을 만들었습니다.

그런 다음 다른 페이지에 대한 구성 요소를 만들고 라우팅 시스템을 마무리했습니다.

<script>
  import { Route } from "tinro";
  import Projetos from "./pages/Projetos.svelte";
  import Sobre from "./pages/Sobre.svelte";
  import Home from "./pages/Home.svelte";
  import NotFound from "./pages/NotFound.svelte";
</script>

<main>
  <Route path="/">
    <Home />
  </Route>
  <Route path="/projetos">
    <Projetos />
  </Route>
  <Route path="/sobre">
    <Sobre />
  </Route>
  <Route path="/404">
    <NotFound />
  </Route>
  <Route fallback redirect="/404" />
</main>

여기에서 전체 라우팅이 완료되었습니다. 홈, 프로젝트, 정보 및 대체 및 리디렉션이 포함된 404 페이지가 있습니다. 단 몇 줄의 코드만 있으면 됩니다!

tinro는 HTML의 <a> 태그를 사용하여 경로를 생성하기 때문에 때때로(다운로드 버튼의 경우와 같이) 링크가 있지만 사용자를 특정 경로로 이동시키기 위한 것이 아니라 대신 다운로드를 담당합니다. 예를 들어 파일. 이 경우 제대로 작동하려면 tinro-ignore 태그 안에 <a> 플래그를 추가해야 합니다!

그런 다음, 다른 페이지를 생성하기만 하면 되며, 모든 페이지에는 다음과 같은 가져오기가 있습니다.

<script>
  import { onMount } from "svelte";
  let projects = [];
  onMount(async () => {
    await fetch(
      `link_for_our_cool_api`
    )
      .then((r) => r.json())
      .then((data) => {
        projects = data;
      });
  });
</script>

그리고 Svelte가 다음 예제와 같이 로드 및 폴백 구성 요소를 쉽게 처리할 수 있는 방식으로 구성 요소가 로드되었는지 여부를 확인할 수 있는 간단한 메커니즘을 제공한다는 것은 정말 멋진 일입니다.

      {#each education as { schoolName, courseName, date }}
        <div class="text-container">
          <h4 class="wordwrap"><strong>{courseName}</strong></h4>
          <h5 class="wordwrap">{schoolName}</h5>
          <h5 class="wordwrap">{date}</h5>
        </div>
      {:else}
        <div>
          <Icon />
        </div>
      {/each}

이 경우 배열 내부의 각 교육에 대해 해당 텍스트 컨테이너 div를 렌더링하려고 시도하지만 그렇게 할 수 없는 경우 대체 로딩 구성 요소(이 경우 <Icon/> )를 렌더링하는 else로 대체됩니다.

그리고 프로젝트 페이지의 경우 엄청나게 강력하고 사용자 정의가 가능한 놀라운Swiper Lib을 사용했다는 점을 언급할 가치가 있다고 생각합니다!

결과는 다음과 같습니다.

다음 코드 줄과 비슷합니다.

<Swiper
  modules={[Mousewheel, Pagination, Navigation]}
  mousewheel
  pagination={{
    type: "progressbar",
  }}
  loop={true}
  grabCursor
  navigation={!detectMob()}
>
</Swiper>

그리고 내가 사용하고 언급할 가치가 있다고 생각하는 다른 미리 빌드된 구성 요소는 Carbon Components for Svelte에 있는 Accordion입니다. 정말 예쁘고 성능도 좋습니다!



그리고 마지막으로 404 페이지입니다! 사용자에게 알리는 텍스트와 홈페이지 버튼이 있는 아이콘 구성 요소입니다!

<div class="container">
  <Icon loading={false} />
  <h1>Opa forasteiro(a)... Vai com calma!</h1>
  <h5>Página não encontrada :/</h5>
  <div>
    <a href="/">
      <Button text="Voltar para o início!" />
    </a>
  </div>
</div>

그게 다야! CMS 통합 및 Svelte를 사용하여 새 포트폴리오의 기본 사항을 다룰 수 있었으면 좋겠습니다!
그게 다야! 읽어주셔서 감사합니다 ;D