How to best design my Angular2+ portfolio infrastructure

I've been creating a portfolio site and don't know how to best design the infrastructure of my homepage along with sample projects.

I'm using Angular for my 3 example projects, but am unsure where to put the code.

These projects are built for nothing more than portfolio pieces for view/use by hiring managers or recruiters.

My question is where to put the code of my project apps in relation to my home page.

---

Approach #1: A Single App

Would it be best to put them as folders within a single angular app and backend? For example, my Angular code would be structured like:

• src
  • app
    • homePageFolder
    • project1Folder
      • project1Services
      • project1Components
    • project2Folder
    • project3Folder
    • app.component.ts
    • app......etc

An example url with this approach: mysite.com/project1

---

Approach #2: Separate Apps

Or would it be best to separate them as three separate Angular applications with three separate backends?

Then I could deploy them as subdomains. For example: project1.mysite.com

---

I think it would be easier to manage the all-in-one approach instead of trying to display superior IT hosting skills but am interested to learn best practice here for my case.

Thanks for the help! Let me know if there's any way I can clear up the question.