Updating your Portfolio Page

Introduction

In this Tutorial you will add two completed projects to your website, and update your Portfolio and Home web pages accordingly.

Downloading the project ZIP file

Your first step is to download the files you need for your two projects.

1. Download the following compressed file to your computer:   two-projects.zip   This is a large file 12MB which contains a video. So it may take a few minutes to download.
2. Copy the ZIP file into your websites/portfolio folder.
3. Begin uncompressing the ZIP file - but change the location into where the project files will be unzipped.   The ZIP file will suggest unzipping the files into a new sub-folder named two-projects.zip of your websites/portfolio.   In the unzipping dialog box, edit this location to the websites/portfolio sub-folder.
4. This will create two new project sub-folders in your portfolio folder:   /vincent-van-gogh and
   /hero-showcase   Each of these two project folders has its own sub-folders for storing the images and stylesheet it needs.

That's it. No more further downloads are required.

Updating the two project web pages

You will need to make a few updates to the head and footer sections your two project web pages. Follow these steps.

1. In VS Code, open the index.html files in the portfolio/hero-showcase and portfolio/vincent-van-gogh sub-folders.
2. For each of the two web pages, make the following updates:
   • In the two head sections, replace "Mary Smith" with your own name, and enter your unique Google Analytics ID in the two locations instead of "GGGGGG".
   • In the two footer sections, again replace "Mary Smith" with your own name. Also, update or remove the social media contact points
   • At the very bottom of the web page, in the JavaScript code for the privacy pop-up message, replace the fake website address with your own.
   • When finished, save the two index.html files.

View the two web pages in your browser and verify they are working correctly. You can close these two files when finished.

Updating your Portfolio web page

Now that you have added two portfolio projects to your website, you can showcase them on your Portfolio web page.

1. In VS Code, open the index.html file in the portfolio sub-folder of your 'main' assets folder.
2. Under the hero block section you can see a <div> block with the two class names of container text-center.
3. Directly under this introduction block, and above the footer section, click and press the Enter key a few times to open up some blank lines.
4. In this empty space, copy-and-paste the following.

   <div class="container">
      <div class="row">
         <div class="col-md-10 offset-md-1">
            <div class="row">
               <div class="col-md-6 text-center">
                   <a href="vincent-van-gogh/index.html"><img src="vincent-van-gogh/assets/img/van-gogh.png" alt="Vincent van Gogh" class="img-fluid"></a>
                   <p>A <a href="vincent-van-gogh/index.html" class="fancy-link">tribute</a> to the Dutch post-impressionist painter with an embedded YouTube video and set in the Google Merriweather font.</p>
                </div>
                <div class="col-md-6 text-center">
                    <a href="hero-showcase/index.html"><img src="hero-showcase/assets/img/hero-showcase.png" alt="Vincent van Gogh" class="img-fluid"></a>
                    <p>A <a href="hero-showcase/index.html" class="fancy-link">gallery</a> of web page hero blocks with animated text, background images and videos, and tinted ovelays.</p>
                </div>
            </div>
         </div>
      </div>
   </div>
   

5. Save your index.html file.

In your web browser, verify that the two project images display, and that the links to your two project web pages work corrrectly. You can close the file when finished.

Updating your Home web page

Finally: a few changes to the Home page of your website.

1. In VS Code, open the index.html file that is the Home page of your personal website.
2. Under the hero block section you can see a <div> block with the two class names of container introduction-text.
3. Replace the content of this <div> with the following text or similar.

   <h1>Welcome</h1>
   <p>My name is Mary Smith. I’m a web designer who loves to build human-friendly interfaces and digital experiences.</p>    
   

4. Replace the name "Mary Smith" with your own. Enter whatever text you feel is appropriate for your website.
5. Save your index.html file.

In your web browser, verify that your Home page looks correct on large and mobile screen sizes. You can close the file when finshed.