-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
145 lines (135 loc) · 6 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
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<link rel='stylesheet' href='https://unpkg.com/aos@next/dist/aos.css' />
<link rel='stylesheet' href='css/normalize.css'>
<link rel='stylesheet' href='css/style.css'>
<link rel='icon' type='image/ico' href='resources/logo.png'>
<title>jpd.</title>
</head>
<body>
<!-- pre-loader animation -->
<div class='loader hidden'>
<img src='resources/loader.gif' alt='pre-loader picture'>
</div>
<!-- nav bar -->
<div id='navbar'>
<!-- <div id='navbar' data-aos='fade-in' data-aos-delay='200'> -->
<li> <a href='#home'>home</a> </li>
<li> <a href='#me'>me</a> </li>
<li> <a href='#projects'>projects</a> </li>
<li> <a href='#contact'>contact</a> </li>
</div>
<!-- home page -->
<div id='home'>
<!-- <div id='home' data-aos='fade-in' data-aos-delay='200'> -->
<div class='home-container vh'>
<img src='resources/me.jpg' alt='display picture' class='dp card'>
<div>
<h1>james duong</h1>
<h4>web dev.</h4>
</div>
<div class='social'>
<li>
<a href='https://www.linkedin.com/in/james-phong-duong-9168a89a/' target='_blank'>
<img src='resources/linkedin.svg' alt='clickable linkedin image' class='icon-small'>
</a>
</li>
<li>
<a href='https://github.com/jamesphongduong' target='_blank'>
<img src='resources/github.svg' alt='clickable github image' class='icon-small'>
</a>
</li>
<li>
<a href='https://www.instagram.com/jamesduong/' target='_blank'>
<img src='resources/insta.svg' alt='clickable instagram image' class='icon-small'>
</a>
</li>
<li>
<a href='https://medium.com/@jamesphongduong' target='_blank'>
<img src='resources/medium.svg' alt='clickable medium image' class='icon-small'>
</a>
</li>
</div>
</div>
<a href="#me"></a>
</div>
<!-- me page -->
<div id='me'>
<!-- <div id='me' data-aos='fade-in' data-aos-delay='200'> -->
<h2>me.</h2>
<div>
I'm passionate in coding as I love the process of building things mentally.
<br>
Another strong passion of mine is travelling. Here are some recent photos from my last journey!
</div>
<!--interests -->
<div class='album'>
<div class='album-item one card'></div>
<div class='album-item two card'></div>
<div class='album-item three card'></div>
</div>
<h3>interests</h3>
<div class='interests'>
<li> <img src='resources/console.svg' alt='gaming icon' class='icon'> </li>
<li> <img src='resources/bike.svg' alt='bike icon' class='icon'></li>
<li> <img src='resources/travelling.svg' alt='travelling icon' class='icon'></li>
<li> <img src='resources/dish.svg' alt='food icon' class='icon'></li>
</div>
<a href="#projects"></a>
</div>
<!-- work page -->
<div id='projects'>
<!-- <div id='projects' data-aos='fade-in' data-aos-delay='200'> -->
<h2>projects.</h2>
<div class='project-container'>
<a href="https://github.com/jamesphongduong/todo_js" target='_blank'>
<img src="resources/projects/ProjectA.png" alt="project A item" class='project-item card'> </a>
<a href="https://github.com/jamesphongduong/imageList_react" target='_blank'>
<img src="resources/projects/ProjectB.png" alt="Project B item" class='project-item card'> </a>
<a href="https://github.com/jamesphongduong/journal_REACT" target='_blank'>
<img src="resources/projects/ProjectC.png" alt="Project C item" class='project-item card'> </a>
</div>
<!-- <div class='languages'> -->
<h3>languages I speak</h3>
<div class='languages'>
<li> <img src='resources/ruby.svg' alt='ruby icon' class='icon'>
</li>
<li> <img src='resources/html.svg' alt='html icon' class='icon'>
</li>
<li> <img src='resources/css.svg' alt='css icon' class='icon'>
</li>
<li> <img src='resources/bootstrap.svg' alt='bootstrap icon' class='icon'> </li>
<li> <img src='resources/js.svg' alt='bootstrap icon' class='icon'> </li>
<li> <img src='resources/sass.svg' alt='sass icon' class='icon'> </li>
</div>
<a href="#contact"></a>
</div>
<!-- contact -->
<div id='contact'>
<!-- <div id='contact' data-aos='fade-in' data-aos-delay='200'> -->
<div class='james'>
<h2>contact.</h2>
<p>if you would like to collaborate, <br> please send me an email !</p>
<div>
<a> <img src='resources/mail.svg' alt='bootstrap icon' class='icon' id='email'> </a>
</div>
</div>
<div id='footer'>
© james duong 2018
<br>
icons made by <a href='https://www.flaticon.com/authors/becris' title='Coding'>coding</a> from <a href='https://www.flaticon.com/'
title='Flaticon'>www.flaticon.com</a>, licensed by <a href='http://creativecommons.org/licenses/by/3.0/'
title='Creative Commons BY 3.0' target='_blank'>cc 3.0 </a>
</div>
<a href="#home"></a>
</div>
<!-- importing js scripts -->
<script src='https://unpkg.com/aos@next/dist/aos.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>