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:

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

Add Tailwind’s directives to your global stylesheet (src/styles.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.

<!-- 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>

//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.

<!-- 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>

// src/app/about/about.component.ts
import { Component