{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="profile">
<meta name="author" content="Joshua Panettieri">
<title>JPanettieri</title>
<link rel="icon" type="image/x-icon" href="media/Flavicon.ico">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href=" {% static '/css/site.css' %} ">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header class="site-header sticky-top" style="margin: 5px;">
<nav id="navbar" class="my-navbar navbar-light px-3" style="border-radius: 10px;">
<a id="index-brand" class="my-navbar-brand" href="#" style="color:#fff;">
Ideas to Applications - My Portfolio
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a id="nav-about" class="nav-links" href="#scrollspyAboutMe">About Me</a>
</li>
<li class="nav-item">
<a id="nav-projects" class="nav-links" href="#scrollspyProjects">Projects</a>
</li>
<li class="nav-item">
<a id="nav-skills" class="nav-links" href="#scrollspySkills">Skills</a>
</li>
<li class="nav-item">
<a id="nav-connect" class="nav-links" href="#scrollspyContactMe">Let's Connect</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="0" class="scrollspy" tabindex="0">
</header>
<main>
{% comment %} About me section {% endcomment %}
<h4 id="scrollspyAboutMe"></h4>
<div id="leaves" class="position-relative overflow-hidden pt-4 p-2 p-md-4 m-md-2 text-center bg-light" style="top: 5%;">
<div class="col-md-8 p-lg-5 mx-auto my-5">
<h1 id="about-title" class="hidden display-4 fw-normal">From Code to Crops: <br> The Story of Joshua Panettieri.</h1>
<p id="about-body" class="hidden lead fw-normal">A jack-of-all-trades with a green thumb and a tech savvy mind, I bring my unique blend of skills to the agriculture and tech world.
When I'm not coding up a storm or tending to my crops, you can find me bonding with my family and spreading the gospel of regenerative agriculture.
Let's just say, I'm the ultimate farm-to-table enthusiast, but with a side of geek.
Join me in my mission to make the world a healthier and happier place, one seed at a time.</p>
<a class="btn-outline-cdark" href="https://www.linkedin.com/in/joshua-panettieri/" target="_blank">Linkedin</a>
<a class="btn-outline-cdark" href="https://github.com/JPanettieri" target="_blank">GitHub</a>
</div>
</div>
{% comment %} Projects Section {% endcomment %}
<h4 id="scrollspyProjects"></h4>
<div class="position-relative overflow-hidden pt-4 p-2 p-md-4 m-md-2 text-center bg-light">
<div class="col-md-12 p-lg-5 mx-auto my-5">
<h1 id="about-title" class="hidden display-4 fw-normal">Projects</h1>
<a class="btn-outline-cdark" target="_blank" href="https://gitfront.io/r/user-2387435/uK5cbmzJQkWd/myWebsite/">Take a peek at this Websites code on Github</a>
<div class="d-md-flex flex-md-equal w-100 h-600 my-md-3 ps-md-3">
<div id="project1" class="me-md-3 pt-3 pb-3 px-3 pt-md-5 px-md-5 overflow-hidden">
<div id="p1-container" class="hidden my-3 py-3">
{% for i in project1 %}
<div class="project-grid-long">
<h2 id="project-title" class="display-5">{{i.name}}</h2>
<p id="project-description" class="lead">{{i.description}}</p>
<a id="project-demo-button" class="btn-outline-clight" href="{{i.demo}}" target="_blank">Demo</a>
<a id="project-code-button" class="btn-outline-clight" href="{{i.code}}" target="_blank">Source Code</a>
<img id="project-img-long" src="media/{{i.image}}" class="figure-img img-fluid rounded" alt="Project 2">
<img id="project-tech-long" src="media/{{i.tech}}" class="pulse figure-img img-fluid rounded" alt="Project 2" >
</div>
</div>
{% endfor %}
</div>
<div id="project2" class="me-md-3 pt-3 pb-3 px-3 pt-md-5 px-md-5 overflow-hidden">
<div id="p2-container" class="hidden my-3 py-3">
{% for i in project2 %}
<div class="project-grid-wide">
<h2 id="project-title" class="display-5">{{i.name}}</h2>
<p id="project-description" class="lead">{{i.description}}</p>
<a id="project-demo-button" class="btn-outline-cdark" href="{{i.demo}}" target="_blank">Demo</a>
<a id="project-code-button" class="btn-outline-cdark" href="{{i.code}}" target="_blank">Source Code</a>
<img id="project-img" src="media/{{i.image}}" class="figure-img img-fluid rounded" alt="Project 2">
<img id="project-tech" src="media/{{i.tech}}" class="pulse figure-img img-fluid rounded" alt="Project 2" >
</div>
</div>
{% endfor %}
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
<div id="project3" class="me-md-3 pt-3 pb-3 px-3 pt-md-5 px-md-5 overflow-hidden">
<div id="p3-container" class="hidden my-3 py-3">
{% for i in project3 %}
<div class="project-grid-wide">
<h2 id="project-title" class="display-5">{{i.name}}</h2>
<p id="project-description" class="blur lead">{{i.description}}</p>
{% comment %}
<a id="project-demo-button" class="blur btn-outline-cdark" href="{{i.demo}}" target="_blank">Demo</a>
<a id="project-code-button" class="blur btn-outline-cdark" href="{{i.code}}" target="_blank">Source Code</a>
<img id="project-img" src="media/{{i.image}}" class=" blur figure-img img-fluid rounded" alt="Project 3">
<img id="project-tech" src="media/{{i.tech}}" class="blur pulse figure-img img-fluid rounded" alt="Project 3" >
{% endcomment %}
</div>
</div>
{% endfor %}
</div>
<div id="project4" class="me-md-3 pt-3 pb-3 px-3 pt-md-5 px-md-5 overflow-hidden">
<div id="p4-container" class="hidden my-3 py-3">
{% for i in project4 %}
<div class="project-grid-wide">
<h2 id="project-title" class="display-5">{{i.name}}</h2>
<p id="project-description" class="blur lead">{{i.description}}</p>
{% comment %}
<a id="project-demo-button" class="blur btn-outline-clight" href="{{i.demo}}" target="_blank">Demo</a>
<a id="project-code-button" class="blur btn-outline-clight" href="{{i.code}}" target="_blank">Source Code</a>
<img id="project-img" src="media/{{i.image}}" class="blur figure-img img-fluid rounded" alt="Project 4" >
<img id="project-tech" src="media/{{i.tech}}" class="blur pulse figure-img img-fluid rounded" alt="Project 4" >
{% endcomment %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% comment %} skills image {% endcomment %}
<h4 id="scrollspySkills"></h4>
<div class="position-relative overflow-hidden pt-4 p-2 p-md-4 m-md-2 text-center bg-light">
<div class="col-md-12 p-lg-5 mx-auto my-5">
<div class="skill-grid">
<h1 id="skill-title" class="hidden"> Skills</h1>
<div id="skill-tech-left"class="tech-grid">
<p id="tech-frontend" class="hidden display-5">Frontend</p>
<img id="tech1" class="tech-img" src="media/bootstrap.png" alt="bootstrap" >
<img id="tech2" class="tech-img" src="media/xml.png" alt="xml" >
<img id="tech3" class="tech-img" src="media/css.png" alt="css" >
<img id="tech4" class="tech-img" src="media/html.png" alt="html" >
<img id="tech5" class="tech-img" src="media/kotlin.png" alt="kotlin" >
<img id="tech6" class="tech-img" src="media/asp-net.png" alt="asp.net">
</div>
<img id="skill-tree" src="media/naturalTree.png" alt="Tree of Skill">
<div id="skill-tech-right" class="tech-grid">
<p id="tech-backend" class="hidden display-5">Backend</p>
<img id="tech1" class="tech-img" src="media/JS.png" alt="js" >
<img id="tech2" class="tech-img" src="media/python.png" alt="python" >
<img id="tech3" class="tech-img" src="media/MSSQL.png" alt="mssql" >
<img id="tech4" class="tech-img" src="media/c-sharp.png" alt="csharp" >
<img id="tech5" class="tech-img" src="media/django.png" alt="django" >
<img id="tech6" class="tech-img" src="media/docker.png" alt="docker" >
</div>
<p id="skill-quote" class="hidden">
"Much like a tree that grows, expanding and branching out with each passing day, so too are my skills"
</p>
</div>
</div>
</div>
<h4 id="scrollspyContactMe"></h4>
<div class="position-relative overflow-hidden pt-4 p-2 p-md-4 m-md-2 text-center bg-light">
<div class="col-md-6 p-lg-5 mx-auto my-5">
<div class="bg-gdark rb10 p-3 text-center text-white text-black overflow-hidden">
<h3 id="contact-title" class="hidden display-5">Let's Connect!</h3>
<button id="contactMeBtn" class="btn-outline-cdark">I want to contact you</button>
<button id="contactYouBtn" class="btn-outline-cdark">I want you to contact me</button>
</div>
<br>
<form id="contactYou" class="contact position-relative overflow-hidden pt-2 p-2 text-center text-white" method="post">{% csrf_token %}
<div class="form-group" >
<h3 class="display-5">I'll Contact You</h3>
<label for="fname">Name:</label>
<input name='cname' type="text" class="form-control" id="fname" required>
<label for="femail">Email:</label>
<input name='cemail'type="email" class="form-control" id="femail" required>
<label for="fphone">Phone:</label>
<input name='cphone'type="text" class="form-control" id="fphone" required>
<label for="fmessage">Message:</label>
<textarea name='cmessage' class="form-control" id="fmessage" rows="5" required></textarea>
<button type="submit" class="btn-outline-cdark" value="Submit">Submit</button>
</div>
</form>
<form id="contactMe" class="contact position-relative overflow-hidden pt-2 p-2 text-center text-white" method="post">
<ul class="list-group">
<h3 class="display-5">Contact Me</h3>
<li class="list-group-item">Joshua Panettieri</li>
<li class="list-group-item">connect@jpanettieri.dev</li>
<li class="list-group-item">https://www.linkedin.com/in/joshua-panettieri/</li>
<li class="list-group-item">+61 0430016527</li>
</ul>
</div>
</div>
</div>
</div>
{% if show_modal %}
<script>
$(document).ready(function(){
$("#contactFormModal").modal("show");
show_modal = False
});
</script>
{% endif %}
<!-- Modal -->
<div class="modal fade" id="contactFormModal" tabindex="-1" aria-labelledby="contactModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Contact Sent Successfully</h5>
</div>
<div class="modal-body">
Thank you for contacting me, I will be in touch as soon as posible.
</div>
<div class="modal-footer">
<button type="button" class="btn-outline-clight" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% comment %}
<div id="cookie-popup" class="cookie-popup">
<div class="cookie-popup-content">
<p>We use cookies to ensure that we give you the best experience on our website. Please enable cookies in your browser settings to continue using our site.</p>
<button id="cookie-popup-accept" class="cookie-popup-accept">Enable Cookies</button>
</div>
</div>
<script>
// Get the popup element
var cookiePopup = document.getElementById("cookie-popup");
// Get the accept button
var acceptButton = document.getElementById("cookie-popup-accept");
// Add an event listener to the accept button
acceptButton.addEventListener("click", function() {
// Set a cookie to indicate that the user has accepted cookies
document.cookie = "cookies_accepted=true; path=/";
// Hide the popup
cookiePopup.style.display = "none";
});
// Show the popup if the user hasn't accepted cookies yet
if (document.cookie.indexOf("cookies_accepted=true") == -1) {
cookiePopup.style.display = "block";
}
</script> {% endcomment %}
<footer>
<div class="footer-left">
<img src="media/Brand.png" alt="Brand logo">
<p>© 2023 JPanetieri</p>
</div>
<div class="footer-right">
<a href="https://github.com" target="_blank"><img src="media/github-white.png" alt="GitHub"></a>
<a href="https://www.linkedin.com" target="_blank"><img src="media/linkedin-white.png" alt="LinkedIn"></a>
</div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
{% comment %} Create the correct amount of I elements for the falling leaves animation {% endcomment %}
<script>
var x = Math.floor(0.04 * window.innerWidth);
for (var i = 0; i < x; i++) {
var node = document.createElement("I");
var firstChild = document.getElementById("leaves").firstChild;
document.getElementById("leaves").insertBefore(node, firstChild);
}
</script>
<script>
document.getElementById("contactMeBtn").addEventListener("click", function() {
document.getElementById("contactMe").style.display = "block";
document.getElementById("contactYou").style.display = "none";
});
document.getElementById("contactYouBtn").addEventListener("click", function() {
document.getElementById("contactYou").style.display = "block";
document.getElementById("contactMe").style.display = "none";
});
</script>
<script>
{% verbatim %}
const scroll = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => scroll.observe(el));
{% endverbatim %}
</script>
<script>
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() < 768) {
$('#p3-container #project-demo-button').removeClass('btn-outline-cdark');
$('#p3-container #project-demo-button').addClass('btn-outline-clight');
$('#p3-container #project-code-button').removeClass('btn-outline-cdark');
$('#p3-container #project-code-button').addClass('btn-outline-clight');
$('#p4-container #project-demo-button').removeClass('btn-outline-clight');
$('#p4-container #project-demo-button').addClass('btn-outline-cdark');
$('#p4-container #project-code-button').removeClass('btn-outline-clight');
$('#p4-container #project-code-button').addClass('btn-outline-cdark');
} else {
$('#p3-container #project-demo-button').removeClass('btn-outline-clight');
$('#p3-container #project-demo-button').addClass('btn-outline-cdark');
$('#p3-container #project-code-button').removeClass('btn-outline-clight');
$('#p3-container #project-code-button').addClass('btn-outline-cdark');
$('#p4-container #project-demo-button').removeClass('btn-outline-cdark');
$('#p4-container #project-demo-button').addClass('btn-outline-clight');
$('#p4-container #project-code-button').removeClass('btn-outline-cdark');
$('#p4-container #project-code-button').addClass('btn-outline-clight');
}
});
</script>