---
title: Dev Portfolio Project Part 3 - About
id: 627
html_url: "https://acmcsuf.com/blog/627"
discussion_url: "https://github.com/EthanThatOneKid/acmcsuf.com/discussions/627"
author: "anhduy1202 (https://github.com/anhduy1202)"
labels: ["dev", "svelte"]
created: "2022-10-21T21:43:32.000Z"
edited: "2022-10-22T10:24:35.000Z"
---

Dev Portfolio Project Part 3 - About
====================================

INTRODUCTION 🥳

 * In this blog, we'll guide you to create the About component for our portfolio website and it
   looks something like this

Screen Shot 2022-10-21 at 1 36 59 PM
[https://user-images.githubusercontent.com/58461444/197284531-ac9a3274-2a28-4e85-8fab-753e865463c5.png]https://user-images.githubusercontent.com/58461444/197284531-ac9a3274-2a28-4e85-8fab-753e865463c5.png


WHAT'LL BE COVERED IN THIS BLOG 🤓

 * Display image on website
 * Props in Svelte


LET'S START 🤖


CREATE ABOUT COMPONENT

 * Similar to our NavBar in part 2, we'll create an About.svelte in our components folder

Screen Shot 2022-10-21 at 1 58 44 PM
[https://user-images.githubusercontent.com/58461444/197287657-1615ce55-efdc-4a3d-87fc-015a13553932.png]https://user-images.githubusercontent.com/58461444/197287657-1615ce55-efdc-4a3d-87fc-015a13553932.png

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

Screen Shot 2022-10-21 at 2 28 57 PM
[https://user-images.githubusercontent.com/58461444/197291552-f452f867-e876-46e4-8de6-9dd9a5b81ce9.png]https://user-images.githubusercontent.com/58461444/197291552-f452f867-e876-46e4-8de6-9dd9a5b81ce9.png


DISPLAY AN IMAGE ON OUR WEBSITE

 * To display an image, we'll need to use the <img src="" alt=""> </img> in HTML, but we first need
   to have an image link, it can be image link from the internet or your local image files


EX: HERE'S AN ONLINE IMAGE LINK FROM UNSPLASH [https://unsplash.com] ( WEBSITE FOR FREE IMAGES )

https://images.unsplash.com/photo-1586115457457-b3753fe50cf1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1576&q=80



EX: HERE'S A LOCAL IMAGE ( WE DOWNLOADED A .SVG IMAGE AND PUT IT IN OUR ASSETS FOLDER )

Screen Shot 2022-10-21 at 1 51 45 PM
[https://user-images.githubusercontent.com/58461444/197286640-12c6ea9c-5d15-4415-8515-a874cf4e8b73.png]https://user-images.githubusercontent.com/58461444/197286640-12c6ea9c-5d15-4415-8515-a874cf4e8b73.png


NOW, LET'S TRY TO IMPORT OUR LOCAL IMAGE IN OUR ABOUT.SVELTE

<script>
  import frank from "../assets/frank.svg"; // Import our local image
</script>

<section>
  <div class="container__about" id="About">
 <!-- Import the frank image and have it as our image source with width = 180px and height = 123px -->
    <img width={180} height={123} src={frank} alt="" />
    <p class="header--small">Hi, I'm Frank </p>
    <p class="header--big">WELCOME TO MY PORTFOLIO</p>
  </div>
</section>

<style>
  .container__about {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
  }
  .header--small {
    font-size: 1.5rem;
    margin: 2rem 0 0 0;
    font-weight: 600;
  }

  .header--big {
    font-size: 2rem;
    color: #2C91C6;
    font-weight: 700;
  }
</style>


THEN, AFTER YOU SAVE FILE, YOU SHOULD SEE THE AN IMAGE OF FRANK ALONG WITH THE WELCOME MESSAGE 🦈


BONUS: PROPS IN SVELTE 👀

In any real application, you'll need to pass data from one component down to its children. To do
that, we need to declare properties, generally shortened to 'props'. In Svelte, we do that with the
export keyword


LET'S SEE THAT WITH SOME CODE:


PASSING PROPS

> App.svelte

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

<main>
  <NavBar/>
 <!-- we're passing a string with props name ```name```  to About component -->
  <About name="Frank"/>
</main>

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


RECEIVING PROPS

> About.svelte

<script>
  export let name; // receive props ```name```
  import frank from "../assets/frank.svg";
</script>

<section>
  <div class="container__about" id="About">
    <img width={180} height={123} src={frank} alt="" />
   <!-- We're using the props here -->
    <p class="header--small">Hi, I'm {name}</p> 
    <p class="header--big">WELCOME TO MY PORTFOLIO</p>
  </div>
</section>

<style>
  .container__about {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
  }
  .header--small {
    font-size: 1.5rem;
    margin: 2rem 0 0 0;
    font-weight: 600;
  }

  .header--big {
    font-size: 2rem;
    color: #2C91C6;
    font-weight: 700;
  }
</style>


SO, NOW IF YOU CHANGE THE PROPS NAME INTO ANOTHER STRING, IT'LL UPDATE THE NAME IN OUR ABOUT.SVELTE
DYNAMICALLY, SO YOU CAN SEE THAT PROPS WILL BE HELPFUL IF WE WANT TO UPDATE DYNAMICALLY INSTEAD OF
HARD-CODING THE STRING 🥰


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