Introduction
Creating a personal portfolio website is an essential step for anyone looking to showcase their skills, projects, and professional journey. In today’s digital age, having an online presence not only highlights your expertise but also serves as a platform for potential employers or clients to understand your capabilities. This guide will walk you through building a simple yet elegant portfolio website using Node.js, Express, and EJS (Embedded JavaScript). By the end of this tutorial, you’ll have a fully functional website that you can customize to reflect your personal brand.
Project Structure
Before diving into the code, let’s establish the project structure. Here’s how the folder structure will look:
personal-portfolio/
├── public/
│ ├── css/
│ │ └── styles.css
│ └── images/
│ └── profile.jpg
├── views/
│ ├── index.ejs
│ └── partials/
│ └── header.ejs
├── app.js
├── package.json
└── README.md
Step 1: Setting Up the Project
-
Initialize the Project:
Open your terminal and create a new directory for your project:mkdir personal-portfolio cd personal-portfolio npm init -y -
Install Dependencies:
We’ll need Express and EJS:npm install express ejs
Step 2: Creating the Server
Now, let’s create the main application file (app.js) to set up our server.
// app.js
const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;
// Set the view engine to EJS
app.set('view engine', 'ejs');
// Serve static files from the "public" directory
app.use(express.static(path.join(__dirname, 'public')));
// Route for the homepage
app.get('/', (req, res) => {
res.render('index');
});
// Start the server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Step 3: Creating the Views
Next, we’ll create our main view file (index.ejs) and a header partial (header.ejs).
- Create
views/index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<header>
<%= include('partials/header') %>
</header>
<main>
<section class="about">
<h1>Hello, I'm [Your Name]</h1>
<p>Welcome to my portfolio website! Here, you can find my projects and learn more about my skills.</p>
</section>
<section class="projects">
<h2>My Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
</main>
</body>
</html>
- Create
views/partials/header.ejs:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Step 4: Adding Styles
Create a CSS file to style your website.
- Create
public/css/styles.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
h1, h2 {
color: #333;
}
.about, .projects {
padding: 20px;
margin: 20px;
background: white;
border-radius: 8px;
}
Step 5: Run the Application
Now that everything is set up, run your application:
node app.js
Open your browser and go to http://localhost:3000. You should see your portfolio website!
Explanation of the Program
In this Node.js application, we used the Express framework to set up a simple server that serves an EJS-based website. EJS allows us to embed JavaScript into our HTML, making it easy to create dynamic content. The folder structure separates our static files (CSS, images) from the application logic, promoting organization and clarity.
Key Components:
- Express Framework: This lightweight framework simplifies server and route management, making it ideal for building web applications.
- EJS Templating: EJS enables dynamic content rendering, allowing you to create reusable templates (like our header).
- Static Files: Serving static files (like CSS and images) enhances the user experience, providing a visually appealing interface.
This application serves as a foundational portfolio website. You can expand it by adding more sections, such as a contact form, a blog, or additional project details. Customize the styling to match your personal aesthetic and make it truly yours!
With this project, you have the essential building blocks to create and showcase your professional portfolio online, setting the stage for future opportunities in your career. Happy coding!
