-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (65 loc) · 3.03 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sun Woo Chang</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="content container g-0">
<div class="head">
<!-- Name -->
<h1 class="name">Sun Woo Chang</h1>
<!-- Short description about myself -->
<p class="description">3rd year software engineer student at the University of British Columbia.<br>
Loves learning and building the technology to improve our lives.</p>
</div>
<div class="body">
<div class="row">
<!-- Left side -->
<!-- justify-content-end -->
<div class="col-lg-6 col-sm-12 text-center">
<!-- Profile picture -->
<img class="profile " src="images/ProfilePicture.png" alt="Profile Picture">
</div>
<!-- Right side -->
<div class="col-lg-6 col-sm-12">
<div class="fill-height d-flex flex-column">
<div class="d-flex">
<!-- Resume Button -->
<h1 class="resume-title"><a href="https://hussainj.com/files/HussainJafferyResume.pdf" class="btn resume-btn">Resume</a></h1>
</div>
<div class=" d-flex flex-grow-1 align-item-end links">
<div class="row d-flex flex-column">
<div class=" col-lg-auto col-md-12 social">
<!-- Email Button -->
<a href="mailto:[email protected]" class="btn align-self-end other-btn">Email</a>
</div>
<div class=" col-lg-auto col-md-12 social">
<!-- LinkedIn Button -->
<a href="https://www.linkedin.com/in/sunwoochang/" class="btn align-self-end other-btn">LinkedIn</a>
</div>
<div class="col-lg-auto col-md-12 social">
<!-- Portfolio Button -->
<a href="" class="btn align-self-end other-btn">Portfolio</a>
</div>
<!-- anying small than md has size of 12 -->
<div class="col-lg-auto col-md-12 social">
<!-- GitHub Button -->
<a href="https://github.com/SunWooDev" class="btn align-self-end other-btn">GitHub</a>
</div>
</div>
</div>
</div>
</div>
<!-- End of <div class="row"> -->
</div>
<!-- End of body -->
</div>
<!-- End of <div class="content container-fluid"> -->
</div>
</body>
</html>