Skip to content

Commit

Permalink
Projects Window in portfolio
Browse files Browse the repository at this point in the history
  • Loading branch information
@mitko8009
mitko8009 committed May 21, 2024
1 parent 0a6f40c commit aeaf39c
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 94 deletions.
30 changes: 29 additions & 1 deletion public/portfolio/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ p {
cursor: move;
}

.headerText {
position: relative;
font-size: 4ch;
bottom: 7px;
}

.footerLink {
color: inherit;
margin-right: 1ch;
Expand Down Expand Up @@ -100,6 +106,27 @@ p {
padding-right: 1em;
}

.projSection {
border: #ffffffe8 3px solid;
border-radius: 6px;
padding: 12px;
margin-bottom: 16px;
}

.projSection h1 {
margin-top: -.1em;
}

.projSection h2 {
line-height: 0;
}

.projBtn {
border: #ffffffd0 3px solid;
padding: 8px;
border-radius: 6px;
}

.navbar {
display: grid;
margin-left: auto;
Expand All @@ -110,7 +137,8 @@ p {
.navbar-content {
display: flex;
background-color: rgb(40, 42, 43);
box-shadow: 0px 0px 0px #00000000;
box-shadow: 0px 0px 8px #ffffff3d;
border: #ffffff3d 1px solid;
padding: 8px;
gap: 8px;
border-radius: 12px;
Expand Down
63 changes: 40 additions & 23 deletions public/portfolio/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/jquery-ui.min.css" />
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">

<style>
.navbar-tooltip {
Expand All @@ -22,59 +21,77 @@
<body>
<div class="navbar">
<div class="navbar-content">
<a class="nav-link" id="portfolioHome" title="Portfolio" hidden><img src="assets/user.png" style="height: 32px;"></a>
<a class="nav-link" id="projectsIcon" title="Projects"><img src="assets/projects.png" style="height: 32px;"></a>
<a class="nav-link" id="awardsIcon" title="Awards"><img src="assets/awards.png" style="height: 32px;"></a>
<a class="nav-link" id="nav_portfolio" title="Portfolio" hidden><img src="assets/user.png" style="height: 32px;"></a>
<a class="nav-link" id="nav_projects" title="Top Projects"><img src="assets/projects.png" style="height: 32px;"></a>
<a class="nav-link" id="nav_awards" title="Awards"><img src="assets/awards.png" style="height: 32px;"></a>
<a style="position: relative; border-left: #fff 3px solid; padding-top: 2ch; padding-bottom: 2ch; border-radius: 4px;"></a>
<a class="nav-link" href="//github.com/mitko8009" title="GitHub"><img src="assets/github.png" style="height: 32px;"></a>
<a style="position: relative; border-left: #fff 3px solid; padding-top: 2ch; padding-bottom: 2ch; border-radius: 4px;"></a>
<a class="nav-link" id="shkolotweaks" title="Shkolo Tweaks"><img src="assets/shkolotweaks.png" style="height: 32px;"></a>
<a class="nav-link" id="nav_ShTw" title="Shkolo Tweaks"><img src="assets/shkolotweaks.png" style="height: 32px;"></a>
<!-- <a class="nav-link" id="" title=""><img src="" style="height: 32px;"></a> -->
</div>
</div>

<div class="content">
<div>
<div class="window draggable" id="winProjects" style="position: absolute; min-height: 350px; min-width: 650px;" hidden> <!-- Projects Window -->
<div class="window draggable" id="win_projects" style="position: absolute; top: 20%; left: 10%; min-height: 350px; min-width: 670px;" hidden> <!-- Projects Window -->
<div class="winHeader">
<img src="assets/projects.png" style="height: 4ch; padding: 4px;">
<a style="font-size: 4ch; position: relative; bottom: 7px;"><b>Projects</b></a>
<a class="headerText"><b>Top Projects</b></a>
</div>
<img src="assets/close.png" class="closeWindowBtn" id="win_projects_close">
<div>
<div class="projSection">
<h1><img src="assets/shkolotweaks.png" style="height: 32px; margin-bottom: -8px; margin-right: 8px;">Shkolo Tweaks</h1>
<h2>Web extension for customizing the digital diary, <a href="//shkolo.bg/" class="footerLink">Shkolo.bg</a></h2>
<div style="margin-top: 40px; margin-bottom: 20px;"><p>
<a href="//shkolotweaks.xyz/" class="projBtn footerLink" style="font-size: 1.5em;"><b>Official Website</b></a>
<a href="//chromewebstore.google.com/detail/shkolotweaks/benlbhlopnomakndbgihpghghdcejpjc" class="projBtn footerLink" style="font-size: 1.5em;"><b>Chrome Web Store</b></a>
</p></div>
</div>
</div>
<img src="assets/close.png" class="closeWindowBtn" id="closeWinProjectsBtn">
</div>

<div class="window draggable" id="winAwards" style="position: absolute; min-height: 310px; min-width: 500px;" hidden> <!-- Awards Window -->
<div class="window draggable" id="win_awards" style="position: absolute; top: 15%; left: 65%; min-height: 310px; min-width: 500px;" hidden> <!-- Awards Window -->
<div class="winHeader">
<img src="assets/awards.png" style="height: 4ch; padding: 4px;">
<a style="font-size: 4ch; position: relative; bottom: 7px;"><b>Awards</b></a>
<a class="headerText"><b>Awards</b></a>
</div>
<img src="assets/close.png" class="closeWindowBtn" id="closeWinAwardsBtn">
<img src="assets/close.png" class="closeWindowBtn" id="win_awards_close">
<h1>No awards to display yet. :(</h1>
</div>

<div class="window draggable" id="pjson" style="min-height: 310px; min-width: 620px;"> <!-- Portfolio Window -->
<div class="window draggable" id="win_ShTw" style="position: absolute; top: 45%; left: 2%; min-height: 310px; min-width: 500px;" hidden> <!-- Shkolo Tweaks Window -->
<div class="winHeader">
<img src="assets/shkolotweaks.png" style="height: 4ch; padding: 4px;">
<a class="headerText"><b>Shkolo Tweaks</b></a>
</div>
<img src="assets/close.png" class="closeWindowBtn" id="win_ShTw_close">
</div>

<div class="window draggable" id="win_portfolio" style="min-height: 310px; min-width: 620px;"> <!-- Portfolio Window -->
<div class="winHeader">
<img src="assets/user.png" style="height: 4ch; padding: 4px;">
<a style="font-size: 4ch; position: relative; bottom: 7px;"><b>Dimitar <span style="text-shadow: rgba(255, 255, 255, 0.7) 0px 0px 15px;">"mitko8009"</span> Mitev</b></a>
<a class="headerText"><b>Dimitar <span style="text-shadow: rgba(255, 255, 255, 0.7) 0px 0px 15px;">"mitko8009"</span> Mitev</b></a>
</div>
<img src="assets/close.png" class="closeWindowBtn" id="closeWindowBtn">
<p style="font-size: 1.8em; margin-top: -1px;"><i class="uil uil-brackets-curly" style="font-size: .8em; color: #f8b242; margin-right: 6px;"></i>Portfolio.json</p>
<img src="assets/close.png" class="closeWindowBtn" id="win_portfolio_close">
<p style="font-size: 1.8em; margin-top: 2ch;">Portfolio.json</p>
<div class="wipe">
<p style="color: #f8b242;">{</p>
<p style="color: #f3bc62;">{</p>
<p class="jsonIn1">name:<b>"Dimitar 'mitko8009' Mitev",</b></p>
<p class="jsonIn1">description:<b>"I <a style="text-shadow: rgba(255, 255, 255, 0.7) 0px 0px 15px;">code</a> stuff for fun&#128526;.",</b></p>
<p class="jsonIn1">location:<b>"Varna, Bulgaria &#127463;&#127468;",</b></p>
<p class="jsonIn1">studing_at:<b>"<a href="https://itpg-varna.bg/" class="footerLink">ITPG-Varna<a>&#127891;"</b></p>
<p style="color: #f8b242;">}</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="jsonIn1">studing_at:<b>"<a href="//itpg-varna.bg/" class="footerLink">ITPG-Varna<a>&#127891;"</b></p>
<p style="color: #f3bc62;">}</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>{</p>
<p class="jsonIn1">game?:"<a href="https://store.steampowered.com/app/670510/ColorBlend_FX_Desaturation/" class="footerLink" style="text-shadow: rgba(255, 255, 255, 0.7) 0px 0px 15px;">ColorBlend FX</a>"</p>
<p class="jsonIn1">game?:"<a href="//store.steampowered.com/app/670510/ColorBlend_FX_Desaturation/" class="footerLink" style="text-shadow: rgba(255, 255, 255, 0.7) 0px 0px 15px;">ColorBlend FX</a>"</p>
<p>}</p>
</div>
<div style="font-size: 1.6em; margin-top: 1ch; position: absolute; bottom: 4px;"><b><p>
<a href="https://github.com/mitko8009" class="footerLink">./GitHub.com</a>
<a href="https://www.instagram.com/mitko8009_/" class="footerLink">./Instagram.com</a>
<a href="//github.com/mitko8009" class="footerLink">./GitHub.com</a>
<a href="//www.instagram.com/mitko8009_/" class="footerLink">./Instagram.com</a>
</p></b></div>
<div style="position: absolute; top: 100%; left: 100%; bottom: 0; right: 0;"><i class="uil uil-arrow-down-right"></i></div>
</div>
</div>
</div>
Expand Down
114 changes: 44 additions & 70 deletions public/portfolio/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,42 @@
$(document).ready(() => {
var zIndexOnTop = 7;
function navBtnEffect(add = false) {
const GAP = 26;

$(".navbar-content").animate({backgroundColor: "rgb(110, 110, 110)"}, 20).delay(200).animate({backgroundColor: "rgb(40, 42, 43)"}, 20);

function navBtnEffect(add = false) {
const GAP = 24;
add ?
$(".navbar-content").animate({width: $(".navbar-content").width() + $(".nav-link").eq(1).width() + GAP}, 300):
$(".navbar-content").animate({width: $(".navbar-content").width() - $(".nav-link").eq(1).width() - GAP}, 300);
}

$(".navbar-content").animate({backgroundColor: "rgb(110, 110, 110)"}, 20).delay(200).animate({backgroundColor: "rgb(40, 42, 43)"}, 20);
add ? $(".navbar-content").animate({width: $(".navbar-content").width() + $(".nav-link").eq(1).width() + GAP}) : $(".navbar-content").animate({width: $(".navbar-content").width() - $(".nav-link").eq(1).width() - GAP});
function setOnFocus(elementId) {
for (let i = 0; i < $(".window").length; i++) {
$(".window").eq(i).css("z-index", 7 - i);
}

function setOnFocus(elementId) {
for (let i = 0; i < $(".window").length; i++) {
$(".window").eq(i).css("z-index", 7 - i);
}
$("#" + elementId).css("z-index", 8);
}

$("#" + elementId).css("z-index", 8);
}
function closeWindow(elementId) {
navBtnEffect(true);

$("#win_" + elementId).animate({opacity: 0}, 300, () => {
$("#win_" + elementId).hide();
$("#nav_" + elementId).css("opacity", 0).show().animate({opacity: 1}, 50);
});
}

function openWindow(elementId) {
navBtnEffect(false);
setOnFocus("win_" + elementId);

$("#nav_" + elementId).animate({opacity: 0}, 200, () => {
$("#nav_" + elementId).hide();
});

$("#win_" + elementId).css({opacity: 0}).show().animate({opacity: 1}, 200);
}

$(document).ready(() => {
$(".draggable").draggable({
handle: ".winHeader",
containment: ".content",
Expand All @@ -26,72 +47,25 @@ $(document).ready(() => {
stack: ".window",
}).resizable();

// About
$("#closeWindowBtn").click(() => {
navBtnEffect(true);

$("#pjson").animate({opacity: 0}, 300, () => {
$("#pjson").hide();
$("#portfolioHome").css("opacity", 0).show().animate({opacity: 1}, 50);
});
});

$("#portfolioHome").click(() => {
navBtnEffect(false);
setOnFocus("pjson");

$("#portfolioHome").animate({opacity: 0}, 200, () => {
$("#portfolioHome").hide();
});

$("#pjson").css({opacity: 0}).show().animate({opacity: 1}, 200);
});
// Portfolio
$("#win_portfolio_close").click(() => { closeWindow("portfolio"); });
$("#nav_portfolio").click(() => { openWindow("portfolio"); });

// Projects
$("#closeWinProjectsBtn").click(() => {
navBtnEffect(true);

$("#winProjects").animate({opacity: 0}, 300, () => {
$("#winProjects").hide();
$("#projectsIcon").css("opacity", 0).show().animate({opacity: 1}, 50);
});
});

$("#projectsIcon").click(() => {
navBtnEffect(false);
setOnFocus("winProjects");

$("#projectsIcon").animate({opacity: 0}, 200, () => {
$("#projectsIcon").hide();
});

$("#winProjects").css({opacity: 0}).show().animate({opacity: 1}, 200);
});
$("#win_projects_close").click(() => { closeWindow("projects"); });
$("#nav_projects").click(() => { openWindow("projects"); });

// Awards
$("#closeWinAwardsBtn").click(() => {
navBtnEffect(true);

$("#winAwards").animate({opacity: 0}, 300, () => {
$("#winAwards").hide();
$("#awardsIcon").css("opacity", 0).show().animate({opacity: 1}, 50);
});
});
$("#win_awards_close").click(() => { closeWindow("awards"); });
$("#nav_awards").click(() => { openWindow("awards"); });

$("#awardsIcon").click(() => {
navBtnEffect(false);
setOnFocus("winAwards");

$("#awardsIcon").animate({opacity: 0}, 200, () => {
$("#awardsIcon").hide();
});

$("#winAwards").css({opacity: 0}).show().animate({opacity: 1}, 200);
});
// Shkolo Tweaks
$("#win_ShTw_close").click(() => { closeWindow("ShTw"); });
$("#nav_ShTw").click(() => { openWindow("ShTw"); });


$(".nav-link").tooltip({
tooltipClass: "navbar-tooltip",
position: {my: "center top+13", at: "center bottom"},
position: {my: "center top+14", at: "center bottom"},
});
});

0 comments on commit aeaf39c

Please sign in to comment.