Portfolio Website Using Angular

Last Updated : 14 Aug, 2024

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

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

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.

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

Dice Rolling App Using Angular

rushisoni2003

Improve

Article Tags :

Portfolio Website Using Angular

Prerequisites

Approach

Steps to Create the Application

Step 1: Install Angular CLI

Step 2: Create a New Angular Project

Step 3: Navigate to Your Project Directory

Step 4: Install Tailwind CSS

Step 5: Configure Tailwind CSS

Dependencies

Folder Structure

Home Component Code

About Component Code

Project Component Code

Contact Component Code

App Component Code

Running the Application

Output

Similar Reads