-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (229 loc) · 11.4 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Alex Chang">
<meta name="description" content="Alex Chang is a web developer based out of Markham, Ontario.">
<meta name="keywords" content="Alex, Chang, Developer, Markham">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-108401316-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<title>Alex Chang</title>
<!-- Favicon -->
<link rel="icon" href="dist/img/favicon.ico" type="icon/x-image">
<!-- FontAwesome5 CSS -->
<link rel="stylesheet" type="text/css" href="dist/css/all.min.css"/>
<!-- DevIcons CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="dist/css/main.css">
</head>
<body>
<header class="site-header">
<div>
<h1>
<span class="blue-text">A</span>lex <span class="green-text">C</span>hang</a>
</h1>
</div>
<!-- Main Navigation -->
<nav>
<ul>
<li><a href="#about" title="About">ABOUT</a></li>
<li><a href="#projects" title="Projects">PROJECTS</a>
</li>
<li><a href="#contact" title="Contact">CONTACT</a></li>
</ul>
</nav>
<!-- End Navigation -->
</header>
<main>
<div class="splash">
<div class="splash-text">
<p class="text-center">Hi!</p>
<p class="text-center">I'm <span class="text-bold">Alex Chang</span>, and I'm a <span class="text-bold">web developer</span><span class="blink">_</span></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h2 id="about" class="scroll-margin-section text-center">About Me <span class="line">|</span></h2>
</div>
</div>
<section class="row">
<div class="col _25 justify-center">
<img class="profile-img" src="dist/img/alex.jpg" alt="Profile Picture of Alex Chang">
</div>
<div class="col _75">
<p>I am a graduate from Seneca College of Applied Arts and Technology, and a web developer who is always looking to expand their horizons and skillset.</p>
<p>I spend quite a bit of my free time either refining my skills in the field web development. In particular, I am interested in topics such as typography, user interfaces, as well as emerging technologies in web development. I am also enthusiast of open source software, and I try to utilize open source software in my projects or development workflows wherever possible.</p>
<p>
<span class="far fa-file-pdf fa-fw" aria-hidden="true"></span><a href="docs/Alex_Chang_Resume_2023.pdf" target="_blank" class="text-bold">My Resume</a>
</p>
</div>
</section>
<section class="row">
<div class="col more-info">
<h3 class="text-center">My Toolbox <span class="line">|</span></h3>
<ul class="tech">
<li><span class="fab fa-html5" title="HTML5"></span></li>
<li><span class="fab fa-css3-alt" title="CSS3"></span></li>
<li><span class="fab fa-sass" title="SASS/SCSS"></span></li>
<li><span class="fab fa-js" title="Javascript"></span></li>
<li><span class="fab fa-vuejs" title="Vue.js"></span></li>
<li><span class="fab fa-npm" title="npm"></span></li>
<li><span class="fab fa-gulp" title="Gulp"></span></li>
<li><span class="fab fa-git" title="Git"></span></li>
<li><span class="fab fa-github-alt" title="GitHub"></span></li>
<li><span class="fab fa-linux" title="Linux"></span></li>
</ul>
</div>
<div class="col more-info">
<h3 class="text-center">Things I'm Tinkering With <span class="line">|</span></h3>
<ul class="tech">
<li><span class="fab fa-react" title="React"></span></li>
<li><span class="fab fa-node" title="NodeJS"></span></li>
</ul>
</div>
</section>
<section>
<div class="row">
<div class="col">
<h2 id="projects" class="scroll-margin-section text-center">Projects <span class="line">|</span></h2>
</div>
</div>
<div class="projects-section">
<div class="card">
<div class="card-content">
<div class="card-image" style="background-image: url(dist/img/vue-app.png);" alt="Studio Ghibli Vue.js App"></div>
<h3>Studio Ghibli Movies</h3>
<p class="subtitle">Vue.js Application</p>
<p>Coded in: HTML5, CSS3, SCSS, JS(ES6), Vue.js</p>
<p>A Vue.js app that pulls and manipulates movie data from the Studio Ghibli API.</p>
<div class="card-details">
<div class="card-details-inner">
<a href="https://fac42.github.io/projects/vue-app/" target="_blank"><span class="fas fa-globe-americas fa-fw" aria-hidden="true"></span> Live Site</a>
<a href="https://github.com/fac42/vue-app" target="_blank"><span class="fas fa-code fa-fw" aria-hidden="true"></span> Code</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-image" style="background-image: url(dist/img/portfolio.jpg);" alt="Portfolio Website"></div>
<h3>This Website!</h3>
<p class="subtitle">Portfolio Website</p>
<p>Coded in: HTML5, CSS3, SCSS, JS(ES6)</p>
<p>A portfolio website created to display personal projects.</p>
<div class="card-details">
<div class="card-details-inner">
<a href="https://fac42.github.io" target="_blank"><span class="fas fa-globe-americas fa-fw" aria-hidden="true"></span> Live Site</a>
<a href="https://github.com/fac42/fac42.github.io" target="_blank"><span class="fas fa-code fa-fw" aria-hidden="true"></span> Code</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-image" style="background-image: url(dist/img/electron.png);" alt="Electron Application"></div>
<h3>Web Browsers</h3>
<p class="subtitle">Electron Application</p>
<p>Coded in: HTML5, CSS3, SCSS, Bootstrap 4, JS, and jQuery</p>
<p>A desktop application providing a brief overview of modern web browsers. Content is loaded using AJAX and displayed using JS transitions. Application metadata and window behaviour is handled by custom JSON and JS files.</p>
<div class="card-details">
<div class="card-details-inner">
<a href="https://github.com/fac42/electron-app/blob/master/compiled-windows-executable.zip" target="_blank"><span class="fas fa-hdd fa-fw" aria-hidden="true"></span> Download</a>
<a href="https://github.com/fac42/electron-app" target="_blank"><span class="fas fa-code fa-fw" aria-hidden="true"></span> Code</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-image" style="background-image: url(dist/img/php-creature.jpg);" alt="PHP Creature Generator"></div>
<h3>PHP Creature Generator</h3>
<p class="subtitle">PHP Forms and Input Sanitization</p>
<p>Coded in: HTML5, CSS3, Bootstrap 3, PHP, and jQuery</p>
<p>A creature generator written primarily in PHP and jQuery. The user is presented with a simple form to complete. Depending on the input, the user is then presented with a randomly generated result, which is derived from an array of stored values. Visual JS form validations, PHP form validations, string manipulation, and sanitization are used.</p>
<div class="card-details">
<div class="card-details-inner">
<a href="" target="_blank" style="display: none;"><span class="fas fa-globe-americas fa-fw" aria-hidden="true"></span> Live Site</a>
<a href="https://github.com/fac42/php-creature-generator" target="_blank"><span class="fas fa-code fa-fw" aria-hidden="true"></span> Code</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-image" style="background-image: url(dist/img/random-number.jpg);" alt="Random Number Game"></div>
<h3>Random Number Game</h3>
<p class="subtitle">HTML5 Canvas and Chart.JS</p>
<p>Coded in: HTML5, CSS3, Materialize.CSS, JS, and Chart.JS</p>
<p>A game written using HTML5 Canvas. Two numbers are shown to the player, who then must determine which of the numbers are greater; their selection is made by using the left or right arrow key. Results are tracked and displayed in an accompanying chart, provided by Chart.JS.</p>
<div class="card-details">
<div class="card-details-inner">
<a href="https://fac42.github.io/projects/random-number-game/" target="_blank"><span class="fas fa-globe-americas fa-fw" aria-hidden="true"></span> Live Site</a>
<a href="https://github.com/fac42/random-number-game" target="_blank"><span class="fas fa-code fa-fw" aria-hidden="true"></span> Code</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="card-image" style="background-image: url(dist/img/canvas-game.png);" alt="HTML5 Canvas Game"></div>
<h3>HTML5 Canvas Game</h3>
<p class="subtitle">HTML5 Canvas and JS</p>
<p>Coded in: HTML5, CSS3, and JS</p>
<p>A simple movement-based game coded in HTML5 and Javascript. Movement is handled by the arrow keys, and basic collision detection is implemented.</p>
<div class="card-details">
<div class="card-details-inner">
<a href="https://fac42.github.io/projects/html5canvas-game" target="_blank"><span class="fas fa-globe-americas fa-fw" aria-hidden="true"></span> Live Site</a>
<a href="https://github.com/fac42/html5canvas-game" target="_blank"><span class="fas fa-code fa-fw" aria-hidden="true"></span> Code</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col">
<h2 id="contact" class="scroll-margin-section text-center">Contact <span class="line">|</span></h2>
</div>
</div>
<div class="row">
<div class="col justify-center align-center">
<h3>Find me @:</h3>
<ul class="contact-list">
<li>
<span class="fas fa-mobile-alt fa-fw" aria-label="Mobile Phone"></span> 647.510.5260</li>
<li>
<a href="mailto:alexchang42@outlook.com"><span class="fas fa-envelope fa-fw" aria-label="Email"></span> alexchang42@outlook.com</a></li>
<li>
<a href="https://github.com/fac42" target="_blank"><span class="fab fa-github fa-fw" aria-label="GitHub"></span> /fac42</a></li>
<li>
<a href="https://www.linkedin.com/in/alexchang42" target="_blank"><span class="fab fa-linkedin fa-fw" aria-label="LinkedIn"></span> /alexchang42</a>
</li>
</ul>
</div>
</div>
</section>
</div>
</main>
<footer>
<p><small>Image Credit: <a href="https://unsplash.com/@vincentiu" target="_blank" rel="noopener">Vincentiu Solomon</a> on Unsplash</small></p>
<p><small>© A.C. <span id="date"></span></small></p>
</footer>
<!-- Custom JS -->
<script src="dist/js/main.js"></script>
</body>
</html>