Skip to content

virtual-resume-mason-brown #1

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
mkbrown261 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

virtual-resume-mason-brown #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
156f73a
virtual-resume-mason-brown
aviatorkeyz Mar 28, 2026
5a7bb99
aboutmefix
aviatorkeyz Mar 28, 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
66 changes: 66 additions & 0 deletions masonbrown/Bootstrap example/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@


.pulse-navbar {
animation: pulseBackground 4s ease-in-out infinite alternate;
position: relative;
overflow: visible;
}

@keyframes pulseBackground {
0% {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
50% {
background: linear-gradient(to right, #feb47b, #ff7e5f);
}
100% {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
}

.card {
border-radius: 15px;
transition: all 0.3s ease-in-out;
}

.card:hover {
transform: translateY(-15px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.laser-sphere {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #00ff88, #00aa44);
box-shadow: 0 0 15px #d8ab38, 0 0 30px #00ff88, inset -2px -2px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
pointer-events: none;
}

.laser-sphere-container {
position: absolute;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 10;
pointer-events: auto;
}

.laser-sphere {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fffd71, #d6a160);
box-shadow: 0 0 15px #ded989, 0 0 30px #e9ac49, inset -2px -2px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
pointer-events: none;
top: -5px;
left: -5px;
}




Binary file added masonbrown/images/Aviatorkeyz_Banner.jpg
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 masonbrown/images/Code_and_coffee_mason_james.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 masonbrown/images/Linked_Profile_Picture.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 masonbrown/images/bgimage.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 masonbrown/images/csm.jpg
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 masonbrown/images/gl.jpg
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 masonbrown/images/java.jpg
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.
320 changes: 320 additions & 0 deletions masonbrown/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,320 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mason Brown Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
.laser-sphere {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fffd71, #d6a160);
box-shadow: 0 0 15px #ded989, 0 0 30px #e9ac49, inset -2px -2px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
pointer-events: none;
}
.card {
border-radius: 15px;
transition: all 0.3s ease-in-out !important;
background-color: #c7c3bcc9;
}

.card:hover {
transform: translateY(-15px) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
background-color: blanchedalmond;
}
.bg-primary-subtle.bp-gradient {
background: linear-gradient(to right, #adadad, #feb47b);
transition: background 1s ease-in-out;
}
.container {
background: linear-gradient(to right, #adadad, #feb47b);
transition: background 1s ease-in-out;
}
#about-me:hover {
background: linear-gradient(to right, #efebe6, #feb47b);
transition: background 1s ease-in-out;
}
</style>
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-primary-subtle bp-gradient pulse-navbar">
<div class="laser-sphere"></div>

<div class="container-fluid">
<a class="navbar-brand" href="#">Mason Brown</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#navbar">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio-cards">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#who-i-am">Who I Am</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#skills-cards">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#footer">Contact</a></li>
</ul>
</div>
</div>
</nav>

<main class="container text-center border rounded mt-5 p-5">
<h1 class="mt-5">Mason Brown</h1>
<img src="images/Linked_Profile_Picture.png" alt="Profile Picture" class="rounded-circle mt-3" style="width: 180px; height: 180px; object-fit: cover;">
<p class="mt-2">Engineer, Developer, Musician</p>
<p class="mt-2">The greatest <em>things</em> in life started as thoughts</p>

<section id="portfolio-cards" class="d-flex justify-content-center flex-wrap mt-5">
<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Experience</h4>
<ul class="text-start">
<li><strong>Full Stack Engineer Intern</strong><br>Pano Marketing (2026 - Present)</li>
<li><strong>Indie Game Developer</strong><br>Independent action adventure title: Eryndor (2024 - Present)</li>
<li><strong>Audio Engineer</strong><br>Empire, Republic, Sony(2010 - Present)</li>
<li><strong>Creator, Founder</strong><br><a href="https://parkpeer.pages.dev" target="_blank">Parkpeer</a></li>
</ul>
</section>

<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Certifications</h4>
<ul class="text-start">
<li>Java Foundations - Oracle <a href="images/java.jpg" target="_blank">Java Certificate</a></li>

<li>Certified Scrum Master - Scrum Alliance<a href="images/csm.jpg" target="_blank">Scrum Certificate</a></li>
<li>Spring boot for web application - Greater Learning <a href="images/gl.jpg" target="_blank">Spring Boot Certificate</a></li>
</ul>
</section>
<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Education</h4>
<ul class="text-start">
<li>A.I powered software engineering bootcamp<br>@ Code Differently(Present)</li>

</ul>
</section>
</section>
<section class="container text-center">
<h4>Who I Am</h4>
</section>
<section id="who-i-am" class="d-flex justify-content-center flex-wrap mt-5">
<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Developer</h4>
<ul class="text-start">
<li>I am a passionate software developer with a strong background in backend development.</li>
<img src="images/Code_and_coffee_mason_james.jpeg" alt="Profile Picture" class="rounded-circle mx-auto d-block mt-3" style="width: 150px; height: 150px; object-fit: cover;">
</ul>
</section>

<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Musician</h4>
<ul class="text-start">
<li>Executive producer, Songwriter, Performer. Worked with some of the biggest names in the industry.</li>
<img id="musician-image" src="images/Aviatorkeyz_Banner.jpg" alt="Profile Picture" class="rounded-sm mx-auto d-block mt-3" style="width: 150px; height: 150px; object-fit: cover;">
</ul>
</section>
<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Engineer</h4>
<ul class="text-start">
<li>10+ years of professional audio engineering experience. If you need it to sound amazing, I can do that!</li>
<img src="images/bgimage.png" alt="Profile Picture" class="rounded-circle mx-auto d-block mt-3" style="width: 150px; height: 150px; object-fit: cover;">
</ul>
</section>
<section id="projects" class="container text-center">
<h4>Projects</h4>
</section>

<section class="card p-3 m-3 shadow" style="width: 18rem;">

<ul class="text-start">
<li><strong>Eryndor</strong> is a third person action adventure game focused on environment and story driven lore</li>
<li><strong>Being created using Unreal Engine 5.4.1</strong> I chose this version because it offers the best performance and features for my vision.<br></li>
<li><strong>Audio Engineer</strong><br>Empire, Republic, Sony, freelance(2010 - Present)</li>
<li><strong>Combat Driven, Story Steering</strong><br>Eryndor puts you in the shoes of Kalen, our protagonist. A mixture of merciless combat and rich storytelling make for an exciting experience.<a href="https://www.instagram.com/eryndorgameofficial/" target="_blank"> Follow here for updates!</a></li>
</ul>
</section>
<section class="card p-3 m-3 shadow" style="width: 18rem;">

<ul class="text-start">
<li><strong>Park peer</strong> is the first and only peer to peer parking space marketplace! Parkpeer and Parkpeer for business is a MVP that is fully functional and deployed!<br></li>
<li><strong>This project is built with TypeScript</strong></li>
<li>Parkpeer allows users to monetize their parking spaces through a simple and intuitive platform. Parkpeer business allows business owners to manage their parking spaces efficiently, give role based accounts, keep track of all their parking activities & integrate any existing platforms they currently use.<br><a href="https://parkpeer.pages.dev" target="_blank">Parkpeer</a></li>
</ul>
</section>
<section id="skills-cards" class="d-flex justify-content-center flex-wrap mt-5">
<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Skills</h4>
<ul class="text-start">
<li>Proficient in Java, HTML, CSS, Spring Boot, and some TypeScript & JavaScript (Willing to expand that knowledge base explicitly if necessary)</li>
<li>Robust experience with Unreal Engine for game development</li>
<li>Strong background in audio engineering and music production</li>
<li>Excellent problem-solving and collaboration skills</li>
<li>Git version control experience</li>
<li>Agile methodologies and Scrum framework knowledge</li>
</ul>
</section>
<section id="about-me" class="card p-3 m-3 shadow container text-center">
<h5 class="mt-5">Lets start from the beginning</h5>
<p class="mt-5">I began my professional career in the music industry, signing my first recording contract at 24 and spending over a decade as a producer, songwriter, and performer. During that time, I developed a deep understanding of creativity, collaboration, and complex system management—skills that naturally translated into technology. My passion for building and problem-solving led me to explore game development, where I began creating systems inside of games using Unreal Engine. This hands-on experience sparked a fascination with the foundations of object-oriented programming, motivating me to dive deeply into software engineering. Through studying programming principles and designing my own projects, I have transformed my creative instincts into technical expertise, merging my artistic background with a strong command of coding, game development, and system design.</p>
</section>
<section id="contact-us" class="d-flex justify-content-center flex-wrap mt-5">
<section class="card p-3 m-3 shadow" style="width: 18rem;">
<h4>Contact</h4>
<ul class="text-start">
<li>Email: <a href="mailto:mkbrown261@gmail.com">mkbrown261@gmail.com</a></li>
<li>LinkedIn: <a href="https://www.linkedin.com/in/mason-brown-5638783ab/" target="_blank">Mason Brown LinkedIn</a></li>
<li>GitHub: <a href="https://github.com/mkbrown261" target="_blank">Mason Brown GitHub</a></li>
<li>Instagram: <a href="https://www.instagram.com/masonbrownmusic/" target="_blank">Mason Brown Instagram</a></li>
</ul>
</section>
</section>
<footer id="footer" class="mt-5" >
<p>&copy; 2026 Mason Brown. All rights reserved.</p>
</footer>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

<script>
const sphere = document.querySelector('.laser-sphere');
const navbar = document.querySelector('.pulse-navbar');
let angle = 0;
let isBouncing = false;
let bounceVelocity = 0;
let bounceHeight = 0;
const BOUNCE_STRENGTH = 20;
const GRAVITY = 0.6;


const canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = '9';
navbar.insertBefore(canvas, navbar.firstChild);

const ctx = canvas.getContext('2d');
let positions = [];

function resizeCanvas() {
canvas.width = navbar.offsetWidth;
canvas.height = navbar.offsetHeight;
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);


sphere.addEventListener('click', (e) => {
e.stopPropagation();
if (!isBouncing) {
isBouncing = true;
bounceVelocity = -BOUNCE_STRENGTH;
}
});


sphere.style.pointerEvents = 'auto';
sphere.style.cursor = 'pointer';

function animate() {
const navbarRect = navbar.getBoundingClientRect();
const width = navbarRect.width;
const height = navbarRect.height;

const perimeter = (width + height) * 2;
const distance = (angle % perimeter);

let x, y;

if (distance < width) {
x = distance;
y = 0;
} else if (distance < width + height) {
x = width;
y = distance - width;
} else if (distance < width * 2 + height) {
x = width - (distance - width - height);
y = height;
} else {
x = 0;
y = height - (distance - width * 2 - height);
}


if (isBouncing) {
bounceVelocity += GRAVITY;
bounceHeight += bounceVelocity;


if (bounceHeight >= 0 && bounceVelocity > 0.5) {
bounceHeight = 0;
bounceVelocity = 0;
isBouncing = false;
} else if (bounceHeight >= 0 && bounceVelocity > 0 && bounceVelocity < 0.5) {
bounceHeight = 0;
bounceVelocity = 0;
isBouncing = false;
}
}


positions.push({ x: x + 10, y: y + 10 + bounceHeight });

if (positions.length > 70) {
positions.shift();
}


ctx.clearRect(0, 0, canvas.width, canvas.height);


const gradient = ctx.createLinearGradient(
positions[0]?.x || x,
positions[0]?.y || y,
x + 10,
y + 10 + bounceHeight
);
gradient.addColorStop(0, 'rgba(0, 255, 136, 0)');
gradient.addColorStop(1, 'rgba(0, 255, 136, 0.8)');

ctx.strokeStyle = gradient;
ctx.lineWidth = 8;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';


if (positions.length > 1) {
ctx.beginPath();
ctx.moveTo(positions[0].x, positions[0].y);

for (let i = 1; i < positions.length; i++) {
ctx.lineTo(positions[i].x, positions[i].y);
}
ctx.stroke();
}


sphere.style.left = x + 'px';
sphere.style.top = (y + bounceHeight) + 'px';

angle += 2;
requestAnimationFrame(animate);
}

animate();
</script>




</body>
</html>