mirror of
https://github.com/emmabostian/developer-portfolios.git
synced 2025-04-21 05:38:01 +00:00
183 lines
8.9 KiB
HTML
183 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jonathan Peters | Front-End Developer</title>
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<!-- Header Section -->
|
|
<header>
|
|
<div id="particles-js"></div>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<h1>Jonathan Peters</h1>
|
|
<p class="subtitle">Front-End Developer</p>
|
|
</div>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#projects">Projects</a></li>
|
|
<li><a href="#skills">Skills</a></li>
|
|
<li><a href="#tools">Tools</a></li>
|
|
<li><a href="#about">About Me</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h2>Creating <span class="highlight">Beautiful</span> & <span class="highlight">Functional</span> Web Experiences</h2>
|
|
<p>I'm a passionate front-end developer specializing in creating responsive, user-friendly websites and applications.</p>
|
|
<div class="hero-buttons">
|
|
<a href="#projects" class="btn primary-btn">View My Work</a>
|
|
<a href="#contact" class="btn secondary-btn">Get In Touch</a>
|
|
<a href="JonathanPetersCV.pdf" download class="btn download-cv-btn">Download CV</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="projects" class="projects-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>My Projects</h2>
|
|
<p>Explore some of my recent work</p>
|
|
</div>
|
|
<div class="projects-grid" id="projects-container">
|
|
<!-- Projects will be loaded via JavaScript -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Skills Section -->
|
|
<section id="skills" class="skills-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>My Skills</h2>
|
|
<p>Technical proficiency and expertise</p>
|
|
</div>
|
|
<div class="skills-content" id="skills-container">
|
|
<!-- Skills will be loaded via JavaScript -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tools Section -->
|
|
<section id="tools" class="tools-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Languages & Tools</h2>
|
|
<p>Technologies I work with</p>
|
|
</div>
|
|
<div class="tools-grid" id="tools-container">
|
|
<!-- Tools will be loaded via JavaScript -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="about-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>About Me</h2>
|
|
<p>Get to know me better</p>
|
|
</div>
|
|
<div class="about-content">
|
|
<div class="about-text">
|
|
<p>Hi, I'm Jonathan Peters, a front-end developer passionate about creating beautiful and functional web experiences. With expertise in HTML, CSS, JavaScript, and various frameworks, I strive to build responsive and user-friendly websites and applications.</p>
|
|
<p>I have 3+ years experience & I have completed the <a href="https://www.freecodecamp.org/learn/responsive-web-design/" target="_blank">Responsive Web Design</a> & the <a href="https://www.freecodecamp.org/learn/data-visualization/" target="_blank">Data Visualizations</a> course on freeCodeCamp, as well as <a href="https://www.bitdegree.org/courses/user/djjonnas/certificates" target="_blank">Front End Development</a> courses on Bitdegree.</p>
|
|
<p>I am currently pursuing courses in Backend Development: Node JS, Express, Python & React.</p>
|
|
<p>My journey in web development started with a curiosity for how things work on the internet, which quickly turned into a passion for creating my own digital experiences. I continuously learn and adapt to stay updated with the latest technologies and best practices in the industry.</p>
|
|
<p>When I'm not coding, you might find me exploring new design trends, contributing to open-source projects, or experimenting with new technologies to enhance my skill set.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="contact-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Get In Touch</h2>
|
|
<p>Let's work together on your next project</p>
|
|
</div>
|
|
<div class="contact-content">
|
|
<div class="contact-form">
|
|
<form id="contact-form">
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" name="user_name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="user_email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" rows="5" required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn primary-btn submit-btn" id="submit-btn">
|
|
<span>Send Message</span>
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
<div id="email-status" class="email-status"></div>
|
|
</form>
|
|
</div>
|
|
<div class="contact-info">
|
|
<div class="contact-item">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>jonathanpeters051@gmail.com</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<i class="fas fa-phone"></i>
|
|
<span>+27661199255</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>George, Western Cape. South Africa</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Section -->
|
|
<footer>
|
|
<div id="footer-particles-js"></div>
|
|
<div class="container">
|
|
<div class="social-links" id="social-links-container">
|
|
<!-- Social links will be loaded via JavaScript -->
|
|
</div>
|
|
<div class="footer-text">
|
|
<p>© 2025 Jonathan Peters. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Notification for CV download -->
|
|
<div class="notification" id="cv-notification">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>CV downloaded successfully!</span>
|
|
</div>
|
|
|
|
<!-- EmailJS script -->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
|
|
<!-- Particles.js script -->
|
|
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |