forked from lewagon/bootstrap-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (145 loc) · 7.35 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>--- SHAWNLJJ ---</title>
<link rel="stylesheet" href="css/shawnljj.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- Leave those next 4 lines if you care about users using IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="shawnljj-body">
<div class="shawnljj-body container">
<nav class="navbar-light fixed-top navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo.svg" height="48px" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#education">EDUCATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!--HERO-->
<div id="hero" class="row no-margins">
<div class="center-parent">
<img src="img/SLJJ-shield.svg" class="center shield" />
<div class="center hero-text-regular">this is</div>
<div class="center hero-text-bold">SHAWN</div>
</div>
<img src="img/hero.jpg" class="hero-img"/>
</div>
<!--ABOUT-->
<div id="about" class="row center-relative no-margins">
<div class="col-lg-6 square image-square">
<img src="img/about.jpg" class="about-img" />
<div class="text-container">
<p class="text strong">Born and raised in Singapore</p>
<p class="text">I am excited about entrepreneurship, leadership, technology and human-centered design. I aim to use my skills to fulfill people's potentials. I am interested to know you and your stories and seek to build genuine relationships. I believe in human-centered design, and I always place the users' needs first.</p>
</div>
</div>
<div class="col-lg-6 square image-square profile-pic">
</div>
</div>
<!--PROJECTS-->
<div id="projects" class="row no-margins">
<div class="col-lg-6 square projects-square row no-margins">
<div class="col-6 project-thumbnail">
<a class="btn btn-dark project-link" href="http://www.weddingcentral.sg" role="button">VISIT SITE</a>
<div class="project-image" id="weddingCentralProj"></div>
</div>
<div class="col-6 project-thumbnail">
<a class="btn btn-dark project-link" href="http://desmond.freeway.studio" role="button">VISIT SITE</a>
<div class="project-image" id="desmondProj"></div>
</div>
<div class="w-100"></div>
<div class="col-6 project-thumbnail">
<a class="btn btn-dark project-link" href="http://www.iontone.com" role="button">VISIT SITE</a>
<div class="project-image" id="iontoneProj"></div>
</div>
<div class="col-6 project-thumbnail">
<a class="btn btn-dark project-link" href="https://itunes.apple.com/sg/app/ndpeepsapp/id1004574578?mt=8" role="button">VISIT SITE</a>
<div class="project-image" id="ndpProj"></div>
</div>
</div>
<div class="col-lg-6 square projects-square">
<div class="text-container">
<p class="text strong">(user)Experience</p>
<p class="text">
I've had the privilege of working with some amazing people who have trusted my skills in web development and user experience design. In the past 3 years, I have worked both alone and in teams, on personal projects and commercial products. I have focused primarily on web/hybrid app technologies, user experience design and front-end development. I do most of my work with aZaaS Pte Ltd, a leading software company in cloud and business process automation technologies.
</p>
<img src="img/azaas.png" class="azaas-img" />
</div>
</div>
</div>
<!--EDUCATION-->
<div id="education" class="row no-margins center-relative">
<div class="col-lg-6 square">
<div class="text-container">
<p class="text strong">Knowledge is power</p>
<p class="text">
From my first web design class in Temasek Polytechnic, I quickly realized that I have a yearning to learn more about technology. I thoroughly enjoyed reading my diploma in information technology and did not hesitate to apply for a spot in NUS to study computer science. As I learn more and more each day, I try to put them into practice by working on projects.
</p>
</div>
</div>
<div class="col-lg-6 square image-square education-pic">
</div>
</div>
<!--CONTACT-->
<div id="contact" class="row no-margins">
<div class="col-lg-6 square image-square">
<p class="form-title text strong">Drop me a mail</p>
<form class="container" id="needs-validation" novalidate>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<div class="invalid-feedback">
Please provide a valid e-mail address.
</div>
<small id="emailHelp" class="form-text text-muted">I won't share your e-mail with anyone, don't worry.</small>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-dark">Send</button>
</form>
</div>
<div class="col-lg-6 square">
<div class="text-container">
<p class="text strong">I'm always ready for a chat</p>
<p class="text">
If you have an exciting idea you need some help with, or looking for a business partner, or if you're simply bored and wanna talk to somebody, just drop me a mail ;)
</p>
</div>
</div>
</div>
</div>
</div>
<!-- TODO: Here goes your content! -->
<!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/shawnljj.js"></script>
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.13'><\/script>".replace("HOST", location.hostname));
//]]></script>
</body>
</html>