Skip to content

Implemented Virtual Resume Landing Page #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jayden-andrews wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Implemented Virtual Resume Landing Page #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a04b2f8
Initial commit
jayden-andrews Mar 27, 2026
f4ac928
Implemented first draft
jayden-andrews Mar 27, 2026
0303033
Finished resume landing page
jayden-andrews Mar 29, 2026
c3f9d04
Reorganized CSS
jayden-andrews Mar 29, 2026
253735a
Delete .DS_Store
jayden-andrews Mar 29, 2026
c4f6f12
Added animations between pages
jayden-andrews Mar 30, 2026
4cd2542
Added animations and moved files into appropriate folder
jayden-andrews Mar 30, 2026
501057f
Fixing files'
jayden-andrews Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 130 additions & 0 deletions jaydenandrews/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jayden Andrews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=Jost:wght@300;400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Navbar -->
<nav class="site-nav">
<a class="site-nav__brand" href="#">Jayden Andrews</a>
<button class="nav-toggle" onclick="this.nextElementSibling.classList.toggle('open')" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
<ul class="site-nav__links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="active">About</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="skills.html">Skills</a></li>
</ul>
</nav>

<div class="page-content">
<main class="about-page">

<!-- About Me -->
<section class="about-section">
<h2 class="section-label">About Me</h2>
<div class="divider"></div>
<div class="about-body">
<p>Hi! I'm passionate about software engineering and problem-solving. I love building practical
tools
that make everyday tasks easier and more efficient. Through my projects and hands-on experience,
I've gained skills in programming, data analysis, and algorithm design, while learning to
approach
development with attention to detail.</p>
<p>I'm motivated by the chance to create software that has a real impact. I focus on building
solutions
that are thoughtful, reliable, and genuinely useful in the real world. Continuing to learn and
grow
as an engineer is always a priority for me, and I enjoy collaborating with teams to tackle
challenging problems.</p>
<p>Outside of technology, I play the saxophone, sing, and stay active. These hobbies have taught me
discipline, creativity, and teamwork — qualities I bring to everything I do as a software
engineer.
</p>
</div>
</section>

<!-- Education -->
<section class="about-section">
<h2 class="section-label">Education</h2>
<div class="divider"></div>

<div class="edu-list">

<!-- Code Differently -->
<div class="edu-item">
<div class="logo">
<img src="images/code_differently_logo.png" alt="Code Differently logo">
</div>
<div class="edu-details">
<h3>Code-Differently</h3>
<p class="edu-degree">AI-Powered Software Engineering Bootcamp</p>
</div>
</div>

<!-- UMD -->
<div class="edu-item">
<div class="logo umd">
<img src="images/umd seal.png" alt="University of Maryland logo">
</div>
<div class="edu-details">
<h3>University of Maryland, College Park</h3>
<p class="edu-degree">Bachelor of Science, Computer Science</p>
</div>
</div>

</div>
</section>

<!-- Relevant Coursework -->
<section class="about-section">
<h2 class="section-label">Relevant Coursework</h2>
<div class="divider"></div>

<ul class="course-list">
<li>Object-Oriented Programming</li>
<li>Programming Languages</li>
<li>Artificial Intelligence</li>
<li>Web Development</li>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Databases</li>
<li>Programming Handheld Devices</li>
<li>Human-Computer Interaction</li>
</ul>
</section>
</main>
</div>

<script>
document.querySelectorAll('a[href]').forEach(link => {
link.addEventListener('click', function (e) {
const href = this.getAttribute('href');

if (!href || href.startsWith('http') || href.startsWith('#') || href.startsWith('mailto')) return;

e.preventDefault();
const content = document.querySelector('.page-content');
content.style.transition = 'opacity 0.3s ease';
content.style.opacity = '0';

setTimeout(() => {
window.location.href = href;
}, 300);
});
});
</script>
</body>

</html>
110 changes: 110 additions & 0 deletions jaydenandrews/experience.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jayden Andrews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=Jost:wght@300;400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Navbar -->
<nav class="site-nav">
<a class="site-nav__brand" href="#">Jayden Andrews</a>
<button class="nav-toggle" onclick="this.nextElementSibling.classList.toggle('open')" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
<ul class="site-nav__links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="experience.html" class="active">Experience</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="skills.html">Skills</a></li>
</ul>
</nav>

<div class="page-content">

<!-- Work Experience -->
<section class="about-section">
<div class="page-header">
<h2 class="section-label">Work Experience</h2>
<div class="divider"></div>
</div>

<div class="edu-list">

<!-- Music & Arts -->
<div class="list-item">
<div class="logo">
<img src="images/music and arts logo.jpeg" alt="Music & Arts Logo">
</div>
<div class="edu-details">
<h3>Music & Arts</h3>
<p class="edu-degree">Senior Sales Associate | August 2025 – Present</p>
<ul>
<li>Strengthened customer relationships, boosting sales by 20% through tailored product
recommendations and lesson program promotions.</li>
<li>Supported daily operations involving POS systems, inventory software, and internal
tools,
escalating technical issues as needed.</li>
<li>Maintained store operations including merchandising, security, and maintenance to ensure
a
smooth and welcoming retail environment.</li>
</ul>
</div>
</div>

<!-- U.S. Food and Drug Administration -->
<div class="list-item">
<div class="logo">
<img src="images/Food_and_Drug_Administration_201x_logo.svg.png" alt="FDA Logo">
</div>
<div class="edu-details">
<h3>U.S. Food and Drug Administration</h3>
<p class="edu-degree">Oak Ridge Institute for Science and Education Fellow | June 2023 – August
2023
</p>
<ul>
<li>Automated administrative and consultation review processes, creating data visualizations
to
track progress with 100% success in timely task completion.</li>
<li>Processed and structured data with Pandas and integrated it into Power BI to improve
report
clarity and accessibility.</li>
<li>Optimized data mining programs to streamline divisional reports, reducing manual report
preparation time by ~20%.</li>
</ul>
</div>
</div>

</div>
</section>
</div>

<script>
document.querySelectorAll('a[href]').forEach(link => {
link.addEventListener('click', function (e) {
const href = this.getAttribute('href');

if (!href || href.startsWith('http') || href.startsWith('#') || href.startsWith('mailto')) return;

e.preventDefault();
const content = document.querySelector('.page-content');
content.style.transition = 'opacity 0.3s ease';
content.style.opacity = '0';

setTimeout(() => {
window.location.href = href;
}, 300);
});
});
</script>
</body>

</html>
Binary file added jaydenandrews/images/Food_and_Drug_Administration_201x_logo.svg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added jaydenandrews/images/JaydenAndrews.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added jaydenandrews/images/code_differently_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added jaydenandrews/images/music and arts logo.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added jaydenandrews/images/umd seal.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
89 changes: 89 additions & 0 deletions jaydenandrews/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jayden Andrews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=Jost:wght@300;400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body id="home-page">
<!-- Navbar -->
<nav class="site-nav">
<a class="site-nav__brand" href="#">Jayden Andrews</a>
<button class="nav-toggle" onclick="this.nextElementSibling.classList.toggle('open')" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
<ul class="site-nav__links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="skills.html">Skills</a></li>
</ul>
</nav>
<div class="page-content">
<section info="index-info">
<div class="container">
<img src="images/JaydenAndrews.png" alt="Jayden Andrews" class="profile-image">
<div class="info-text">
<h1>Jayden Andrews</h1>
<h2>Operations Analyst | Software Developer</h2>
<p>Detail-Oriented & Focused on Building Impactful Solutions</p>
<section id="social-links" class="social-container">
<a href="https://www.linkedin.com/in/jaydenrandrews" target="_blank" aria-label="LinkedIn"
class="social-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM0 8h5v16H0V8zm7.5 0h4.79v2.22h.07c.67-1.27 2.31-2.61 4.76-2.61 5.09 0 6.03 3.36 6.03 7.73V24h-5v-7.41c0-1.77-.03-4.05-2.47-4.05-2.48 0-2.86 1.94-2.86 3.94V24h-5V8z" />
</svg>
</a>

<a href="https://github.com/jayden-andrews" target="_blank" aria-label="GitHub"
class="social-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.21 11.38.6.11.82-.26.82-.58v-2.01c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.1-.76.08-.75.08-.75 1.22.09 1.86 1.26 1.86 1.26 1.08 1.85 2.83 1.32 3.52 1.01.11-.79.42-1.32.76-1.63-2.66-.3-5.46-1.33-5.46-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.16 0 0 1-.32 3.3 1.23a11.5 11.5 0 013-.41c1.02 0 2.05.14 3 .41 2.3-1.55 3.3-1.23 3.3-1.23.66 1.64.24 2.86.12 3.16.77.84 1.24 1.91 1.24 3.22 0 4.61-2.8 5.63-5.47 5.93.43.37.81 1.1.81 2.22v3.29c0 .32.21.7.82.58C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
</svg>
</a>

<a class="social-link" href="mailto:jaydenrandrews@gmail.com" aria-label="Email">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<rect x="2" y="4" width="20" height="16" rx="2" />
<path d="M2 7l10 7 10-7" />
</svg>
</a>
</section>
</div>
</div>
</section>
</div>

<script>
document.querySelectorAll('a[href]').forEach(link => {
link.addEventListener('click', function (e) {
const href = this.getAttribute('href');

if (!href || href.startsWith('http') || href.startsWith('#') || href.startsWith('mailto')) return;

e.preventDefault();
const content = document.querySelector('.page-content');
content.style.transition = 'opacity 0.3s ease';
content.style.opacity = '0';

setTimeout(() => {
window.location.href = href;
}, 300);
});
});
</script>
</body>

</html>
Loading