Portfolio Website Builder | HTML CSS JavaScript

Portfolio Website Builder with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #10

Project Overview

A simple Portfolio Website Builder built using HTML, CSS, and JavaScript with a modern and responsive interface. The tool allows users to enter their personal information, skills, projects, and contact details to instantly generate a personal portfolio website. It demonstrates frontend concepts such as dynamic content generation, form handling, DOM manipulation, and responsive design, making it a useful project for beginners learning how website builders work.

Key Features

Input form to add personal details and portfolio information
Automatic generation of a personal portfolio webpage
Display skills as interactive tags
Project section to showcase user projects
Responsive layout suitable for desktop and mobile devices
Clean and modern portfolio design
Smooth navigation between sections
Interactive UI powered by JavaScript

HTML Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Premium Portfolio Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="center">
  <div class="form-box">
    <h2>Create Your Premium Portfolio</h2>

    <input id="name" placeholder="Your Name">
    <input id="role" placeholder="Your Role">
    <textarea id="about" placeholder="About You"></textarea>
    <textarea id="skills" placeholder="Skills (comma separated)"></textarea>
    <textarea id="projects" placeholder="Projects (comma separated)"></textarea>
    <input id="email" placeholder="Your Email">

    <button onclick="createWebsite()">Create Website</button>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS Code

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

body{
font-family:'Segoe UI',sans-serif;
background:#0f172a;
color:white;
}

/* FORM UI */

.center{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.form-box{
background:#1e293b;
padding:30px;
border-radius:12px;
width:380px;
display:flex;
flex-direction:column;
gap:10px;
}

input,textarea{
padding:10px;
border:none;
border-radius:6px;
}

textarea{
height:70px;
resize:none;
}

button{
padding:10px;
border:none;
border-radius:6px;
background:#3b82f6;
color:white;
font-weight:bold;
cursor:pointer;
}

button:hover{
background:#2563eb;
}

/* GENERATED WEBSITE */

nav{
position:fixed;
top:0;
width:100%;
background:rgba(15,23,42,0.9);
padding:15px 40px;
display:flex;
justify-content:space-between;
backdrop-filter:blur(10px);
z-index:1000;
}

nav a{
color:white;
text-decoration:none;
margin-left:20px;
}

.hero{
height:800px;
background:linear-gradient(135deg,#3b82f6,#9333ea);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size: 40px;
}

section{
padding:100px 40px;
max-width:1000px;
margin:auto;
}

section#skills, section#projects, section#contact {
    padding-top: 0px;
}


.skills span{
display:inline-block;
background:#3b82f6;
padding:8px 15px;
margin:8px;
border-radius:30px;
transition:0.3s;
}

.skills span:hover{
background:#2563eb;
transform:scale(1.1);
}

.project{
background:#1e293b;
padding:20px;
margin-top:20px;
border-radius:10px;
transition:0.3s;
}

.project:hover{
transform:translateY(-5px);
background:#334155;
}

.contact{
text-align:center;
}

Javascript Code

function createWebsite(){

const name=document.getElementById("name").value || "Your Name"
const role=document.getElementById("role").value || "Your Role"
const about=document.getElementById("about").value || "About you"
const email=document.getElementById("email").value || "example@email.com"

const skills=document.getElementById("skills").value
.split(",")
.filter(s=>s.trim()!=="")
.map(s=>`<span>${s.trim()}</span>`)
.join("")

const projects=document.getElementById("projects").value
.split(",")
.filter(p=>p.trim()!=="")
.map(p=>`<div class="project">${p.trim()}</div>`)
.join("")

document.body.innerHTML=`

<nav>
<div><strong>${name}</strong></div>

<div>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
</nav>


<div class="hero">
<h1>${name}</h1>
<h3>${role}</h3>
</div>


<section id="about">
<h2>About Me</h2>
<p>${about}</p>
</section>


<section id="skills">
<h2>Skills</h2>
<div class="skills">
${skills}
</div>
</section>


<section id="projects">
<h2>Projects</h2>
${projects}
</section>


<section id="contact" class="contact">
<h2>Contact</h2>
<p>Email: ${email}</p>
</section>

`

}