101 lines
5.1 KiB
HTML
101 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Your Name | Portfolio</title>
|
|
<link rel="stylesheet" href="../css/about.css">
|
|
</head>
|
|
<body>
|
|
<main class="portfolio">
|
|
<!-- Intro Section -->
|
|
<section class="portfolio__section portfolio__section--intro">
|
|
<div class="content">
|
|
<h1 class="intro-title">Hello, I'm <span class="highlight">Your Name</span></h1>
|
|
<p class="intro-subtitle">Job Title / Profession</p>
|
|
<div class="social-links">
|
|
<a href="#" target="_blank" class="social-link">LinkedIn</a>
|
|
<a href="#" target="_blank" class="social-link">GitHub</a>
|
|
<a href="#" target="_blank" class="social-link">Twitter</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-image" style="background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg')"></div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section class="portfolio__section">
|
|
<div class="content">
|
|
<h2 class="section-title">About Me</h2>
|
|
<div class="about-content">
|
|
<div class="about-text">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</p>
|
|
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.</p>
|
|
</div>
|
|
<div class="about-image">
|
|
<img src="https://viewpointservices.com/wp-content/uploads/2019/07/GettyImages-1142192666-1.jpg" alt="Your Name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-image" style="background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg')"></div>
|
|
</section>
|
|
|
|
<!-- Experience Section -->
|
|
<section class="portfolio__section">
|
|
<div class="content">
|
|
<h2 class="section-title">Experience</h2>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<h3 class="timeline-title">Senior Developer</h3>
|
|
<p class="timeline-company">Tech Company Inc. (2020-Present)</p>
|
|
<p class="timeline-description">Lead developer for web applications.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<h3 class="timeline-title">Web Developer</h3>
|
|
<p class="timeline-company">Digital Agency (2017-2020)</p>
|
|
<p class="timeline-description">Front-end development and UX design.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-image" style="background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg')"></div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section class="portfolio__section">
|
|
<div class="content">
|
|
<h2 class="section-title">Projects</h2>
|
|
<div class="projects-grid">
|
|
<div class="project-card">
|
|
<h3 class="project-title">Project 1</h3>
|
|
<p class="project-description">Description of project and technologies used.</p>
|
|
<a href="#" class="project-link">View Project</a>
|
|
</div>
|
|
<div class="project-card">
|
|
<h3 class="project-title">Project 2</h3>
|
|
<p class="project-description">Description of project and technologies used.</p>
|
|
<a href="#" class="project-link">View Project</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-image" style="background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg')"></div>
|
|
</section>
|
|
|
|
<!-- Contact/Footer Section -->
|
|
<section class="portfolio__section portfolio__section--footer">
|
|
<div class="content">
|
|
<h2 class="section-title">Get In Touch</h2>
|
|
<div class="contact-info">
|
|
<p>Email: <a href="mailto:you@example.com">you@example.com</a></p>
|
|
<p>Phone: (123) 456-7890</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="#" class="footer-link">Resume (PDF)</a>
|
|
<a href="#" class="footer-link">GitHub</a>
|
|
<a href="#" class="footer-link">LinkedIn</a>
|
|
</div>
|
|
<p class="copyright">© 2023 Your Name. All rights reserved.</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<script src="../js/smoothscroll.js" defer></script>
|
|
</body>
|
|
</html> |