Skip to content

Commit

Permalink
SEO Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Chad probert committed Oct 22, 2024
1 parent 647ba4f commit 4088a15
Showing 1 changed file with 2 additions and 343 deletions.
345 changes: 2 additions & 343 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,347 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta
name="description"
content="Chad Probert - Full Stack Developer specializing in React, Node.js, and Python. Expert in web development, software engineering, and coding mentorship. View my portfolio and contact me for collaboration opportunities."
/>
<meta
name="keywords"
content="full stack developer, software engineer, web development, React, Node.js, Python, JavaScript, MongoDB, coding mentor"
/>
<meta name="robots" content="index, follow" />
<!-- Open Graph Tags -->
<meta property="og:type" content="website" />
<meta
property="og:title"
content="Chad Probert | Full Stack Developer & Software Engineer Portfolio"
/>
<meta
property="og:description"
content="Experienced full stack developer and coding mentor specialising in React, Node.js, and Python. View my projects and get in touch for collaboration opportunities."
/>
<meta
property="og:image"
content="https://chadprobert.github.io/images/me3.jpg"
/>
<meta property="og:url" content="https://chadprobert.github.io/" />
<meta property="og:site_name" content="Chad Probert Portfolio" />
<!-- Enhanced Twitter Sharing Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Chad Probert | Full Stack Developer & Software Engineer"
/>
<meta
name="twitter:description"
content="Full stack developer and coding mentor specializing in React, Node.js, and Python. Explore my portfolio and projects."
/>
<meta
name="twitter:image"
content="https://chadprobert.github.io/images/me3.jpg"
/>
<link rel="canonical" href="https://chadprobert.github.io/" />
<!-- Favicon with different icons -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../images/cp-logo.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="../images/cp-logo.png"
/>
<link rel="apple-touch-icon" sizes="180x180" href="../images/cp-logo.png" />
<title>
Chad Probert | Full Stack Web Developer & Software Engineer | Portfolio
</title>
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />


<!-- Loading CSS files -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="preload" href="./css/index/index.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<link
rel="stylesheet"
href="./css/index/features/mobile.min.css"
/>
<link rel="preload" href="./css/index/features/dark-mode.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<link rel="preload" href="./css/index/features/animations.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<!-- Inline critical CSS -->
<style>
body {
padding-top: 50px;
text-align: center;
background-color: #f5f6f7;
color: #222;
font-family: Poppins, sans-serif;
margin: 0;
}
h1 {
font-family: Inter, sans-serif;
font-weight: 800;
line-height: 99px;
font-size: 80px;
letter-spacing: -1px;
}
</style>
</head>
<body>
<div class="con">
<!-- dark mode toggle -->
<input
type="checkbox"
id="dark-mode-toggle"
aria-label="Toggle dark mode"
/>
<label for="dark-mode-toggle" id="dark-mode-label" class="dark-mode-label"
>Dark Mode</label
><!-- header -->
<header role="banner">
<h1>Chad Probert</h1>
<h3 class="roleHeading">
Full Stack Web Developer & Software Engineer
</h3>
</header>
<!-- social icons -->
<nav aria-label="Social media links">
<ul class="socialIcons">
<li class="githubIcon socialIcon">
<a
href="https://github.com/ChadProbert"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub Profile"
class="githubIcon"
><iconify-icon icon="jam:github" aria-hidden="true"></iconify-icon
></a>
</li>
<li class="whatsappIcon socialIcon">
<a
href="https://wa.me/+27609849667"
target="_blank"
rel="noopener noreferrer"
aria-label="WhatsApp Contact"
class="whatsappIcon"
><iconify-icon
icon="uim:whatsapp"
aria-hidden="true"
></iconify-icon
></a>
</li>
<li class="linkedinIcon socialIcon">
<a
href="https://www.linkedin.com/in/chad-probert-6421b321b/"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn Profile"
class="linkedinIcon"
><iconify-icon
icon="uil:linkedin"
aria-hidden="true"
></iconify-icon
></a>
</li>
</ul>
</nav>
<!-- avatar image -->
<img
src="./images/me3.jpg"
alt="Chad Probert's portfolio picture"
width="150"
height="150"
class="avatar"
loading="lazy"
/><!-- navigation bar-->
<div class="row navWrapper">
<nav aria-label="Main navigation">
<ul class="routes">
<li class="navItem">
<a href="./index.html" class="navLink" aria-current="page"
><i
class="fa-solid fa-person-rays fa-flip"
aria-hidden="true"
></i>
ABOUT ME</a
>
</li>
<li class="navItem">
<a href="./projects.html" class="navLink"
><i class="fa-solid fa-folder" aria-hidden="true"></i>
PROJECTS</a
>
</li>
<li class="navItem">
<a href="./contact.html" class="navLink"
><i class="fa-solid fa-address-book" aria-hidden="true"></i>
CONTACT ME</a
>
</li>
</ul>
</nav>
</div>
<main id="main-content">
<!-- about me section -->
<section class="aboutMeDiv">
<div class="aboutMeContent">
<h2 class="aboutMeHeading">About Me</h2>
<p class="aboutMeText">
I am a full-stack web developer, coding mentor and software
engineer with a passion for learning and creating. I aspire to
combine my passions and understanding of technological advancement
to develop and maintain websites, web applications and software
that people can become fully immersed in and will find joy in
utilising.
</p>
</div>
</section>
<!-- education, skills & experience section -->
<div class="row extraInfo">
<!-- left column -->
<div class="col-md-4 education">
<h3 class="educationHeading">Education</h3>
<h5 class="educationItem">CS50 Programming with Python</h5>
<p>
edX<br />Online Course<br />In progress<i
class="fa-solid fa-spinner fa-spin"
></i>
</p>
<br />
<h5 class="educationItem">Software Engineering</h5>
<p>
HyperionDev<br />Online Bootcamp<br />Completed in October 2024
</p>
<br />
<h5 class="educationItem">Full Stack Web Development</h5>
<p>
HyperionDev<br />Online Bootcamp<br />Completed in January 2023
</p>
<br />
<h5 class="educationItem">Basic Fire Fighting</h5>
<p>Online Course<br />Completed in 2021</p>
<br />
<h5 class="educationItem">Pearson High School</h5>
<p>Summerstrand, Port Elizabeth, South Africa<br />2015 - 2019</p>
</div>
<!-- middle column -->
<div class="col-md-4 skills">
<h3 class="skillsHeading">
<i class="fa-solid fa-code"></i> Skills & Competencies
</h3>
<ul class="skillsItem">
<li class="slide-left">
<iconify-icon icon="skill-icons:html"></iconify-icon>HTML
</li>
<li class="slide-left">
<iconify-icon icon="skill-icons:css"></iconify-icon>CSS
</li>
<li class="slide-left">
<iconify-icon icon="skill-icons:javascript"></iconify-icon
>JavaScript
</li>
<li class="slide-left">
<iconify-icon icon="skill-icons:react-dark"></iconify-icon>React
</li>
<li class="slide-left">
<iconify-icon icon="skill-icons:expressjs-light"></iconify-icon
>Express.js
</li>
<li class="slide-left">
<iconify-icon icon="logos:nodejs-icon-alt"></iconify-icon
>Node.js
</li>
<li class="slide-left">
<iconify-icon icon="skill-icons:mongodb"></iconify-icon>MongoDB
</li>
<li class="slide-left">
<iconify-icon icon="logos:python"></iconify-icon>Python
</li>
<li class="slide-left">
<i class="fa-solid fa-database"></i> SQL
</li>
<li class="slide-right">
<iconify-icon icon="skill-icons:git"></iconify-icon>Git
</li>
<li class="slide-right">
<iconify-icon icon="teenyicons:nextjs-solid"></iconify-icon
>Next.js
</li>
<li class="slide-right">
<iconify-icon icon="skill-icons:bootstrap"></iconify-icon
>Bootstrap
</li>
<li class="slide-right">
<iconify-icon icon="skill-icons:materialui-dark"></iconify-icon
>Material UI
</li>
<li class="slide-right">
<iconify-icon icon="skill-icons:figma-dark"></iconify-icon>Figma
</li>
<li class="slide-right">
<iconify-icon
icon="vscode-icons:file-type-drawio"
></iconify-icon
>Draw.io
</li>
<li class="slide-right">Proactive thinking</li>
<li class="slide-right">Effective communication</li>
<li class="slide-right">Problem solving</li>
</ul>
</div>
<!-- right column -->
<div class="col-md-4 experience">
<h3 class="experienceHeading">Experience</h3>
<h5 class="experienceItem">Coding Mentor &<br />Code Reviewer</h5>
<p class="">
<a
href="https://www.hyperiondev.com/"
target="_blank"
class="hyperionDevLink"
>HyperionDev</a
><br />March 2023 - Present
</p>
<br />
<h5 class="experienceItem">Merchandiser</h5>
<p>
<a
href="https://www.buildit.co.za/"
target="_blank"
class="buildItLink"
>Build It</a
><br />March 2020 - June 2021
</p>
</div>
</div>
</main>
</div>
<!-- Deferred non-critical scripts -->
<script
src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"
defer
></script>
<script src="./js/dark-mode.js" defer></script>
<script src="./js/on-scroll-fade.js" defer></script>
</body>
</html>
<!--
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Chad Probert - Full Stack Developer specializing in React, Node.js, and Python. Expert in web development, software engineering, and coding mentorship. View my portfolio and contact me for collaboration opportunities."><meta name="keywords" content="full stack developer, software engineer, web development, React, Node.js, Python, JavaScript, MongoDB, coding mentor"><meta name="robots" content="index, follow"><!-- Open Graph Tags --><meta property="og:type" content="website"><meta property="og:title" content="Chad Probert | Full Stack Developer & Software Engineer Portfolio"><meta property="og:description" content="Experienced full stack developer and coding mentor specialising in React, Node.js, and Python. View my projects and get in touch for collaboration opportunities."><meta property="og:image" content="https://chadprobert.github.io/images/me3.jpg"><meta property="og:url" content="https://chadprobert.github.io/"><meta property="og:site_name" content="Chad Probert Portfolio"><!-- Enhanced Twitter Sharing Cards --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Chad Probert | Full Stack Developer & Software Engineer"><meta name="twitter:description" content="Full stack developer and coding mentor specializing in React, Node.js, and Python. Explore my portfolio and projects."><meta name="twitter:image" content="https://chadprobert.github.io/images/me3.jpg"><link rel="canonical" href="https://chadprobert.github.io/"><!-- Favicon with different icons --><link rel="icon" type="image/png" sizes="32x32" href="../images/cp-logo.png"><link rel="icon" type="image/png" sizes="16x16" href="../images/cp-logo.png"><link rel="apple-touch-icon" sizes="180x180" href="../images/cp-logo.png"><title>Chad Probert | Full Stack Web Developer & Software Engineer | Portfolio</title><!-- Preconnect to external domains --><link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin><!-- Loading CSS files --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><link rel="stylesheet" href="./css/index/index.min.css"><link rel="stylesheet" href="./css/index/features/mobile.min.css"><link rel="stylesheet" href="./css/index/features/dark-mode.min.css"><link rel="stylesheet" href="./css/index/features/animations.min.css"><!-- Inline critical CSS --><style>body{padding-top:50px;text-align:center;background-color:#f5f6f7;color:#222;font-family:Poppins,sans-serif;margin:0}h1{font-family:Inter,sans-serif;font-weight:800;line-height:99px;font-size:80px;letter-spacing:-1px}</style></head><body><div class="con"><!-- dark mode toggle --> <input type="checkbox" id="dark-mode-toggle" aria-label="Toggle dark mode"> <label for="dark-mode-toggle" id="dark-mode-label" class="dark-mode-label">Dark Mode</label><!-- header --><header role="banner"><h1>Chad Probert</h1><h3 class="roleHeading">Full Stack Web Developer & Software Engineer</h3></header><!-- social icons --><nav aria-label="Social media links"><ul class="socialIcons"><li class="githubIcon socialIcon"><a href="https://github.com/ChadProbert" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile" class="githubIcon"><iconify-icon icon="jam:github" aria-hidden="true"></iconify-icon></a></li><li class="whatsappIcon socialIcon"><a href="https://wa.me/+27609849667" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp Contact" class="whatsappIcon"><iconify-icon icon="uim:whatsapp" aria-hidden="true"></iconify-icon></a></li><li class="linkedinIcon socialIcon"><a href="https://www.linkedin.com/in/chad-probert-6421b321b/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile" class="linkedinIcon"><iconify-icon icon="uil:linkedin" aria-hidden="true"></iconify-icon></a></li></ul></nav><!-- avatar image --> <img src="./images/me3.jpg" alt="Chad Probert's portfolio picture" width="150" height="150" class="avatar" loading="lazy"><!-- navigation bar--><div class="row navWrapper"><nav aria-label="Main navigation"><ul class="routes"><li class="navItem"><a href="./index.html" class="navLink" aria-current="page"><i class="fa-solid fa-person-rays fa-flip" aria-hidden="true"></i> ABOUT ME</a></li><li class="navItem"><a href="./projects.html" class="navLink"><i class="fa-solid fa-folder" aria-hidden="true"></i> PROJECTS</a></li><li class="navItem"><a href="./contact.html" class="navLink"><i class="fa-solid fa-address-book" aria-hidden="true"></i> CONTACT ME</a></li></ul></nav></div><main id="main-content"><!-- about me section --><section class="aboutMeDiv"><div class="aboutMeContent"><h2 class="aboutMeHeading">About Me</h2><p class="aboutMeText">I am a full-stack web developer, coding mentor and software engineer with a passion for learning and creating. I aspire to combine my passions and understanding of technological advancement to develop and maintain websites, web applications and software that people can become fully immersed in and will find joy in utilising.</p></div></section><!-- education, skills & experience section --><div class="row extraInfo"><!-- left column --><div class="col-md-4 education"><h3 class="educationHeading">Education</h3><h5 class="educationItem">CS50 Programming with Python</h5><p>edX<br>Online Course<br>In progress<i class="fa-solid fa-spinner fa-spin"></i></p><br><h5 class="educationItem">Software Engineering</h5><p>HyperionDev<br>Online Bootcamp<br>Completed in October 2024</p><br><h5 class="educationItem">Full Stack Web Development</h5><p>HyperionDev<br>Online Bootcamp<br>Completed in January 2023</p><br><h5 class="educationItem">Basic Fire Fighting</h5><p>Online Course<br>Completed in 2021</p><br><h5 class="educationItem">Pearson High School</h5><p>Summerstrand, Port Elizabeth, South Africa<br>2015 - 2019</p></div><!-- middle column --><div class="col-md-4 skills"><h3 class="skillsHeading"><i class="fa-solid fa-code"></i> Skills & Competencies</h3><ul class="skillsItem"><li class="slide-left"><iconify-icon icon="skill-icons:html"></iconify-icon>HTML</li><li class="slide-left"><iconify-icon icon="skill-icons:css"></iconify-icon>CSS</li><li class="slide-left"><iconify-icon icon="skill-icons:javascript"></iconify-icon>JavaScript</li><li class="slide-left"><iconify-icon icon="skill-icons:react-dark"></iconify-icon>React</li><li class="slide-left"><iconify-icon icon="skill-icons:expressjs-light"></iconify-icon>Express.js</li><li class="slide-left"><iconify-icon icon="logos:nodejs-icon-alt"></iconify-icon>Node.js</li><li class="slide-left"><iconify-icon icon="skill-icons:mongodb"></iconify-icon>MongoDB</li><li class="slide-left"><iconify-icon icon="logos:python"></iconify-icon>Python</li><li class="slide-left"><i class="fa-solid fa-database"></i> SQL</li><li class="slide-right"><iconify-icon icon="skill-icons:git"></iconify-icon>Git</li><li class="slide-right"><iconify-icon icon="teenyicons:nextjs-solid"></iconify-icon>Next.js</li><li class="slide-right"><iconify-icon icon="skill-icons:bootstrap"></iconify-icon>Bootstrap</li><li class="slide-right"><iconify-icon icon="skill-icons:materialui-dark"></iconify-icon>Material UI</li><li class="slide-right"><iconify-icon icon="skill-icons:figma-dark"></iconify-icon>Figma</li><li class="slide-right"><iconify-icon icon="vscode-icons:file-type-drawio"></iconify-icon>Draw.io</li><li class="slide-right">Proactive thinking</li><li class="slide-right">Effective communication</li><li class="slide-right">Problem solving</li></ul></div><!-- right column --><div class="col-md-4 experience"><h3 class="experienceHeading">Experience</h3><h5 class="experienceItem">Coding Mentor &<br>Code Reviewer</h5><p class=""><a href="https://www.hyperiondev.com/" target="_blank" class="hyperionDevLink">HyperionDev</a><br>March 2023 - Present</p><br><h5 class="experienceItem">Merchandiser</h5><p><a href="https://www.buildit.co.za/" target="_blank" class="buildItLink">Build It</a><br>March 2020 - June 2021</p></div></div></main></div><!-- Deferred non-critical scripts --><script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js" defer></script><script src="./js/dark-mode.js" defer></script><script src="./js/on-scroll-fade.js" defer></script></body></html><!--
references:
https://getbootstrap.com/
https://iconify.design/
https://fontawesome.com/v5/search
-->
-->

0 comments on commit 4088a15

Please sign in to comment.