Angular Portfolio App Development E-Book

Abdelfattah Ragab

• Herausgeber: Abdelfattah Ragab
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

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.

Leseprobe

Angular Portfolio App Development

Create modern and appealing portfolios with Angular

Abdelfattah Ragab

Introduction

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.

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)

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;

}

}