-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (120 loc) · 5.97 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
<!DOCTYPE HTML>
<!--
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Christine Yang</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="icon" href="images/CY.png" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<img class="logo" src="images/headshot.jpeg" alt=""/>
<div class="content">
<div class="inner">
<h1>Christine Yang</h1>
<p>
Fullstack software engineer
</p>
</div>
</div>
<nav>
<ul>
<li><a href="#intro">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a target="_blank" href="https://drive.google.com/file/d/1PmP22IiSG8oZlOm7KbH00_GP-n7HQzCO/view?usp=sharing">Resume</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<!-- Intro -->
<article id="intro">
<h2 class="major">Intro</h2>
<p>Hello World! Google is my best friend and in my free time, I love taking walks that inspire creativity and clear the mind.</p>
<p>Fullstack Developer based in NYC | NJ</p>
<h2 class="major">SKILLS</h2>
<div class="logo-images">
<p><img class="logos" src="images/logos/js.png" alt="">JavaScript</p>
<p><img class="logos" src="images/logos/react.png" alt="">React</p>
<p><img class="logos" src="images/logos/redux.png" alt="">Redux</p>
<p><img class="logos" src="images/logos/html.png" alt="">HTML</p>
<p><img class="logos" src="images/logos/css.png" alt="">CSS</p>
<p><img class="logos" src="images/logos/ruby.png" alt="">Ruby</p>
<p><img class="logos" src="images/logos/rails.png" alt="">Rails</p>
<p><img class="logos" src="images/logos/mern_logo.png" alt="">MERN Stack</p>
<p><img class="logos" src="images/logos/postgresql.png" alt="">Postgresql</p>
<p><img class="logos" src="images/logos/webpack.png" alt="">Webpack</p>
<p><img class="logos" src="images/logos/git.png" alt="">Git</p>
<p><img class="logos" src="images/logos/heroku.png" alt="">Heroku</p>
<p><img class="logos" src="images/logos/awss3.png" alt="">AWS S3</p>
</div>
<p>Check out my <a href="#projects">projects here</a></p>
</article>
<!-- Projects -->
<article id="projects">
<h2 class="major">Projects</h2>
<img class="image main" src="images/pintage.png" />
<h3>Pintage</h3>
<p>
Pintage is a Pinterest clone that was built with a Postgresql database. A Ruby on Rails backend along with JSON Jbuilder allows AJAX calls to fetch data from the backend API.
React class components in addition to the utilization of the Redux store, allows for cleaner frontend state management. Images were stored with AWS S3 buckets.
</p>
<img class="image main" src="images/altusempire.png" />
<h3>Altus Empire</h3>
<p>
Altus Empire was built using MongoDB Altas as its databse, Express as a framework for Node.js, and React/Redux for state management (MERN) stack in addition with Google Maps API.
</p>
<video class="image main video" autoplay loop>
<source src="images/leo.mov">
</video>
<h3>Leo</h3>
<p>
Leo is built using Vanilla Javascript and HTML Canvas. Animation is done through recursively calling the requestAnimationFrame function, allowing for a smooth render of the game.
Event listeners make user keyboard inputs possible.
</p>
<p><a href="#about">About me</a></p>
</article>
<!-- About -->
<article id="about">
<h2 class="major">About</h2>
<p>
Before deciding to pursue tech more seriously, I received my B.S. in Health Science and mainly worked in medical administration. I wanted to pursue a career I was passionate about and craved to be in an environment where I was constantly learning something fresh and exciting!
I devoted myself full-time in a software engineering bootcamp to further my knowledge of a wide variety of languages, frameworks, and more.
</p>
<p>
In the span of 11 weeks, I pair programmed with ~40 individuals for code challenges and micro-projects ranging from creating command line games, to a web application using the MERN stack alongside a team of three other bright engineers.
I’m interested in working for a company that stands for diversity and inclusion, two values that I resonate with.
My driving factor in pursuing software engineering revolves around finding innovative and creative solutions.
</p>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a target="_blank" href="https://www.linkedin.com/in/yang-christine/" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a target="_blank" href="https://github.com/yangc95" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
<p class="copyright">© <a href="https://html5up.net">HTML5 UP</a></p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>