React Portfolio App Development E-Book

Abdelfattah Ragab

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

Seitenzahl: 23

Veröffentlichungsjahr: 2024

Beschreibung

Create a portfolio application with React and show the world your talent. Create your personal brand, increase your online presence and impress your potential employers. An online portfolio is important for your career to show the world your skills and impress your future employers.

Leseprobe

React Portfolio App Development

Increase your online presence and create your personal brand

Abdelfattah Ragab

Introduction

Welcome to the book "React Portfolio App Development".

In this book, I will show you how to create an online portfolio application using the React library.

An online portfolio is an important step in your professional career.

By the end of this book, you will have hands-on training in React and end up with a beautiful portfolio that you can use in your career. Create your own brand, impress your potential employers and show the world your skills.

Let us go!

Source code

The source code is available on the book 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 Your Own Brand

Use the Huemint website to help you choose your brand colors.

https://huemint.com

Chapter 2: App Layout

2.1 App Diagram

2.2 App Structure

<TopBar />

<Sidenav />

<main className="main">

<Routes></Routes>

</main>

<Footer />

2.3 App Folder Structure

Chapter 3: Project Setup

3.1 Create the App

npm create vite@latest

Project name: portfolio-app

Select a framework: React

Select a variant: TypeScript

Done.

Open it in VS Code

Run

npm install

Done

3.2 Install React Router

npm install react-router-dom

3.3 Run the App

npm run dev

Ready

Open the browser at http://localhost:5173/

3.4 Copy the Assets

Paste the project assets to the “public” folder.

3.5 Clean the app

1. Remove everything inside the App.tsx and keep only the function as follows

import "./App.css";

function App() {

return <></>;

}

export default App;

2. Add react router

import "./App.css";

import { BrowserRouter, Routes } from "react-router-dom";

function App() {

return (

<div>

<BrowserRouter>

<main className="main">

<Routes></Routes>

</main>

</BrowserRouter>

</div>

);

}

export default App;

3. Remove everything in App.css

4. Remove everything in index.css

You should now have a white page that looks like this

3.6 Set Title and Icon

In the index.html file.

1. Set app title

<title>Portfolio App</title>

2. Set app icon

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

3.7 Add Global Style

Add the following to index.css

* {

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;

}