Scribd
Upload
21 views9 pages

EX - NO: Portfolio Using Node - Js Date

Uploaded by

vijaivarma10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views9 pages

EX - NO: Portfolio Using Node - Js Date

Uploaded by

vijaivarma10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

EX.

NO:
PORTFOLIO USING NODE.JS
DATE:

AIM:

PROCEDURE:
DEPENDENCIES:

PROJECT STRUCTURE:

PROGRAM:
Public/index.js:

<!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="styles.css">
</head>
<body>

<header>
<div class="container">
<h1>My Portfolio</h1>
</div>
</header>
<div class="container">
<div id="about">
<h2>About Me</h2>
<p>Hello! I'm vijai.k, a passionate web developer with expertise in creating dynamic and
responsive websites. I enjoy solving complex problems and learning new technologies.</p>
</div>

<div id="projects">
<h2>Projects</h2>
<div class="project-item">
<img src="project1.jpg" alt="Project 1">
<h3>Project 1: Portfolio Website</h3>
<p>Description: A personal portfolio website to showcase my work and skills.</p>
</div>
<div class="project-item">
<img src="project2.jpg" alt="Project 2">
<h3>Project 2: E-commerce Website</h3>
<p>Description: An e-commerce platform for online shopping with features like user
authentication, product listings, and payment integration.</p>
</div>
</div>

<div id="skills">
<h2>Skills</h2>
<div class="skill-item">
<p>HTML & CSS</p>
</div>
<div class="skill-item">
<p>JavaScript</p>
</div>
<div class="skill-item">
<p>PHP & MySQL</p>
</div>
<div class="skill-item">
<p>React & Node.js</p>
</div>
</div>

<div id="contact">
<h2>Contact Me</h2>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>

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

Public/style.css:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 15px 0;
text-align: center;
}

.container {
width: 80%;
margin: auto;
overflow: hidden;
}

#about, #projects, #skills, #contact {


background: white;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
color: #333;
}

.project-item, .skill-item {
margin-bottom: 5px;
}

.project-item img {
width: 50%;
height: 50%;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}

a{
color: #0066cc;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

App.js:

const express=require ('express');


const app=express();
app.use(express.static('public'));
app.listen(3000,()=>{
console.log("app listeningon port 3000");
})
OUTPUT:
RESULT:

You might also like