Angular Portfolio App Development E-Book

Abdelfattah Ragab

• Herausgeber: tredition
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 20

Veröffentlichungsjahr: 2024

Beschreibung

In this book you'll learn how to create an online portfolio application with Angular. Building a personal brand is important for your online growth and career. In this book, you'll learn how to create an online portfolio application to showcase your talent to the world and impress your potential employers. We start from scratch and build everything together. By the end of this book, you'll be confident working with Angular and creating an elegant and impressive portfolio to showcase yourself online. We will use the latest Angular technology v19.2, NgRx SignalStore and Modern CSS Layouts.

Leseprobe

Angular Portfolio App Development

Create your personal brand

Abdelfattah Ragab

Introduction

Welcome to the book "Angular Portfolio App Development: Create Your Personal Brand". In this book, I explain how to use Angular to create an online portfolio. An online portfolio can help you show the world your skills and impress your employers. It's also a good step towards building your personal brand.

By the end of this book, you will be confident working with Angular and have your own online portfolio.

Let’s get started!

Source code

The source code is available on the authors' website

https://books.abdelfattah-ragab.com

Chapter 1: Project Preview

1.1 Pages

The project contains the following pages:

● Home

● About

● CV

● Projects

● Contact

1.2 Preview (Mobile)

1.3 Preview (Desktop)

1.4 Choose Colors

You can get started quickly and use the following website to help you choose colors for your website.

https://huemint.com

Chapter 2: App Layout

2.1 App Diagram

2.2 App Structure

<app-top-bar></app-top-bar>

<app-sidenav></app-sidenav>

<main class="main">

<router-outlet></router-outlet>

</main>

<app-footer></app-footer>

2.3 App Folder Structure

Chapter 3: Project Setup

3.1 Create the Angular App

ng new portfolio-app --directory "Portfolio App"

3.2 Copy the Assets

Copy the assets images and files to the “assets” folder.

3.3 Set Title and Icon

In the index.html file.

Set app title

<title>Portfolio App</title>

Set app icon

<link rel="icon" type="image/x-icon" href="assets/images/logo.png" />

3.4 Add Global Style

Remove everything from styles.css and add the following code

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--main-color: #1c4270;

--accent-color-1: #dc5261;

--accent-color-2: #f8f4a6;

--footer-background: #0a2444;

--footer-text: rgba(248, 244, 166, 0.7);

}

html,

body {

font-family: Roboto, Arial, Helvetica, sans-serif;

color: var(--accent-color-2);

background-color: var(--accent-color-1);

line-height: 1.5rem !important;

min-height: 100%;

position: relative;

overflow-x: hidden;

}

body {

background-color: var(--main-color);

}

.link {

cursor: pointer;

color: var(--accent-color-1);

text-decoration: none;

}

a:link,

a:visited,

.link:link,

.link:visited {

color: var(--accent-color-1);

text-decoration: none;

}

.link:hover,

a:hover {

filter: brightness(1.1);

}

.main {

margin: auto;

padding: 100px 40px;

@media (min-width: 760px) {

width: 70%;

padding: 120px 40px;

}

}

.main-title {

font-size: 26px;

font-weight: 300;

text-align: center;

color: var(--accent-color-1);

padding-top: 10px;

padding-bottom: 30px;

}

3.5 Clean the app.component.html

Remove everything from the app component except the router-outlet

Wrap it within the main element as follows

<main class="main">

<router-outlet></router-outlet>

</main>

Chapter 4: Top Bar Component

4.1 Preview

4.2 Create It

ng g c layout/top-bar

4.3 HTML

Paste this HTML code into top-bar.component.html

<header class="top-bar">

<div class="brand">

<img routerLink="/" src="assets/images/logo.png" alt="" class="logo link" />

<div class="brand-name link" routerLink="/">Abdelfattah Ragab</div>

</div>

<div class="menu-button">