Certainly! Here’s a simple HTML/CSS/JavaScript script for a basic personal portfolio website. This type of website can showcase your work, projects, and skills. You can customize the content as needed.
### HTML Structure (`index.html`)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://gfy.com/" /><!--[if IE]></base><![endif]-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name | Portfolio</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<nav>
<h1>Your Name</h1>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Brief information about you goes here. Your background, interests, and skills.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>Project Title 1</h3>
<p>Description of your project...</p>
<a href="#">View Project</a>
</div>
<div class="project">
<h3>Project Title 2</h3>
<p>Description of your project...</p>
<a href="#">View Project</a>
</div>
<!-- Add more projects as needed -->
</section>
<section id="contact">
<h2>Contact</h2>
<form id="contact-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<footer>
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
```
### CSS Styling (`styles.css`)
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 10px 20px;
}
nav h1 {
display: inline;
}
nav ul {
list-style: none;
float: right;
}
nav ul li {
display: inline;
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px 0;
}
.project {
margin: 20px 0;
padding: 10px;
border: 1px solid #ccc;
}
footer {
text-align: center;
padding: 10px;
background: #333;
color: #fff;
}
```
### JavaScript Functionality (`script.js`)
```javascript
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
alert('Thank you for your message! We will get back to you soon.');
this.reset();
});
```
### Instructions:
1. Create a new folder for your project.
2. Inside that folder, create three files: `index.html`, `styles.css`, and `script.js`.
3. Copy and paste the code into the respective files.
4. Open `index.html` in a web browser to view your portfolio website.
5. Customize the content (name, projects, etc.) as needed!
This is a basic template to get you started. You can expand and enhance it by adding more features, such as a gallery for your projects, social media links, or incorporating a responsive design with media queries.