-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (174 loc) · 8.39 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
<!DOCTYPE html>
<html>
<head>
<title>Winfield Ly</title>
<!-- Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/custom.css"/>
<!-- Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- Nav-->
<nav class="teal">
<div class="nav-wrapper container">
<a href="#top" class="brand-logo">Winfield</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#about">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="#about">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- Main section-->
<div id="about" class="section no-pad-bot" id="index-banner">
<div class="container">
<div class="row">
<br><br>
<div class="col s4 push-s8">
<p><img src="img/winfield.jpg" alt="Winfield" class="circle responsive-img"></p>
</div>
<div class="col s8 pull-s4">
<h2>Hi, I'm Winfield Ly</h2>
<h5 class="s12 light">A Junior Developer, Jr. Bioinformatician and Writer, with practical experience in
web development and data analysis.</h5>
<br>
<h5 class="s12 light">I'm devoted to learning new technologies and always thinking of ideas for my stories.</h5>
</div>
<br><br>
</div>
</div>
</div>
<!-- Portfolio section -->
<div id="portfolio" class="section no-pad-bot" id="index-banner">
<div class="container">
<div class="row">
<h3>Portfolio</h3>
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/A_Love_Too_Late.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">A Love Too Late<i class="material-icons right">more_vert</i></span>
<p><a target="_blank" href="https://www.smashwords.com/books/view/314257">Smashwords</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">A Love Too Late<i class="material-icons right">close</i></span>
<p><b>Synopsis:</b> If the time to say what you truly thought deep down has already passed, do you
move on, or remain in the past while living in the present filled with regrets? Jackie has
always loved his childhood friend, Joyce but she is getting married to someone else. While
trying to continue on with his life, he always ends up thinking about her. A Love Too Late
explores a snippet of the two childhood friends.</p>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/side_by_side.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Side By Side<i class="material-icons right">more_vert</i></span>
<p><a target="_blank" href="https://www.smashwords.com/books/view/410000">Smashwords</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Side By Side<i class="material-icons right">close</i></span>
<p><b>Synopsis:</b> After two weeks from the break up from his first love, Jackie has been
reminiscing the memories about her while his good friend, Kim, has been trying to support him
to move on. Then as if fantasy meets reality, Jackie gets a second chance to try to make things
right from help that he least suspects.</p>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/forever_and_ever.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Forever and Ever<i class="material-icons right">more_vert</i></span>
<p><a target="_blank" href="https://www.smashwords.com/books/view/605866">Smashwords</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Forever and Ever<i class="material-icons right">close</i></span>
<p><b>Synopsis:</b> Nina and Mina are twin sisters that both have feelings for their
childhood friend, Ken. From the beginning, Mina and Ken were instantly attracted, leaving
Nina as the third wheel. With love for her sister flowing strong, Nina decides to hide her
feelings. But after an unfortunate incident that will forever change the friendship between
the three friends, will Nina accept her feelings to move on?</p>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/whenever_im_with_you_cover.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Whenever I'm With You<i class="material-icons right">more_vert</i></span>
<p><a target="_blank" href="https://www.smashwords.com/books/view/907838">Smashwords</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Whenever I'm With You<i class="material-icons right">close</i></span>
<p><b>Synopsis:</b> Mimi has been best friends with Airi since childhood, who they have always
supported one another with everything. After a setback, Mimi felt disappointed and unsure of
herself. She feels grateful with the support coming from people important to her. This story
explores a snippet of her personal growth.</p>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/H!PFall2018.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Hello! Project Fan Page<i class="material-icons right">more_vert</i></span>
<p><a target="_blank" href="hp_landing_page.html">Link</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Hello! Project Fan Page<i class="material-icons right">close</i></span>
<p>A landing page with a collection of links where new (and current) fans can go to learn, and keep up-to-date on various activities from Hello! Project.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="page-footer teal">
<div id="contact" class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a target="_blank" class="grey-text text-lighten-3" href="mailto:winfield.ly@pm.me">E-mail</a></li>
<li><a target="_blank" class="grey-text text-lighten-3" href="https://www.facebook.com/winfield.ly510/">Facebook</a></li>
<li><a target="_blank" class="grey-text text-lighten-3" href="https://winfieldly.blogspot.com/">Blog</a></li>
<li><a target="_blank" class="grey-text text-lighten-3" href="https://www.linkedin.com/in/winfieldly/">Linkedin</a></li>
<li><a target="_blank" class="grey-text text-lighten-3" href="https://github.com/wly5">GitHub</a></li>
</ul>
</div>
</div>
</div>
<div id="copyright" class="footer-copyright">
<div class="container">
© 2018 Winfield Ly
</div>
</div>
</footer>
<!-- JavaScript at end of body for optmized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>