Skip to content

Commit

Permalink
Code refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@Potapy4
Potapy4 committed Dec 20, 2024
1 parent 5cddf39 commit 4dcd13d
Show file tree
Hide file tree
Showing 13 changed files with 229 additions and 64 deletions.
Binary file modified assets/images/og-image.en_US.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const switchToColor = (color, jsConfetti) => {
try {

document.querySelectorAll(".page").forEach(page => {
page.style.borderColor = color;
});

document.querySelectorAll(".avatar").forEach(avatar => {
avatar.contentDocument.getElementById("circle").setAttribute("fill", color);
});

if (color === "pink") {
setTimeout(() => {
jsConfetti.addConfetti({
emojis: ['🌈', '🦄', '🌺', '🎀'],
});
}, 300);

document.querySelectorAll(".highlighted").forEach(highlighted => {
highlighted.style.backgroundColor = "rgba(255, 192, 203, 0.2)";
});
} else {
setTimeout(() => {
jsConfetti.addConfetti({
emojis: ['🐊', '🌵', '🥝', '💚'],
});
}, 300);

document.querySelectorAll(".highlighted").forEach(highlighted => {
highlighted.style.backgroundColor = "rgba(0, 128, 0, 0.15)";
});
}

} catch (e) { }
};

const registerServiceWorker = async () => {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('/sw.js');
} catch (err) {
console.error('ServiceWorker registration failed:', err);
}
}
};

const updateWorkExperience = () => {
const startWorkDate = new Date("2017-06-01");
const todaysDate = new Date();
const workExperience = todaysDate.getFullYear() - startWorkDate.getFullYear();
document.getElementById("workExperience").innerHTML = workExperience + '+';
};

document.addEventListener('DOMContentLoaded', () => {
updateWorkExperience();

const jsConfetti = new JSConfetti();

document.getElementById('green').addEventListener('click', () => switchToColor('green', jsConfetti));
document.getElementById('pink').addEventListener('click', () => switchToColor('pink', jsConfetti));

registerServiceWorker();

console.log("%cDoes this page need fixes or improvements?\n\n🤝 Open an issue or contribute a pull request: https://github.com/Potapy4/mykyta.dev ", "color:black; font-size:16px");
});
78 changes: 78 additions & 0 deletions assets/stylesheets/layout.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@import 'variables.css';

/* Base Layout */
html {
font-size: var(--font-size-base);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
}

body {
margin: 0;
font-family: var(--font-family-base);
line-height: var(--line-height-base);
background-color: var(--color-background);
color: var(--color-primary);
}

/* Selection */
::-moz-selection {
background: var(--color-selection);
}

::selection {
background: var(--color-selection);
}

/* Grid System */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--spacing-unit);
}

.grid {
display: flex;
flex-wrap: wrap;
margin: calc(-1 * var(--grid-gutter));
}

.column {
padding: var(--grid-gutter);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
html {
font-size: calc(var(--font-size-base) * 0.9);
}

.container {
padding: 0 calc(var(--spacing-unit) / 2);
}

.grid {
margin: calc(-1 * var(--grid-gutter) / 2);
}

.column {
padding: calc(var(--grid-gutter) / 2);
}
}

/* Transitions */
.page {
transition: border-color var(--transition-duration) var(--transition-timing);
}

.highlighted {
transition: background-color var(--transition-duration) var(--transition-timing);
}
29 changes: 29 additions & 0 deletions assets/stylesheets/variables.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
:root {
/* Colors */
--color-primary: #000;
--color-secondary: #666;
--color-background: #fff;
--color-border: #eee;
--color-link: #0366d6;
--color-highlight-pink: rgba(255, 192, 203, 0.2);
--color-highlight-green: rgba(0, 128, 0, 0.15);
--color-selection: yellow;

/* Typography */
--font-size-base: 16px;
--line-height-base: 1.4285em;
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

/* Spacing */
--spacing-unit: 1rem;
--container-width: 1200px;
--grid-gutter: 1rem;

/* Breakpoints */
--breakpoint-tablet: 768px;
--breakpoint-mobile: 480px;

/* Transitions */
--transition-duration: 0.3s;
--transition-timing: ease-in-out;
}
65 changes: 11 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<meta name="theme-color" content="white">
<meta property="og:description" content="&mdash; Hello! I'm a software engineer with 7+ years of experience in sophisticated enterprise web applications, delivering software in high-volume, challenging, and fast-paced environments.">
<meta property="og:image:alt" content="Screenshot of the homepage">
<meta property="og:image:height" content="1948">
<meta property="og:image:height" content="2452">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="2560">
<meta property="og:image" content="https://mykyta.dev/assets/images/og-image.en_US.png">
Expand All @@ -32,13 +32,18 @@
<meta property="og:url" content="https://mykyta.dev/">
<base href="https://mykyta.dev/">
<title>Mykyta Potapenko &mdash; Resume</title>
<link rel="preload" href="./assets/stylesheets/variables.css" as="style">
<link rel="preload" href="./assets/stylesheets/layout.css" as="style">
<link rel="preload" href="./assets/js/main.js" as="script">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./assets/images/favicon-96x96.png">
<link rel="apple-touch-icon" href="./assets/images/apple-touch-icon.png">
<link rel="manifest" href="./manifest.json">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="https://t.me/potapy4" type="text/html" />
<link rel="me" href="https://t.me/potapy4" type="text/html">
<link rel="stylesheet" href="./assets/stylesheets/variables.css">
<link rel="stylesheet" href="./assets/stylesheets/layout.css">
<link rel="stylesheet" href="./assets/stylesheets/base.css">
</head>
<body>
Expand Down Expand Up @@ -75,7 +80,7 @@ <h1 class="name">Mykyta Potapenko</h1>
<a href="https://github.com/potapy4" rel="author" class="github">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
<span>potapy4</span>
</a>
Expand Down Expand Up @@ -130,7 +135,7 @@ <h6>Now</h6>
<li>Implemented a synchronization pipeline that effectively doubled the speed of processing and storing events from Ethereum-based networks</li>
<li>Created custom APIs and integrated third-party APIs with the Ethereum blockchain to support seamless interaction between decentralized applications and the central system</li>
<li>Contributed to the implementation of MVP and solution roadmap</li>
<li>Identified business needs and translate them into code</li>
<li>Evaluated software engineers' skills and provided feedback to drive growth and team performance</li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -248,55 +253,7 @@ <h3>Languages</h3>
</div>
</article>
</main>
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
<script>
console.log("%cDoes this page need fixes or improvements?\n\n🤝 Open an issue or contribute a pull request: https://github.com/Potapy4/mykyta.dev ", "color:black; font-size:16px");
var todaysDate = new Date();
const jsConfetti = new JSConfetti();

var startWorkDate = new Date("2017-06-01");
var workExperience = todaysDate.getFullYear() - startWorkDate.getFullYear();
document.getElementById("workExperience").innerHTML = workExperience + '+';
function switchToColor(color) {
try {
document.querySelectorAll(".page").forEach(function (page) {
page.style.borderColor = color;
});
document.querySelectorAll(".avatar").forEach(function(avatar) {
avatar.contentDocument.getElementById("circle").setAttribute("fill", color);
});

if (color === "pink") {
setTimeout(() => {
jsConfetti.addConfetti({
emojis: ['🌈', '🦄', '🌺', '🎀'],
})
}, 300)

document.querySelectorAll(".highlighted").forEach(function (highlighted) {
highlighted.style.backgroundColor = "rgba(255, 192, 203, 0.2)";
});
}
else {
setTimeout(() => {
jsConfetti.addConfetti({
emojis: ['🐊', '🌵', '🥝', '💚'],
})
}, 300)

document.querySelectorAll(".highlighted").forEach(function (highlighted) {
highlighted.style.backgroundColor = "rgba(0, 128, 0, 0.15)";
});
}
} catch (error) {}
}
document.getElementById("green").addEventListener("click", switchToColor.bind(this, "green"));
document.getElementById("pink").addEventListener("click", switchToColor.bind(this, "pink"));
if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker.register('/sw.js');
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js" defer></script>
<script src="./assets/js/main.js" defer></script>
</body>
</html>
14 changes: 13 additions & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,17 @@
"background_color": "white",
"display": "standalone",
"scope": "/",
"theme_color": "white"
"theme_color": "white",
"description": "Mykyta Potapenko's personal website and resume",
"categories": ["portfolio", "resume", "personal"],
"lang": "en-US",
"dir": "ltr",
"orientation": "any",
"shortcuts": [
{
"name": "View Resume",
"url": "/index.html",
"description": "View Mykyta's Resume"
}
]
}
2 changes: 1 addition & 1 deletion sw.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 4dcd13d

Please sign in to comment.