Scribd
Upload
9 views3 pages

!Doctype HTML

This document is an HTML template for a portfolio website belonging to John Doe, a full stack developer with over 3 years of experience. It includes sections for an about description, technical skills, featured projects, and a contact form. The design incorporates modern web technologies and is structured for user engagement.

Uploaded by

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

!Doctype HTML

This document is an HTML template for a portfolio website belonging to John Doe, a full stack developer with over 3 years of experience. It includes sections for an about description, technical skills, featured projects, and a contact form. The design incorporates modern web technologies and is structured for user engagement.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe | Portfolio</title>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header Section -->
<header class="sticky-header">
<h1 class="logo">John Doe</h1>
<nav>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- About Section -->


<section id="about" class="section">
<div class="about-container">
<div class="profile-img">
<img src="profile-placeholder.jpg" alt="John Doe Profile Picture">
</div>
<div class="bio">
<h2>Full Stack Developer</h2>
<p>With 3+ years of experience building web applications using
modern technologies. Passionate about creating responsive, user-friendly websites
and continuously learning new skills.</p>
<div class="details">
<p><strong>Location:</strong> New York, USA</p>
<p><strong>Interests:</strong> Web Development, Open Source,
Photography</p>
</div>
</div>
</div>
</section>

<!-- Skills Section -->


<section id="skills" class="section bg-light">
<h2 class="section-title">Technical Skills</h2>
<ul class="skills-list">
<li>
<span>HTML5</span>
<div class="skill-bar"><div class="skill-progress
html">90%</div></div>
</li>
<li>
<span>CSS3</span>
<div class="skill-bar"><div class="skill-progress
css">85%</div></div>
</li>
<li>
<span>JavaScript</span>
<div class="skill-bar"><div class="skill-progress
js">75%</div></div>
</li>
<li>
<span>React</span>
<div class="skill-bar"><div class="skill-progress
react">70%</div></div>
</li>
<li>
<span>Node.js</span>
<div class="skill-bar"><div class="skill-progress
node">65%</div></div>
</li>
</ul>
</section>

<!-- Projects Section -->


<section id="projects" class="section">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-grid">
<article class="project-card">
<img src="project1.jpg" alt="E-commerce Platform" class="project-
image">
<h3>E-commerce Platform</h3>
<p>Full-stack e-commerce solution with React and Node.js</p>
<a href="#" class="project-link">View Project →</a>
</article>
<article class="project-card">
<img src="project2.jpg" alt="Task Management App" class="project-
image">
<h3>Task Manager</h3>
<p>Real-time collaborative task management application</p>
<a href="#" class="project-link">View Project →</a>
</article>
</div>
</section>

<!-- Contact Section -->


<section id="contact" class="section bg-light">
<h2 class="section-title">Get In Touch</h2>
<form class="contact-form">
<div class="form-group">
<input type="text" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" placeholder="Email" required>
</div>
<div class="form-group">
<textarea placeholder="Message" rows="5" required></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</section>

<!-- Footer -->


<footer>
<p>Created by John Doe</p>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</footer>
</body>
</html>

You might also like