With the growing emphasis on practical skills, more companies are looking at portfolios alongside traditional resumes when evaluating engineers in mechanical, electrical, and data science. A well-crafted portfolio can showcase your projects, technical abilities, and problem-solving approach in ways that resumes alone cannot. This is a free portfolio template. You can host your site for free in 15 minutes! Check out the demo here.

Visit lowinertia.com I am adding contents that I think would be helpful for those who either looking for preparing for internship or entry position application.

• Getting Started
  • Setup GitHub Account
  • Use the Template

• Set Up Your Profile
  • Open _config.yml
• Adding Projects
  • Creating a Markdown File in GitHub

• YAML Frontmatter
• Adding Contents
  • Section Title
  • Sub-Section Title
  • Adding a New Line
  • Adding a Horizontal Line
  • Embedding Images
  • Embedding YouTube Video
  • Adding Bold Text
  • Adding Italic Text
  • Adding Ordered List
  • Adding Unordered List
  • Adding Code Block
  • Adding External Links
  • Adding Block Quote
  • Adding Table

1. Visit GitHub: If you don't have an account, go to GitHub and sign up.
2. Create an Account: Fill out the registration form with your preferred username, email, and password.
3. Verify Your Email: Check your email to verify your account.

1. Navigate to FreeToEngineer Repository: Go to the repository where this portfolio template is hosted

2. Use the template: Click the "Use this template" button at the top right of the page. Then, choose create a new repository. This creates a copy under your GitHub account. If you can also click on the "star", it will help the template to get visibility to many others!

   

3. [IMPORTANT] Name the repository: in the "Repository name" field, type in {your github id}.github.io.This is also the url of your portfolio. You can use your custom domain as well. (change in the setting later)

   

4. Click "Create repository"

5. That's it! Now, you have a portfolio webiste @ [your id].github.io. You may have to wait for up to 1 minute for github to finish building.

6. [Good to know] you can see the status of your website by going to settings - pages.

This file contains the configuration settings for your site. Here's what you might want to change: After you are done. just click "commit chages" to apply. Give a minute or so for github to build your website.

• Site Title: Change the title: this is what shows up in the tab of the browser on your site
• Name: Change the name: your name will show up as seen above
• Description: Update the description: with a brief overview of your highlights and qualification
• profile_image: place your profile image in assets/profile folder and update the directory
• Resume-url: You can either link to externally stored pdf (ex. google drive) or save the pdf under assets/pdf/ folder and enter the directory

• External Links: link your external accounts (linkedin, github, stackoverflow, medium, etc) Only the icons for the accounts that you enter will appear. Example:

    external-links:    # input only your own url slug. The icons with missing entries will not appear.
      linkedin: johndoe1       # https://www.linkedin.com/in/{your url slug} 
      github: johndoe1         # https://github.com/{your url slug} 
      stackoverflow: johndoe1  # https://stackoverflow.com/users/{your url slug}

• Skills: you can list your skills by category. It will show up like below. Be careful with the identation. Example:

    skills:
      - category: 3D Modeling
        tools:
        - Onshape
        - Solidworks
        - Creo
        - Fusion 360 
      
      - category: Prototyping
        tools:
        - SLA
        - CNC
        - FDM
        - SLS
        - DMLS
        - PolyJet Printing
        - Vacuum Casting

• Contact Form: you can set up the contact form to send the response to your email using formspree. You just need to sign up and create a new form. Then, add the 8-digit endpoint key!

  

  formspree-key:   https://formspree.io/f/{8-digit key}

• (optional) you chan change your color theme by inputting color hex code for a few variables. Feel free to be creative!

  colors: # this is the basic theme
    text: "##1a1c20"
    border: "#ddd"
    link: "#4a76ee"
    highlight: "#0c0cf2"
    background: "#ffffff"
    light_background: "#f3f5fb"

  There is a few suggested themes in _config.yml

  • mint green
  • lemon
  • cotton-candy

For each project, you need to create a markdown file within _projects folder. I recommend created a folder for each project so that it is easy to organize image files that you may want to add. To get started, follow the below steps.

1. Go to _project folder. Make sure you are in the correct level.

2. In the right side of the screen, click add file - create new file.
   

3. in the available field, enter the name of the folder: {your-project-name} then hit "/". This will create a folder for the project.
   

4. create a markdown file by entering index.md.
   

5. In the text field paste the below "front-matter" template and fill out the title, description, skills, and name of the main project image that you want to use. This is the summary of the project that will be used to display the project in the main page. Be careful not to leave any space before the front matter deliminators "---". It causes syntax error, and your page will not be built.

   ---
   layout: post
   title: project title
   description:  short description of the project
   skills: 
   - skill 1
   - skill 2
   main-image: /project.webp 
   ---

6. then click Submit changes to create the file.

7. Upload your image in the same folder by clicking Add file - upload files.

8. Drag your image file, then click commit changes.

9. Allow a minute or so for the build. It will create a project section that looks like this below.

If you want to add addtional details, you can go back to the index.md file and add more contents below the front matter. It will be helpful if you become familiarized with markdown syntax. If you are interested in learning, see markdown guide. I set up a couple styling to allow you to embed multiple images and video easily and become responsive for mobile view. See the demo) project. You can also add code blocks, blockquote, and tables.

YAML frontmatter gets pulled by the site to fill contents for the summary section of your project which gets displayed in the main index page and top section of the project page.

---
layout: post
title: Super Heavy Booster Catch (Demo Only)
description:  (I have never been employed by / affiliated with SpaceX. This is for demo use only) 
    Developing the Super Heavy booster catch project involves designing a robust launch tower with "chopstick" arms, advanced control systems for precise booster alignment, and integrating sophisticated software for real-time trajectory adjustments and structural engineering to handle immense forces.
skills: 
  - Structural analysis
  - Aerodynamic design
  - Propulsion system integration
  - Control Algorithem 
  - Welding
  - Metal forming
  - Thermal simulation

main-image: /project2.jpg
---

use "## (title)" as the title of each section

## section title

Use this to have subsection if needed

### sub-section title

you can add 2 spaces " " or
to start a new line

<br>

you can add a horizontal line to separate fields by using "---"

---

Add images using the following format. You can put multiple images in a single row by putting in multiple entries for "images=". You can also overide the size of the all images in the single row setting the height in pixel. {% include image-gallery.html images="{image1 path}, {image2 path}" height="400"%}

{% include image-gallery.html images="project2.jpg" height="400" %}

Add youtube video using the following format {% include youtube-video.html id="{11-digit id}" autoplay= "false"%}

{% include youtube-video.html id="{11-digit id}" autoplay= "false"%}

This is where you get the 11-digit id

add bold text by wrapping with "**"

this is how you input **bold text**

add italic text by wrapping with "*"

Italicized text is the *cat's meow*.

underline is not supported in markdown, but you can still use html within markdown

<u>This text is underlined</u>

1. First item
2. Second item
3. Third item
4. Fourth item

1. First item
2. Second item
3. Third item
4. Fourth item

- First item
- Second item
- Third item
- Fourth item

• First item
• Second item
• Third item
• Fourth item

To add a code block wrap your script with ```. Adding the language after ''' will activate sytax highlighting.

def start()
  print("time to start!")

to add extra links, wrap the text in "[ ]" then add the add the hyperlink wrappted by "( )"

[Wikipedia](https://en.wikipedia.org)

To add a blockquote add ">" at the beginning of the text

> A blockquote would look great if you need to highlight something

A blockquote would look great if you need to highlight something

To add a table, use the following format

| Header 1 | Header 2 |
|----------|----------|
| Row 1, Col 1 | Row 1, Col 2 |
| Row 2, Col 1 | Row 2, Col 2 |

** make sure to leave a line betwen the table and the header