forked from CodeYourFuture/Portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (197 loc) · 7.58 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
207
208
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My Portfolio</title>
<meta
name="description"
content="The technical portfolio of trainee name"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- suppress FOUC-->
<style>
html {
animation: fade-in 1s;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<link
rel="stylesheet"
href="style.css"
media="print"
onload="this.media='all'"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;800&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<h1>Hello there!</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main tabindex="0">
<section id="about">
<!-- <header><h2>About Me</h2></header> -->
<div class="profile-container">
<div class="profile-card">
<img
src="/images/profile.jpg"
alt="Zaw Khing Photo"
class="profile-img"
/>
</div>
<div class="profile-card">
<h2>Zaw Myo Khing</h2>
<h4>Front End Developer</h4>
</div>
</div>
<div class="profile-info">
<p>
A high-achieving computer science graduate with web development
skills from IT project work and academic training. Experience
working in different retail and hospitality sectors and on the
largest social media platform. Looking for an opportunity to expand
my knowledge and put what I have learned into practice while meeting
the organisation's goals as a junior web developer and having a
scope of continuous learning.
</p>
</div>
</section>
<section id="projects">
<header><h2>Projects Showcase</h2></header>
<div class="project-container">
<div class="project-card">
<img src="/images/studybuddies.png" alt="Zaw Khing Photo" />
<h3>Study-Buddies</h3>
<p>
Study-Buddies app allows Code Your Future trainees to create study
groups at their own convenience when they want to study together
or do assignments at CYF.
</p>
<ul>
<li>
The system has a login page where user can contact admin to set
one up.
</li>
<li>
Trainees can share their time and date when they are available
to study and the system will show the availability of other
trainees
</li>
<li>Trainees are able to get in touch to create study groups</li>
</ul>
<p>
<b>Tech Stack:</b> HTML5, CSS3, Bootstrap, JavaScript, React.js, Node.js,
PostgreSQL
</p>
<a href="https://starter-kit-f057.onrender.com/home" target="_blank">
<button>Go to deployed site</button>
</a>
</div>
<div class="project-card">
<img src="/images/weather.png" alt="Zaw Khing Photo" />
<h3>Rainy Play Time</h3>
<ul>
<li>This project is weather app that allows user can search location
where they want to see the weather forecast</li>
<li>It displays
current weather temperature, humidity and air pressure along with
weather icon</li>
<li>It will also display the weather forecast for the next 24 hours
by 3 hours chunk</li>
</ul>
<p><b>Tech Stack:</b> HTML5, CSS3, JavaScript,React.js</p>
<a href="https://cyf-zkhing-rainyplaytime.netlify.app/" target="_blank">
<button>Go to deployed site</button>
</a>
</div>
<div class="project-card">
<img src="/images/tinyleaf.png" alt="Zaw Khing Photo" />
<h3>Tiny Leaf</h3>
<ul>
<li>Tiny Leaf is a tea house where user will see home page
about their business when user first visits to the web page </li>
<li>Second page is about menu where all available menu items are displayed</li>
<li>Last page is about reservation where user can book the table</li>
</ul>
<p><b>Tech Stack:</b> HTML5, CSS3, JavaScript, React.js</p>
<a href="https://cyf-zkhing-tinyleaf.netlify.app/" target="_blank">
<button>Go to deployed site</button>
</a>
</div>
</div>
</section>
<section id="contact">
<div class="contact-container">
<div class="contact-info">
<header><h2>Contact me</h2></header>
<p>You got a problem to solve?</p>
</div>
<div class="contact-card">
<form>
<div>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Your name.." />
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Your email.." />
</div>
<div>
<label for="email">Message</label>
<textarea>Your message..</textarea>
</div>
<input type="submit" />
</form>
<!-- <p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
amet consectetur?
</p> -->
</div>
</div>
</section>
</main>
<footer>
<h3>
<a href="https://github.com/CodeYourFuture/Portfolio"
><svg
focusable="false"
role="presentation"
viewbox="0 0 98 96"
width="48"
height="48"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="currentColor"
/>
</svg>
Read me</a
>
</h3>
</footer>
</body>
</html>