Portfolio Website Using Angular (original) (raw)

Last Updated : 23 Jul, 2025

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

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:

JavaScript `

/** @type {import('tailwindcss').Config} / module.exports = { content: [ "./src/**/.{html,ts}", ], theme: { extend: {}, }, plugins: [], }

`

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

CSS `

@tailwind base; @tailwind components; @tailwind utilities;

`

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

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

tag.

HTML `

JavaScript

//src/app/home/home.component.ts import { Component } from '@angular/core';

@Component({ selector: 'app-home', standalone: true, // This line declares the component as standalone templateUrl: './home.component.html', styleUrls: ['./home.component.css'], }) export class HomeComponent { }

`

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

tag.

HTML `

JavaScript

// src/app/about/about.component.ts import { Component } from '@angular/core';

@Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'], standalone: true, }) export class AboutComponent { }

`

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.

HTML `

JavaScript

import { Component } from '@angular/core';

@Component({ selector: 'app-projects', templateUrl: './projects.component.html', styleUrls: ['./projects.component.css'], standalone: true, // Mark this component as standalone }) export class ProjectsComponent { }

`

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.

HTML `

JavaScript

import { Component } from '@angular/core';

@Component({ selector: 'app-contact', templateUrl: './contact.component.html', styleUrls: ['./contact.component.css'], standalone: true, // Mark this component as standalone }) export class ContactComponent { }

`

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.

HTML `

JavaScript

//src/app/app.component.ts import { Component } from '@angular/core'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { ProjectsComponent } from './projects/projects.component'; import { ContactComponent } from './contact/contact.component';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [HomeComponent, AboutComponent, ProjectsComponent, ContactComponent], standalone: true, }) export class AppComponent { }

JavaScript

//src/app/app.routes.ts import { Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { ProjectsComponent } from './projects/projects.component'; import { ContactComponent } from './contact/contact.component';

export const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'projects', component: ProjectsComponent }, { path: 'contact', component: ContactComponent }, ];

JavaScript

// src/app/app.config.ts import { provideRouter } from '@angular/router'; import { routes } from './app.routes';

export const appConfig = [ provideRouter(routes), // add other providers here ];

JavaScript

//src/app/app.config.server.ts import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; import { provideServerRendering } from '@angular/platform-server'; import { appConfig } from './app.config';

// Create a server-specific configuration with the providers array export const serverConfig: ApplicationConfig = { providers: [ provideServerRendering(), // other server-specific providers ], };

// Wrap the appConfig in an ApplicationConfig object export const fullAppConfig: ApplicationConfig = { providers: appConfig, };

// Merge the fullAppConfig and serverConfig into a single config export const config = mergeApplicationConfig(fullAppConfig, serverConfig);

JavaScript

//src/main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, { providers: appConfig, }).catch((err) => console.error(err));

`

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

Portfolio Website Output