Portfolio Website Using Angular
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 PreviewPrerequisites
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 StructureStep 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.
HTML
<!-- src/app/home/home.component.html -->
<section class="text-center py-16 bg-gray-100">
<h1 class="text-2xl text-gray-800">Welcome to My Portfolio</h1>
<p class="text-4xl font-bold text-gray-600 mt-4">Hi, I'm Rushik Ghuntala 👋🏻</p>
</section>
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 <p> tag.
HTML
<!-- src/app/about/about.component.html -->
<section class="py-16 bg-white">
<h2 class="text-3xl font-bold text-gray-800 text-center">About Me</h2>
<p class="text-lg text-gray-600 mt-4 max-w-2xl mx-auto text-center">
I'm a seasoned full stack developer specializing in Next.js, React.js,
and Node.js, with a knack for seamless
database
integration. Beyond development, I excel in design, crafting captivating
animations and visually stunning user
interfaces that elevate digital experiences. With over 2 years in web
application creation, my passion for
innovation
remains as strong as ever.
</p>
</section>
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
<!-- src/app/projects/projects.component.html -->
<section class="py-16 bg-gray-100">
<h2 class="text-3xl font-bold text-gray-800 text-center">My Projects</h2>
<div class="mt-8 grid gap-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold text-gray-800">Project 1</h3>
<p class="text-gray-600 mt-2">Description of project 1.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold text-gray-800">Project 2</h3>
<p class="text-gray-600 mt-2">Description of project 2.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold text-gray-800">Project 3</h3>
<p class="text-gray-600 mt-2">Description of project 3.</p>
</div>
</div>
</section>
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
<!-- src/app/contact/contact.component.html -->
<section class="py-16 bg-white">
<h2 class="text-3xl font-bold text-gray-800 text-center">Contact Me</h2>
<form class="max-w-lg mx-auto mt-8">
<div class="mb-4">
<label class="block text-gray-700 font-bold">Name</label>
<input type="text" class="w-full p-2 border border-gray-300 rounded-lg" />
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold">Email</label>
<input type="email" class="w-full p-2 border border-gray-300 rounded-lg" />
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold">Message</label>
<textarea class="w-full p-2 border border-gray-300 rounded-lg"></textarea>
</div>
<button type="submit" class="w-full py-2 px-4 bg-blue-600 text-white font-bold rounded-lg">
Send
</button>
</form>
</section>
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
<!-- src/app/app.component.html -->
<div class="container mx-auto px-4">
<app-home></app-home>
<app-about></app-about>
<app-projects></app-projects>
<app-contact></app-contact>
</div>
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
Explore
AngularJS Basics
AngularJS Directives
AngularJS Filters
AngularJS Converting Functions
AngularJS Comparing Functions
AngularJS Questions
AngularJS Examples
2 min read