Dev Portfolio Project Final Part - Experiences & Projects
by @anhduy1202
October 28, 2022 • 7 min read
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
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.svelteandProjects.sveltein our components folder
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>