---
title: Dev Portfolio Project Final Part - Experiences & Projects
id: 643
html_url: "https://acmcsuf.com/blog/643"
discussion_url: "https://github.com/EthanThatOneKid/acmcsuf.com/discussions/643"
author: "anhduy1202 (https://github.com/anhduy1202)"
labels: ["dev", "svelte"]
created: "2022-10-28T21:40:21.000Z"
edited: "2022-10-28T21:42:17.000Z"
---

Dev Portfolio Project Final Part - Experiences & Projects
=========================================================

INTRODUCTION 🥳

 * In this blog, we'll guide you to create the last 2 components: Experiences and Projects for our
   portfolio website and it looks something like this

Screen Shot 2022-10-28 at 2 28 24 PM
[https://user-images.githubusercontent.com/58461444/198735898-fd187cd5-a778-4e39-8a25-a2042436e771.png]https://user-images.githubusercontent.com/58461444/198735898-fd187cd5-a778-4e39-8a25-a2042436e771.png

Screen Shot 2022-10-28 at 2 28 38 PM
[https://user-images.githubusercontent.com/58461444/198735921-7cdbfc80-fec2-4446-85ef-8d694c0cb636.png]https://user-images.githubusercontent.com/58461444/198735921-7cdbfc80-fec2-4446-85ef-8d694c0cb636.png


WHAT'LL BE COVERED IN THIS BLOG 🤓

 * #each loop in Svelte ( we've learned this in part 2 )


LET'S START 🤖


CREATE EXPERIENCES + PROJECTS COMPONENTS

 * Similar to what we did in previous parts, we'll create Experiences.svelte and Projects.svelte in
   our components folder

Screen Shot 2022-10-28 at 2 31 46 PM
[https://user-images.githubusercontent.com/58461444/198736292-379ae7f0-471d-470b-8bb0-27a7af48af7e.png]https://user-images.githubusercontent.com/58461444/198736292-379ae7f0-471d-470b-8bb0-27a7af48af7e.png

NOTE: Don't forget to import our component in App.svelte - our main Svelte file

> App.svelte

<script>
  import About from "./components/About.svelte";
  import Experiences from "./components/Experiences.svelte";
  import NavBar from "./components/NavBar.svelte";
  import Projects from "./components/Projects.svelte";
</script>

<main>
  <NavBar />
  <div>
    <About name={"Frank"} />
    <Experiences />
    <Projects />
  </div>
</main>

<style>
  main {
    margin: 1rem;
    font-size: 1.25rem;
  }
</style>


EXPERIENCES COMPONENT

 * Similar to what we did in NavBar.svelte, we'll also create a JavaScript Array of Objects to hold
   our data and then use Svelte #each loop to render them to our browser

<script>
  const exps = [
    {
      title: "Shark Gang Lead",
      duration: "Jan 2022 - Present",
    },
    {
      title: "Vegan Shark",
      duration: "Jan 2021 - Jan 2022",
    },
    {
      title: "Junior Shark",
      duration: "Jan 2020 - Jan 2021",
    },
    {
      title: "Baby Shark",
      duration: "Jan 2019 - Jan 2020",
    },
  ];
</script>

<section class="container__exps" id="Experiences">
  <p class="header--big">Experiences</p>
  {#each exps as { title, duration }}
    <div class="container__exp">
      <p class="header__title">{title}</p>
      <p class="header__duration">{duration}</p>
    </div>
  {/each}
</section>

<style>
  .container__exps {
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .header--big {
    font-size: 2.5rem;
    font-weight: 780;
  }
  .container__exp {
    background-color: #2C91C6;
    border-radius: 2rem;
    margin: 1rem;
  }
  .header__title {
    font-size: 1.5rem;
    font-weight: 600;
  }
</style>


SCROLLING EFFECT


NOTICE THAT WE SET THE ID="EXPERIENCES" FOR OUR <SECTION> SINCE WE WANT THE SCROLLING ANIMATION THAT
WHENEVER WE CLICK AN ITEM ON OUR NAVBAR IT'LL SCROLL TO THE SECTION WITH THE MATCHING ID, LET'S
RECALL OUR NAVBAR CODE FOR THIS:

> NavBar.svelte

  const navItems = [
    { title: "About", url: "#About" }, // Scroll to section with id About
    { title: "Experiences", url: "#Experiences" }, // Scroll to section with id Experiences
    { title: "Projects", url: "#Projects" }, // Scroll to section with id Projects
  ];

And we also need to add a little bit of CSS to make the scrolling become smoother

> app.css

html {
  scroll-behavior: smooth;
}


PROJECTS COMPONENT

 * Similar to what we did in Experiences.svelte, we'll also create a JavaScript Array of Objects to
   hold our data and then use Svelte #each loop to render them to our browser

<script>
  const projects = [
    {
      title: "acmcsuf.com",
      description: "Developed acmcsuf.com website",
      url: "https://github.com/EthanThatOneKid/acmcsuf.com",
    },
    {
      title: "Intro to Web Dev",
      description: "Beginner friendly Web Dev series by acmDev",
      url: "https://github.com/acmCSUFDev/intro-to-web-dev",
    },
    {
      title: "ICON",
      description: "Notion Canvas integration for students",
      url: "https://github.com/acmCSUFDev/ICON",
    },
    {
      title: "Food Tinder",
      description: "tinder for matching people by food places",
      url: "https://github.com/acmCSUFDev/Food-Tinder",
    },
  ];
</script>

<section class="container__projects" id="Projects">
  <p class="header--big">Projects</p>
  {#each projects as { title, description, url }}
    <div class="container__project">
      <a href={url} target="_blank">
        <p class="header__title">{title}</p>
      </a>
      <p>{description}</p>
    </div>
  {/each}
</section>

<style>
  .container__projects {
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .header--big {
    font-size: 2.5rem;
    font-weight: 780;
  }
  .container__project {
    margin: 1rem;
  }
  .header__title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    transition: 400ms all;
  }
  .header__title:hover {
    color: #2c91c6;
  }
</style>


NOW, YOU'VE SUCCESSFULLY BUILT UP A DECENT WEBSITE 🤩 🤩 YOU CAN ALWAYS CHECK THE FULL CODE HERE
[https://github.com/acmCSUFDev/intro-to-web-dev/tree/part-2-reference]


LET'S SEE HOW'RE WE GOING TO DEPLOY THIS IN THE NEXT BLOG :D