Building a Portfolio Website with Angular and Bootstrap 5

by

Creating a portfolio website is an excellent way to showcase your skills and projects to potential employers or clients. Using Angular, a popular framework for building dynamic web applications, combined with Bootstrap 5, a powerful CSS framework, can help you develop a modern and responsive portfolio site efficiently.

Getting Started with Angular and Bootstrap 5

Before diving into development, ensure you have Node.js and Angular CLI installed on your machine. You can download Node.js from the official website and install Angular CLI using npm:

npm install -g @angular/cli

Once installed, create a new Angular project:

ng new portfolio-website

Navigate into your project directory and install Bootstrap 5 via npm:

cd portfolio-website
npm install bootstrap

Integrating Bootstrap 5 into Your Angular Project

To include Bootstrap styles, open angular.json and add the Bootstrap CSS file to the styles array:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Building Your Portfolio Components

Create components for different sections of your portfolio, such as About, Projects, and Contact. Use Angular CLI commands like:

ng generate component about
ng generate component projects
ng generate component contact

Designing the About Section

In about.component.html, use Bootstrap classes to layout your content:

<div class="container text-center">
  <h2>About Me</h2>
  <p>Brief biography and skills.</p>
</div>

Showcasing Projects

In projects.component.html, create a grid of project cards:

<div class="container">
  <div class="row">
    <div class="col-md-4" *ngFor="let project of projects">
      <div class="card mb-4">
        <img src="{{project.image}}" class="card-img-top" alt="{{project.title}}">
        <div class="card-body">
          <h5 class="card-title">{{project.title}}</h5>
          <p class="card-text">{{project.description}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

Creating a Contact Form

In contact.component.html, use Bootstrap form classes:

<div class="container">
  <h2>Contact Me</h2>
  <form>
    <div class="mb-3">
      <label for="name" class="form-label">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Your Name">
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="message" class="form-label">Message</label>
      <textarea class="form-control" id="message" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
  </form>
</div>

Finalizing Your Portfolio Website

Once all components are developed, assemble them in the app.component.html to create your homepage:

<app-about></app-about>
<app-projects></app-projects>
<app-contact></app-contact>

Run your project with:

ng serve

Visit http://localhost:4200 to see your portfolio site in action. Customize it further with your own images, projects, and styling to make it uniquely yours.