Skip to content

Commit

Permalink
Refactor index.html and style.css, optimize external resource loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anto426
Anto426 committed Oct 10, 2024
1 parent 7e08233 commit 6705479
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 35 deletions.
49 changes: 18 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,14 @@
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
crossorigin="anonymous"
>
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Bootstrap Icons -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- Color Thief-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.4.0/color-thief.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.4.0/color-thief.umd.js"></script>
<!-- Icon -->
<link rel="icon" href="./src/multimedia/icon.ico">
<!-- CSS -->
Expand All @@ -33,45 +29,35 @@
<script src="./src/js/class/FetchData.js"></script>
<script src="./src/js/class/Text.js"></script>
<script src="./src/js/index.js"></script>


</head>
<!-- Body -->
<body class="body anto-bg-gradient" onload="Load()">
<div
class="container-fluid d-flex flex-row justify-content-center align-items-center"
id="anto-prymarycontainer">
<div
class="d-flex flex-row justify-content-center align-items-center"
id="anto-prymarybox">
<div class="container-fluid" id="anto-prymarycontainer">
<div class="loader" id="anto-loader"></div>
<div class="container" id="anto-prymarybox">
<div class="p-2 d-flex flex-column item">
<div class="p-5 d-flex justify-content-center"
id="anto-logocontainer">
<img class="img-fluid" id="anto-logo"
crossorigin="anonymous">
<div class="p-5 d-flex justify-content-center" id="anto-logocontainer">
<img class="img-fluid" id="anto-logo" crossorigin="anonymous">
<div class="container w-auto m-0">
<h3 class="h3" id="anto-username"></h3>
<h4 class="h4" id="anto-tag"></h4>
<i class="bi bi-heartbreak-fill"
id="anto-emoji"></i>
<i class="bi bi-heartbreak-fill" id="anto-emoji"></i>
<hr>
</div>
</div>
<div
class="p-4 d-flex flex-column justify-content-center align-items-center">
<h4 class="h4"
id="anto-About-fild-question">—͟͞͞💫】About Me:</h4>
<div class="p-4 d-flex flex-column justify-content-center align-items-center">
<h4 class="h4" id="anto-About-fild-question">—͟͞͞💫】About Me:</h4>
<h6 class="p" id="anto-About-fild"></h6>
</div>
<div
class="p-5 d-flex flex-column justify-content-center align-items-center">
<div class="p-5 d-flex flex-column justify-content-center align-items-center">
<h4 class="h4" id="anto-Social-fild">—͟͞͞📱】Social:</h4>
<div class="p-1 w-100">
<a
href="https://x.com/anto4_2_6"
id="anto-Social-x"
class="btn btn-outline-primary btn-lg m-1 w-100"
target="_blank">
target="_blank"
>
<i class="bi bi-twitter-x w-100"></i>
Twitter
</a>
Expand All @@ -81,7 +67,8 @@ <h4 class="h4" id="anto-Social-fild">—͟͞͞📱】Social:</h4>
href="https://github.com/Anto426/"
id="anto-Social-github"
class="btn btn-outline-dark btn-lg m-1 w-100"
target="_blank">
target="_blank"
>
<i class="bi bi-github"></i>
GitHub
</a>
Expand Down
66 changes: 63 additions & 3 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,42 @@
width: 100vw;
}



#anto-prymarycontainer {
height: 100vh;
width: 100vw;
margin: 0, 0, 0, 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#anto-About-fild{
#anto-About-fild {
text-align: center;
white-space: nowrap;
}



#anto-prymarybox {
display: none ;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: var(--default-prymarybox-bg);
height: 740px;
width: 1000px;
border-radius: 80px;
padding: 30px;
}


.fade-in {
display: flex !important;
animation: fadeIn 2s forwards;
}

#anto-logo {
height: 130px;
width: 130px;
Expand All @@ -54,8 +71,51 @@
from {
background-position: 0% 50%;
}

to {
background-position: 100% 50%;
}

}
}


@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}





.loader {
width: 40vw;
height: 22px;
border-radius: 40px;
color: #514b82;
border: 2px solid;
position: relative;
}

.loader::before {
content: "";
position: absolute;
margin: 2px;
width: 25%;
top: 0;
bottom: 0;
left: 0;
border-radius: inherit;
background: currentColor;
animation: l3 1s infinite linear;
}



@keyframes l3 {
50% {left:100%;transform: translateX(calc(-100% - 4px))}
}
10 changes: 9 additions & 1 deletion src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ const AntoAboutFild = "I'm a high school student who likes programming 💻✨"

// Function for loadpage
function Load() {
let prymarybox = document.getElementById("anto-prymarybox");
let textFild = document.getElementById("anto-About-fild");
let loader = document.getElementById("anto-loader");
Textd.setLarghezzaTesto(textFild, AntoAboutFild);

FetchDataIn.fetchGithubData(githubusername).then(data => {
Expand All @@ -25,7 +27,13 @@ function Load() {
tag.innerHTML = data.login;
DynamicColorIn.setImg(logo);
DynamicColorIn.applyTheme();
Textd.textWrriter(AntoAboutFild, textFild);
setTimeout(() => {
loader.style.display = "none";
prymarybox.classList.add("fade-in");
prymarybox.style.display = "flex";
Textd.textWrriter(AntoAboutFild, textFild);
}, 1000);


}).catch(error => {
console.error(error);
Expand Down

0 comments on commit 6705479

Please sign in to comment.