MaxsPortfolio/index.html at master · maximusunc/MaxsPortfolio · GitHub

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
<!DOCTYPE html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Max Wang's Portfolio</title>
    <!-- picture on tab -->
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
    <!-- materialize css cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <!-- local css file -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
</head>
<body>
    <!-- Page Header -->
    <header class="page-header" id="top">
        <div class="row">
            <div class="col l4 m12 s12">
                <img id="max" class="responsive-img" src="assets/images/maxphoto.png" alt="Max Photo">
            </div>
            <div class="container col l8 m12 s12" id="name">
                <h1>Max Wang, Software Developer</h1>
                <a href="mailto:maxwellswang@gmail.com">Email: maxwellswang@gmail.com</a>
            </div>
        </div>
        <div class="row">
            <div id="nav">
                <a href="#about">About</a>
                <a href="#projects">Projects</a>
                <a href="#connect">Connect</a>
            </div>
        </div>
    </header>

    <main id="page-main">
        <!-- First background image -->
        <div class="parallax-container">
            <div class="parallax">
                <img class="responsive-img" src="assets/images/parallax1.jpg">
            </div>
        </div>
        <!-- About me section with technologies -->
        <div class="section" id="about">
            <div class="row container">
                <h2 class="header center">About Me</h2>
                <p>
                    I'm a software engineer who is passionate about computer technology and making a difference in this ever-expanding world of the internet. I'm fully committed to making this a wonderful career and turning my day job into something that I'll be excited to come in and work on every single day.
                    <strong>Fun Fact:</strong> My very first coding experience was in high school with a TI-83 graphing calculator. My older brothers were both studying computer science in college and I wanted to give it a try, so I made the game "Pong" from scratch! That experience stuck with me and I'm so glad I've been able to come full circle!
                </p>
                <h3>Technologies I've learned so far:</h3>
                <div class="row">
                    <ul>
                        <div class="col s6">
                            <li>- HTML</li>
                            <li>- CSS</li>
                            <li>- Javascript</li>
                            <li>- Python</li>
                            <li>- Bootstrap</li>
                            <li>- JQuery</li>
                            <li>- NodeJS</li>
                            <li>- Express</li>
                            <li>- Auth0</li>
                        </div>
                        <div class="col s6">
                            <li>- MySQL</li>
                            <li>- Sequelize</li>
                            <li>- Heroku</li>
                            <li>- MongoDB</li>
                            <li>- Mocha</li>
                            <li>- Chai</li>
                            <li>- Nightmare</li>
                            <li>- React</li>
                            <li>- And I just learned Materialize and Sass to build this site!</li>
                        </div>
                    </ul>
                </div>
            </div>
            <!-- Image carousel of technologies -->
            <div class="row container">
                <div class="carousel">
                    <a class="carousel-item" href="#one!"><img src="assets/images/html.png"></a>
                    <a class="carousel-item" href="#two!"><img src="assets/images/css.png"></a>
                    <a class="carousel-item" href="#three!"><img src="assets/images/javascript.png"></a>
                    <a class="carousel-item" href="#four!"><img src="assets/images/python.png"></a>
                    <a class="carousel-item" href="#five!"><img src="assets/images/jquery.png"></a>
                    <a class="carousel-item" href="#six!"><img src="assets/images/node.png"></a>
                    <a class="carousel-item" href="#seven!"><img src="assets/images/heroku.png"></a>
                    <a class="carousel-item" href="#eight!"><img src="assets/images/mongodb.png"></a>
                    <a class="carousel-item" href="#nine!"><img src="assets/images/react.png"></a>
                    <a class="carousel-item" href="#ten!"><img src="assets/images/mocha.svg"></a>
                    <a class="carousel-item" href="#eleven!"><img src="assets/images/sass.png"></a>
                    <a class="carousel-item" href="#twelve!"><img src="assets/images/materialize.png"></a>
                    <a class="carousel-item" href="#thirteen!"><img src="assets/images/auth0.png"></a>
                </div>
            </div>

            <div class="top">
                <a href="#top">Back to top</a>
            </div>

        </div>
        <!-- Second background image -->
        <div class="parallax-container">
            <div class="parallax">
                <img class="responsive-img" src="assets/images/parallax2.jpg">
            </div>
        </div>
        <!-- My projects section -->
        <div class="section" id="projects">
            <div class="row container">
                <h1 class="header center">My Projects</h1>

                <div id="trombone">
                    <h2>Trombone Collection</h2>

                    <a class="project animatedProject responsive-img" href="https://trombonecatalog.herokuapp.com" target="_blank">
                        <img class="project-img" src="assets/images/tromboneCollection.png">
                        <p class="animatedDetails">This is a site I built for a friend who wanted to store a database of historic trombones made before 1800. I used React.js, Express.js, Materialize, MongoDB, Heroku, and AWS S3.</p>
                    </a>
                    <a href="https://github.com/maximusunc/tromboneCollection" target="_blank">Github Link</a>
                </div>
                <div id="rentplace">
                    <h2>Rent Place</h2>

                    <a class="project animatedProject responsive-img" href="https://rent-place.herokuapp.com" target="_blank">
                        <img class="project-img" src="assets/images/rentplace.png">
                        <p class="animatedDetails">This was my third project using Express.js, MongoDB, React.js, Materialize, and Auth0 for authentication. This app is a simple landlord/tenant app that keeps track of property details, assigned tenants, and facilitates service requests.</p>
                    </a>
                    <a href="https://github.com/maximusunc/RentPlace" target="_blank">Github Link</a>
                </div>
                <div id="rps">
                    <h2>Rock Paper Scissors</h2>

                    <a class="project animatedProject responsive-img" href="https://maximusunc.github.io/Rock-Paper-Scissors-Multiplayer/" target="_blank">
                        <img class="project-img" src="assets/images/rps.png">
                        <p class="animatedDetails">This is a full-stack app I built that uses Google Firebase for data storage and dynamic page updates between multiple users on separate pages in real time.</p>
                    </a>
                    <a href="https://github.com/maximusunc/Rock-Paper-Scissors-Multiplayer" target="_blank">Github Link</a>
                </div>
                <div id="stuffshare">
                    <h2>StuffShare</h2>

                    <a class="project animatedProject responsive-img" href="https://pure-lowlands-45092.herokuapp.com/" target="_blank">
                        <img class="project-img" src="assets/images/StuffShare.png">
                        <p class="animatedDetails">This was my second group project to create an app using HTML, CSS, Passport.js, NodeJS, Express, Sequelize, MySQL, and Mocha/Chai/Nightmare testing.</p>
                    </a>
                    <a href="https://github.com/maximusunc/StuffShare" target="_blank">Github Link</a>
                </div>

                <p><strong>Final Fun Fact:</strong> Apart from being a software engineer, I'm a classically trained tuba player! You can hear me laying down the bass in the Durham Symphony Orchestra!</p>

            </div>

            <div class="top">
                <a href="#top">Back to top</a>
            </div>

        </div>
        <!-- Last background image -->
        <div class="parallax-container">
            <div class="parallax">
                <img class="responsive-img" src="assets/images/parallax3.jpg">
            </div>
        </div>
    </main>

    <!-- Page footer -->
    <footer class="page-footer" id="connect">
        <div class="container row">
            <div class="col l6 s12">
                <h2>Connect with me!</h2>
                <p>Thanks so much for checking me out! If you'd like to learn even more, just click the links to the right to go to my Facebook, Github and LinkedIn profile pages! If you like what you see, you can also check out my <a href="https://docs.google.com/document/d/1dxhHBSCQfINv2vlWMF1PZtvaRLahl-A0mz7dijp-DPA" target="_blank" id="resume">resume</a>.</p>
                <a href="mailto:maxwellswang@gmail.com">Email: maxwellswang@gmail.com</a>
            </div>
            <div class="col l4 offset-l2 s12">
                <h2 class="center">Links</h2>
                <div id="media">
                    <a href="https://www.facebook.com/max.wang.7549?ref=bookmarks" target="_blank"><img src="assets/images/facebook.png"></a>
                    <a href="https://github.com/maximusunc" target="_blank"><img src="assets/images/github.png"></a>
                    <a href="https://www.linkedin.com/in/maxwell-s-wang/" target="_blank"><img src="assets/images/linkedin.png"></a>
                </div>
            </div>

        </div>

        <div class="top">
            <a href="#top">Back to top</a>
        </div>

        <div class="footer-copyright">
            <div class="container center">
                © 2017 Copyright Max Wang, All rights reserved
            </div>
        </div>
    </footer>

    <!-- JQuery cdn -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- materialize js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <!-- local js file -->
    <script type="text/javascript" src="assets/javascript.js"></script>

</body>
</html>