Hello, I’m building a portfolio site using vite. My entry point is index.js, when I npm run dev i.e, when I start the server css is working fine, but when I open the site using live server css is not working. index.html is in the root. PS. I’m just a beginner, sorry if I might have sound dumb.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>L's Portfolio</title>
<!-- Favicon -->
<link rel="icon" href="/photos/L.jpg" />
<!-- Bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<!-- Custom css -->
<link rel="stylesheet" href="/css/styles.css" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=Gemunu+Libre:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=Gemunu+Libre:wght@200..800&family=Miltonian+Tattoo&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
</head>
<body id="home" class="dark">
<!-- header -->
<header>
<nav class="navbar navbar-expand-lg text-white">
<div class="container-fluid">
<!-- Logo -->
<span><a class="nav-link logo" href="#">L.</a></span>
<!-- Navbar Toggle -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu -->
<div class="collapse navbar-collapse" id="navbarSupportedContent" ;>
<!-- Menu list -->
<ul class="navbar-nav navbar-menu d-flex my-1 justify-content-center align-items-center w-100 list-unstyled"
;>
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active " aria-current="page" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link active " aria-current="page" href="#skills-section">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active " aria-current="page" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#contact">Contact</a>
</li>
<!-- Toggle swicth for -->
<li>
<div class="form-check form-switch theme">
<input class="form-check-input theme-toggle-inp" type="checkbox" checked="checked" role="switch"
id="flexSwitchCheckDefault" />
<label class="form-check-label theme-toggle" for="flexSwitchCheckDefault"><i class="bi bi-sun-fill sun"
;></i>
<i class="bi bi-moon-stars-fill moon" ;></i>
</label>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- End of header -->
<!-- Main content -->
<main class="main-content container-fluid">
<div class="smooth-content">
<!-- Start of Hero section -->
<section class="hero-section my-5" id="about">
<div class="hero">
<figure class="hero-section-figure">
<img class="hero-img img-fluid heroimg" src="/photos/her.png" />
</figure>
<article class="about-me">
<h3 class="about-me-header">About me</h3>
<div class="about-me-para">
<p>
I am a creative and detail-oriented web developer with a passion
for crafting engaging and user-friendly websites. My expertise
lies in HTML, CSS, JavaScript. I enjoy the process of
translating design concepts into functional and responsive
websites.
</p>
<p>
As a web developer, I am dedicated to continuous learning and
growth, always seeking to expand my knowledge and refine my
craft. I am excited about the possibilities of web development
and the opportunity to create impactful digital experiences that
resonate with users.
</p>
<div class="d-flex justify-content-center">
<button class="btn hero-btn">
<a href="#contact">Get in touch.</a>
</button>
</div>
<!-- <svg style="height:90px"; class="plane" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#f3f3f1" d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376l0 103.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"/></svg> -->
</div>
</article>
</div>
</section>
<!-- End of Hero section -->
<!-- Skills Section -->
<section id="skills-section">
<div class="skill">
<div class="skill-div">
<h3 class="mx-3">My Skills</h3>
<p class="mx-3">What my skills include?</p>
<p class="skill-para container-fluid">
I am a passionate web developer committed to delivering
high-quality websites that not only meet technical requirements
but also delight users with intuitive design and seamless
functionality.
</p>
<div class="form-check form-switch s">
<input class="form-check-input skills-tools-toggle" type="checkbox" role="switch"
id="flexSwitchCheckChecked" unchecked />
<label class="form-check-label skills-tools" for="flexSwitchCheckChecked"></label>
</div>
</div>
<figure class="skills-fig" id="skills-img">
<!-- Skills -->
<img src="/photos/html.png" style="height: 70px" class="p-2 skills html tooltip-bg" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="HTML" />
<img src="/photos/css.png" style="height: 70px" class="p-2 skills" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="CSS" />
<img src="/photos/js.png" style="height: 90px" class="p-2 skills" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="JS" />
<img src="/photos/bootstrap.png" style="height: 70px" class="p-2 skills" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="Bootsrap" />
<img src="/photos/tailwind.png" style="height: 50px" class="p-2 skills" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="tailwind" />
<img src="/photos/express.png" style="height: 60px" class="p-2 skills" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="expressJS" />
<img src="/photos/mysql.png" style="height: 70px" class="p-2 skills" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="MySQL" />
<!-- Tools -->
<img src="/photos/gitbash.png" style="height: 70px" class="p-2 tools hidden" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="Git Bash" />
<img src="/photos/github.png" style="height: 70px" class="p-2 tools hidden" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="Github" />
<img src="/photos/npm.png" style="height: 70px" class="p-2 tools hidden" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="npm" />
<img src="/photos/postman.png" style="height: 70px" class="p-2 tools hidden" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="postman" />
<img src="/photos/nodejs.png" style="height: 70px" class="p-2 tools hidden" data-bs-toggle="tooltip"
data-bs-placement="bottom" title="nodeJS" />
</figure>
</div>
</section>
<!-- End of skills section -->
<!-- Projects section -->
<section id="projects">
<h3 class="text-center mb-5">My Projects</h3>
<div class="d-flex flex-column justify-content-center align-items-center">
<div class="card text-center my-5">
<img src="/photos/project1.png" class="card-img-top" alt="project1" />
<div class="card-body">
<h5>FullStack-Wanderlust</h5>
<p class="card-text hide-p">
A small clone of Airbnb, using HTML, CSS, Javascript, Bootstrap, MongoDB, Node.js & Express.js.
</p>
<a href="https://delta-project-vz4s.onrender.com/listings" class="btn">Checkout!</a>
</div>
</div>
<div class="card text-center my-5">
<img src="/photos/project2.png" class="card-img-top" alt="project2" />
<div class="card-body">
<h5>Frontend- Spotify</h5>
<p class="card-text hide-p">Spotify homepage clone using HTML, CSS.</p>
<a href="https://delta-project-vz4s.onrender.com/listings" class="btn">Checkout!</a>
</div>
</div>
</div>
</section>
<!-- End of projects section -->
<!-- Contact section -->
<section id="contact">
<h3 class="contact-me">Contact me</h3>
<!-- Contact list -->
<div class="contact-me-content">
<ul class="contact-list">
<div>
<li>
<i class="bi bi-geo-alt-fill"></i>
Address:
</li>
<p>789 XXXXXXX, XXXXXXX, XX 2222, XXXXXXXXXX</p>
</div>
<div>
<li>
<i class="bi bi-telephone-fill"></i>
Phone:
</li>
<p>+9X-XXXXXXXXXX</p>
</div>
<div>
<li>
<i class="bi bi-envelope-fill"></i>
E-mail:
</li>
<p>LLLLLLLL@gmail.com</p>
</div>
</ul>
<div>
<div>
<form class="contact-form" method="POST" action="/sendmail">
<div class="row mb-3 d-flex flex-column">
<label for="name" class="col-sm col-form-label">Name</label>
<div class="col-sm-10">
<input name="name" value="name" type="text" class="form-control" id="name">
</div>
</div>
<div class="row mb-3 d-flex flex-column">
<label for="email" class="col-sm col-form-label">Email</label>
<div class="col-sm-10">
<input name="email" value="email" type="email" class="form-control" id="email">
</div>
</div>
<div class="row mb-3">
<label for="message" class=" col-sm colform-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" id="message" value="message" rows="3" name="message"></textarea>
</div>
</div>
<button type="submit" value="send" class="btn btn-primary sendmail">Send Mail</button>
</form>
</div>
</div>
</section>
<!-- End of contact section -->
<!-- footer -->
<footer id="footer">
<p>© L. All Rights Reserved.</p>
</footer>
<!-- End of footer -->
</div>
</main>
<!-- End of main -->
<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
<!-- Custom JS -->
<script type="module" src="/js/script.js"></script>
<script type="module" src="/app.js"></script>
</body>`Preformatted text`
</html>
index.js
const express = require('express');
const path = require('path');
const nodemailer = require('nodemailer');
const bodyparser = require('body-parser');
const app = express();
const port = 3000;
app.use(express.urlencoded({ extended: true }));
app.use(bodyparser.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static(path.join(__dirname, '/index.html')));
app.use(express.static(path.join(__dirname, '/public')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.get('/sendmail', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.post('/sendmail',(req,res)=>{
let {name, email, message} = req.body;
console.log(name, email, message);
const transporter = nodemailer.createTransport({
host: process.env.MAIL_HOST,
port: process.env.MAIL_PORT,
auth: {
user: process.env.MAIL_USER,
pass: process.env.MAIL_PASS
}
});
const mailOptions = {
from: email,
to: 'sasasa6697@gmail.com',
text: message
};
transporter.sendMail(mailOptions, (error, info)=>{
if(error){
console.log("error");
} else {
console.log("Email sentt!," , info.response);
}
res.redirect('/');
})
})
app.listen(port,()=>{
console.log(`Listentining on port ${port}`);
})
package.json
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^5.3.4"
},
"dependencies": {
"body-parser": "^1.20.2",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"gsap": "^3.12.5",
"gsap-trial": "^3.12.5",
"nodemailer": "^6.9.14",
"path": "^0.12.7"
}
}