Portfolio Website Using Angular

Building a portfolio website is a fantastic way to highlight your skills and showcase your work. This guide will walk you through creating a modern portfolio site using Angular, enhanced with Tailwind CSS for styling. We’ll cover setting up the project, integrating Tailwind CSS, and building out your site with step-by-step instructions.

Project Preview

Prerequisites

• Angular CLI
• TypeScript
• Tailwind CSS

Approach

• Set up a new Angular project.
• Integrate Tailwind CSS for styling.
• Create and configure necessary components.
• Implement routing for navigation.
• Style components using Tailwind CSS.

Steps to Create the Application

Step 1: Install Angular CLI

Open your terminal and run:

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new portfolio-website

Step 3: Navigate to Your Project Directory

cd portfolio-website

Step 4: Install Tailwind CSS

Install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Initialize Tailwind CSS:

npx tailwindcss init

This creates a tailwind.config.js file.

Step 5: Configure Tailwind CSS

Update tailwind.config.js to include paths to your Angular files:

Add Tailwind’s directives to your global stylesheet (src/styles.css):

Dependencies

"dependencies": {
 "@angular/animations": "^18.0.0",
 "@angular/common": "^18.0.0",
 "@angular/compiler": "^18.0.0",
 "@angular/core": "^18.0.0",
 "@angular/forms": "^18.0.0",
 "@angular/platform-browser": "^18.0.0",
 "@angular/platform-browser-dynamic": "^18.0.0",
 "@angular/platform-server": "^18.0.0",
 "@angular/router": "^18.0.0",
 "@angular/ssr": "^18.0.0",
 "autoprefixer": "^10.4.20",
 "express": "^4.18.2",
 "postcss": "^8.4.41",
 "rxjs": "~7.8.0",
 "tailwindcss": "^3.4.9",
 "tslib": "^2.3.0",
 "zone.js": "~0.14.3"
}

Folder Structure

Step 6: Create Components

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

Home Component Code

Below mentioned is the HTML and TypeScript code of Home Component of Portfolio Website. This Home Component will be covering a section of the Portfolio Website in bg-gray-100 and displaying the content of H1 and <p> tag.

About Component Code

Below mentioned is the HTML and TypeScript Code of the About Component of Portfolio Website.This Component will be covering 'About Me' Section of Portfolio Website and will be displaying the content of <p> tag.

Project Component Code

Below mentioned is the HTML and TypeScript Code of Project Component of Portfolio Website. This Component will be covering the 'My Projects' section in this the projects will be displayed in grid layout followed by the description of the respective project.

Contact Component Code

Below mentioned is the HTML and TypeScript Code of Contact Component of Portfolio Website. This Component will be having a Contact Us form.

App Component Code

Below mentioned app component which is the first component which gets loaded when an angular application is made.App Component covers all the components will which be executed when angular application runs.

Running the Application

To start the application run the following command

ng serve --open

The application should now be accessible at http://localhost:4200.

Output