Skip to content

Commit e452c46

Browse files
csprasadcsprasad
authored
Merge pull request #6 from csprasad/dev
feat: Add loading screen, dashboard, and OS views
2 parents f177fac + 3bc461c commit e452c46

File tree

14 files changed

+1496
-7
lines changed

14 files changed

+1496
-7
lines changed

‎Portfolio/DashBoard/boot.html

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CSPrasad - Portfolio</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
10+
<style>
11+
/* Full screen overlay for loading screen */
12+
#loadingScreen {
13+
position: fixed;
14+
top: 0;
15+
left: 0;
16+
width: 100%;
17+
height: 100%;
18+
background-color: black;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
z-index: 9999; /* Keeps it on top */
23+
}
24+
25+
/* Your logo and progress bar styling */
26+
.logo {
27+
box-sizing: border-box;
28+
text-align: center;
29+
display: flex;
30+
align-items: center;
31+
flex-direction: column;
32+
justify-content: center;
33+
}
34+
35+
.logo i {
36+
font-size: 8rem;
37+
color: white;
38+
margin-bottom: 5rem;
39+
}
40+
41+
.logo .line1 {
42+
width: 20rem;
43+
height: 0.3rem;
44+
background-color: rgba(255, 255, 255, 0.386);
45+
}
46+
47+
.logo .line2 {
48+
width: 0;
49+
height: 0.3rem;
50+
background-color: rgb(255, 255, 255);
51+
}
52+
53+
/* Media Queries */
54+
@media screen and (max-width:320px) {
55+
.logo i {
56+
font-size: 5rem;
57+
}
58+
.logo .line1 {
59+
width: 10rem;
60+
height: 0.3rem;
61+
}
62+
}
63+
64+
@media screen and (max-width:375px) {
65+
.logo i {
66+
font-size: 5rem;
67+
}
68+
.logo .line1 {
69+
width: 12rem;
70+
height: 0.3rem;
71+
}
72+
}
73+
74+
@media screen and (max-width:425px) {
75+
.logo i {
76+
font-size: 6rem;
77+
}
78+
.logo .line1 {
79+
width: 13rem;
80+
height: 0.3rem;
81+
}
82+
}
83+
84+
@media screen and (min-width:700px) {
85+
.logo i {
86+
font-size: 10rem;
87+
}
88+
.logo .line1 {
89+
width: 27rem;
90+
height: 0.3rem;
91+
}
92+
}
93+
</style>
94+
</head>
95+
96+
<body>
97+
<!-- Loading Screen -->
98+
<div id="loadingScreen">
99+
<div class="logo">
100+
<i class="fa fa-apple"></i>
101+
<div class="line1">
102+
<div id="myBar" class="line2"></div>
103+
</div>
104+
</div>
105+
</div>
106+
107+
<script>
108+
// Function for loading animation
109+
function move() {
110+
var elem = document.getElementById("myBar");
111+
var width = 0;
112+
var id = setInterval(frame, 50);
113+
114+
function frame() {
115+
if (width >= 100) {
116+
clearInterval(id);
117+
redirectToNextPage(); // Redirect to next page once loading is complete
118+
} else {
119+
width++;
120+
elem.style.width = `${width}%`;
121+
}
122+
}
123+
}
124+
125+
// Function to redirect to the next page after loading is complete
126+
function redirectToNextPage() {
127+
window.location.href = "dashboard.html"; // Redirect to container.html
128+
}
129+
130+
// Start the loading animation when the page loads
131+
window.onload = function() {
132+
move();
133+
}
134+
</script>
135+
</body>
136+
137+
</html>

‎Portfolio/DashBoard/dashboard.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dashboard</title>
7+
<link rel="stylesheet" href="styles/dashboard.css">
8+
</head>
9+
<body>
10+
<div class="dashboard-container">
11+
<!-- Left Panel: Name & Details -->
12+
<div class="left-panel">
13+
<nav class="side">
14+
<div class="side__inner">
15+
<div class="top"><a href="#">Brahmendraprasad</a></div>
16+
<div class="bottom">
17+
<a href="https://github.com/csprasad">GitHub</a>
18+
<a href="https://twitter.com/prasadcarlozz">LinkedIn</a>
19+
<a href="mailto:codealligator.csprasad@gmail.com">EMAIL ME</a>
20+
</div>
21+
</div>
22+
</nav>
23+
24+
<section class="section section--hello" id="hello">
25+
<div class="section__inner">
26+
<div class="block">
27+
<h2>Hi, I'm Brahmendraprasad 👋</h2>
28+
<span>I am an iOS Developer with 5+ years of experience in building innovative mobile applications.
29+
My passion lies in creating seamless user experiences and solving complex technical challenges.</span>
30+
31+
</div>
32+
</div>
33+
</section>
34+
</div>
35+
36+
<!-- Middle Panel: OS Selector -->
37+
<div class="middle-panel">
38+
<button class="os-btn" data-platform="iPhone">iPhone</button>
39+
<button class="os-btn" data-platform="MacOS">macOS</button>
40+
<button class="os-btn" data-platform="VisionPro">visionOS</button>
41+
<button class="os-btn" data-platform="TabOS">TabOS</button>
42+
</div>
43+
44+
<!-- Right Panel: Dynamic Screen Display -->
45+
<div class="right-panel">
46+
<iframe id="os-display" src="../iPhone/index.html" frameborder="0"></iframe>
47+
</div>
48+
</div>
49+
50+
<script src="scripts/dashboard.js"></script>
51+
</body>
52+
</html>

‎Portfolio/DashBoard/scripts/dashboard.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const buttons = document.querySelectorAll(".os-btn");
3+
const displayFrame = document.getElementById("os-display");
4+
5+
buttons.forEach(button => {
6+
button.addEventListener("click", function () {
7+
const platform = this.getAttribute("data-platform");
8+
displayFrame.src = `../${platform}/index.html`;
9+
});
10+
});
11+
});
12+
13+
14+
// Animation for name

0 commit comments

Comments
 (0)