-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (173 loc) · 9.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shi portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css">
<style>
@keyframes appear {
from {
opacity: 0;
scale: 0.5;
}
to {
opacity: 1;
scale: 1;
}
}
.block {
animation: appear linear;
animation-timeline:view();
animation-range: entry 0% cover 40%;
}
@media only screen and (max-width:540px){
.wrapper{
margin-top: 35%;
}
}
</style>
</head>
<body>
<section class="whole">
<nav>
<div class="logo">
<h5 class="logo-h5">Shii</h5>
</div>
<div class="nav-list">
<ul id="menuList">
<li class="page1-li"><a href="index.html">Home</a></li>
<li class="page1-li"><a href="aboutme.html">About me</a></li>
<li class="page1-li"><a href="project.html">Project</a></li>
<li class="page1-li"><a href="contact.html">Contact</a></li>
<li class="page1-li"><button class="page1-button"><i class="fa-solid fa-moon icon"></i></button></li>
</ul>
<div class="menu-icon">
<i class="fa-solid fa-bars" onclick="toggleMenu()"></i>
</div>
</div>
</nav>
<header class="page1-header">
<div>
<h1 class="page1-h1 block">Hello!</h1>
</div>
<div>
<p class="page1-p block">_______________________________</p>
<p class="page1-p2 block">I’m shi, currently a student studying at University of Computer
Studies, Yangon. I’m passionate about coding and I’m also specialized in software engineering major. And of course,
I am satisfied with the major I have taken. I consider myself as a person full of desire to learn. I am highly interested
in web design and I also enjoy creating cute apps. Still in progress!!
</p>
<button class="scroll-btn block">Scroll down<span class="scroll-span"><i class="fa-solid fa-arrow-down fa-bounce"></i></span></button>
<img src="powerpuff1 Background Removed.png" class="main-img">
</div>
</header>
<div class="page2-first-div block">
<h6 class="page2-h6">About me</h6>
</div>
<div class="page2-list">
<a href="edu.html"><div class="page2-list-first-div block">
<i class="fa-solid fa-user-graduate to-left-1 to-left-1-i"></i><br>
<span class="to-left-1 to-left-1-span">Background</span><br><span class="to-left-1-span">Education</span><br>
<span class="to-left-1 straight-line">______________</span>
</div></a>
<a href="skill.html"><div class="page2-list-sec-div block">
<i class="fa-solid fa-code to-left-1-i"></i><br>
<span class="to-left-1-span">Tools used,</span><br><span class="to-left-1-span">Skill</span><br>
<span class="straight-line">______________</span>
</div></a>
<a href="interest.html"> <div class="page2-list-third-div block">
<i class="fa-solid fa-laptop to-left-1-i"></i><br>
<span class="to-left-1-span">Interest,</span><br><span class="to-left-1-span">future plan</span><br>
<span class="straight-line">______________</span>
</div></a>
<a href="aboutme.html"><div class="page2-list-fifth-div">
<button class="page2-button"><i class="fa-solid fa-arrow-right arrow-icon"></i></button>
<p class="page2-p">Browse All</p>
</div></a>
</div>
<div class="wrapper-form block">
<button class="strength-button"><h1 class="strength-h1">My Strength</h1></button>
<h6 class="strength-h6">I'm always enthusiastic when it comes to app development. In the web design sector,
I prefer creating my own design with Figma and start coding process. I enjoy learning and
self-studying new things related to app development. In the future, I plan to create and launch my own design apps.
</h6>
</div>
<div class="circular-wrapper block">
<h1 class="circular-h1">Capability</h1>
<div class="circular-list">
<div class="progress-circle" data-progress="85" style="--progress: 85"><h6 class="circular-h6">consistency</h6></div>
<div class="progress-circle" data-progress="60" style="--progress: 60"><h6 class="circular-h6">Leadership</h6></div>
<div class="progress-circle" data-progress="70" style="--progress: 70"><h6 class="circular-h6">competitive</h6></div>
</div>
</div>
<div class="wrapper block">
<button class="strength-button"><h1 class="strength-h1">List Of Some Projects</h1></button>
<button class="contact-btn"><i class="fa-solid fa-check arrow-icon"></i></button><span class="contact-span">Health/fitness tracker</span><br>
<button class="contact-btn"> <i class="fa-solid fa-check arrow-icon"></i></button><span class="contact-span">To Do List</span><br>
<button class="contact-btn"><i class="fa-solid fa-check arrow-icon"></i></button><span class="contact-span">Online learning System</span><br>
<button class="contact-btn"><i class="fa-solid fa-check arrow-icon"></i></button><span class="contact-span">Album Selling System</span>
</div>
<h6 class="page3-h6 block">Project Description</h6>
<div class="card-container block">
<div class="card">
<img src="fitness-tracking-app-mobile-vector-illustration-cartoon-style-smartphone-with-heart-rate-tracker_107661-153.avif" alt="Fitness Tracker">
<div class="card-content">
<button class="projectbtn"><h3>Fitness Tracker</h3></button>
<p>Our project focus on a system that tracks your daily activity, heart rate, and sleep patterns to help you stay healthy and active.</p>
</div>
</div>
<div class="card">
<img src="todolist.webp" alt="To-Do List App">
<div class="card-content">
<button class="projectbtn"><h3>To Do List</h3></button>
<p>Our project focus on a system that organize your tasks, set reminders, and track your progress throughout the day.</p>
</div>
</div>
<div class="card">
<img src="online-learning-concept-with-cartoon-character_29937-6231.avif" alt="Online Learning System">
<div class="card-content">
<button class="projectbtn"><h3>Online Learning System</h3></button>
<p>Our project focus on a system that remote learning with interactive courses, resources, and tools for virtual collaboration.</p>
</div>
</div>
</div>
<h6 class="page3-h6">Contact</h6>
<form method="post" action="" name="contact-form" class="wrapper-form-contact block">
<input type="text" name="Your-name" placeholder="Your Name" class="sim-input"><br>
<input type="text" name="Your-email" placeholder="Your Email" class="sim-input"><br>
<textarea name="Feedback" placeholder="Write Message..." class="large"></textarea><br>
<input type="submit" class="send-btn" value="submit" id="submit">
</form>
<div class="footer">
<div class="social-link-list">
<a href="https://facebook.com/wint.wah.39566905"><button class="footer-btn"><i class="fa-brands fa-facebook arrow-icon"></i></button></a>
<a href="https://www.instagram.com/shi1_shi4?igsh=aGczNmNqOGhocjdv&utm_source=qr"><button class="footer-btn"><i class="fa-brands fa-instagram arrow-icon"></i></button></a>
<a href="https://github.com/wintwah243"><button class="footer-btn"><i class="fa-brands fa-github arrow-icon"></i></button></a>
<a href="https://linkedin.com/in/wint-wah-386240307"><button class="footer-btn"><i class="fa-brands fa-linkedin arrow-icon"></i></button></a>
</div>
<div class="copyright-wrapper">
<p class="copyright">Copyright © 2024 shi. All rights reserved.</p>
</div>
</div>
</section>
<!-- script added -->
<script>
let menuList = document.getElementById("menuList")
menuList.style.maxHeight = "0px";
function toggleMenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "300px";
}
else{
menuList.style.maxHeight = "0px";
}
}
</script>
<script src="https://kit.fontawesome.com/f8e1a90484.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="googlesheet.js"></script>
</body>
</html>