Building a Professional Portfolio with Node Express.js and EJS Engine: A Step-by-Step Guide

Building a Professional Portfolio with Node Express.js and EJS Engine: A Step-by-Step Guide

Introduction:

In today's digital age, having a well-designed and functional portfolio is crucial for showcasing your skills and attracting potential clients or employers. In this step-by-step guide, we will explore how to create a professional portfolio using Express.js, a popular and efficient web application framework for Node.js. By the end of this tutorial, you will have a fully functional portfolio that highlights your work and impresses your audience. So, let's get started!

Step 1: Setting Up Your Development Environment

Before we dive into building our portfolio, we need to ensure that our development environment is properly set up. Follow these steps:

Install Node.js: Visit the official Node.js website (https://nodejs.org) and download the latest stable version for your operating system. Follow the installation instructions to complete the setup.
Verify Node.js installation: Open your terminal (command prompt) and run the following command to verify if Node.js is installed correctly:
node -v
If the command returns the installed version number, you are good to go.
Install Express.js: In your terminal, run the following command to install Express.js globally:
npm install -g express

Step 2: Creating a New Express.js Project

Now that our development environment is ready, let's create a new Express.js project for our portfolio:

Create a new directory for your project:
mkdir portfolio
cd portfolio
Initialize a new Node.js project and follow the prompts:
npm init
Install Express.js as a project dependency:
npm install express
Create an entry file for your Express.js application, e.g., index.js:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Welcome to My Portfolio!');
});

app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});

Step 3: Defining Routes and Views

In this step, we'll define routes for different sections of your portfolio and create corresponding views using Express.js and a template engine like EJS (Embedded JavaScript):

Install the EJS template engine:
npm install ejs
Create a views directory in your project root folder.
Create an index.ejs file inside the views directory:

<!DOCTYPE html>
   <html>
       <head>
           <title>My Portfolio</title>
       </head>
        <body>
       <h1>Welcome to My Portfolio!</h1>
       </body>
   </html>

Modify your index.js file to render the index.ejs view:

const express = require('express');
const app = express();
const port = 3000;

app.set('view engine', 'ejs');
app.use(express.static('public'));

app.get('/', (req, res) => {
res.render('index');
});

app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});

Step 4: Styling Your Portfolio

To make your portfolio visually appealing, let's add some CSS styles:

Create a public directory in your project root folder.
Inside the public directory, create a css directory and add a style.css file:

/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

/* Add more styles to customize your portfolio */

Link the CSS file in your index.ejs file:

<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Portfolio!</h1>
</div>
</body>
</html>

Step 5: Adding Additional Sections and Pages

To expand your portfolio, you can create additional sections and pages:

Create a new route in your index.js file for each section of your portfolio

app.get('/about', (req, res) => {
res.render('about');
});

app.get('/projects', (req, res) => {
res.render('projects');
});

// Add more routes for different sections

Create corresponding views (e.g., about.ejs, projects.ejs) inside the views directory.
Link the new routes in your index.ejs file:

<!DOCTYPE html>
<html>
<ha
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Portfolio!</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/projects">Projects</a></li>

</ul>
</div>
</body>
</html>

Link the new routes in your index.ejs file:
Create an entry file for your Express.js application, e.g., index.js

<!DOCTYPE html>
<html>
<ha
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Portfolio!</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/projects">Projects</a></li>

</ul>
</div>
</body>
</html>

Conclusion:

Congratulations! You have successfully created a professional portfolio using Express.js. By following this step-by-step guide, you have learned how to set up your development environment, create routes, render views using a template engine, style your portfolio with CSS, and add additional sections and pages. Feel free to customise and expand your portfolio further to showcase your skills and projects. Happy coding!

Get Full Project on Github:

In this project you just create a basic structure of express js portfolio website. If you need more professional you have you put more time and coding.

Download and start coding from already build-in project: Get Portfolio from Github

Building a Professional Portfolio with Node Express.js and EJS Engine: A Step-by-Step Guide

You might like