├── .gitignore ├── LICENSE.txt ├── README.md ├── script.js ├── styles.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | /images -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [2018] [Hunter Harding] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Attractive Web Portoflio 2 | 3 | View an example of this portfolio here: www.hunterharding.com 4 | 5 | This is my personal web portfolio that I built to increase my web presence, create a vector that people can easily contact me at, and to show that I have successfully taught myself a great deal of front-end development concepts. It has links to linkedIn/Twitter/Github/resume.pdf, a content body, projects panel, and a contact me page. 6 | 7 | I have created exact instructions on how to host this website yourself, from creating your own free web server, to moving the portfolio onto the web server. Please read the USAGE section, and then move onto the INSTALLING section! 8 | 9 | ## Usage 10 | 11 | *Note, This project is licensed under the MIT License, meaning you are free to use and edit this project, as long as you attribute me as the source creator!* 12 | 13 | Below I will outline how you can easily get this web portfolio set up. 14 | 15 | ### Prerequisites 16 | 17 | ``` 18 | Web Server. Instructions below for how I did it. 19 | ``` 20 | 21 | ### Installing 22 | 23 | ``` 24 | You must have a web host in order for this to work online. I followed this tutorial: 25 | 26 | https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/install-LAMP.html 27 | 28 | Once you have this complete, connect to your webserver using an FTP program, and simply drag the files in this repo to a directory on your webserver, and you're good to go! 29 | 30 | ``` 31 | 32 | 33 | ## Built With 34 | 35 | * [JavaScript](https://www.javascript.com/) - Scripting language that runs in browser engine 36 | * [JQuery](https://jquery.com/) - Used to select & manipulate elements 37 | * [HTML](https://en.wikipedia.org/wiki/HTML) - Used to structure the page 38 | * [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - CSS styles the page. 39 | * [Animate.css](https://daneden.github.io/animate.css/) - Used for lightweight and visually appealing animations 40 | 41 | ## Contributing 42 | 43 | Please feel free to submit a pull requests to me. 44 | 45 | 46 | ## Authors 47 | 48 | * **Hunter Harding** - *Creator* - [My Portfolio](http://www.hunterharding.com) 49 | 50 | 51 | ## Acknowledgments 52 | 53 | * Thank you to Amazon for the great AWS documentation! -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* ON LOAD */ 2 | $(document).ready(function(){ 3 | $('[data-toggle="tooltip"]').tooltip(); 4 | }); 5 | 6 | $(document).ready((function() { 7 | console.log("Setting Timeout!"); 8 | setTimeout(function(){ 9 | console.log("Timeout RAN!"); 10 | $('#introTitle').removeClass('invisible'); 11 | $('#introTitle').addClass('animated flipInX'); 12 | } 13 | , 600); 14 | })); 15 | 16 | $(document).ready((function() { 17 | console.log("Setting Timeout!"); 18 | setTimeout(function(){ 19 | console.log("Timeout RAN!"); 20 | $('#introSubtitle').removeClass('invisible'); 21 | $('#introSubtitle').addClass('animated flipInX'); 22 | } 23 | , 750); 24 | })); 25 | 26 | $(document).ready((function() { 27 | console.log("Setting Timeout!"); 28 | setTimeout(function(){ 29 | console.log("Timeout RAN!"); 30 | $('#introLocation').removeClass('invisible'); 31 | $('#introLocation').addClass('animated flipInX'); 32 | } 33 | , 900); 34 | })); 35 | 36 | $(document).ready((function() { 37 | console.log("Setting Timeout!"); 38 | setTimeout(function(){ 39 | console.log("Timeout RAN!"); 40 | $('#introArrowButton').removeClass('invisible'); 41 | $('#introArrowButton').addClass('animated flipInX'); 42 | } 43 | , 1050); 44 | })); 45 | 46 | $(document).ready((function() { 47 | console.log("Setting Timeout!"); 48 | setTimeout(function(){ 49 | console.log("Timeout RAN!"); 50 | $('#github').removeClass('invisible'); 51 | $('#github').addClass('animated fadeIn'); 52 | } 53 | , 1300); 54 | })); 55 | 56 | $(document).ready((function() { 57 | console.log("Setting Timeout!"); 58 | setTimeout(function(){ 59 | console.log("Timeout RAN!"); 60 | $('#twitter').removeClass('invisible'); 61 | $('#twitter').addClass('animated fadeIn'); 62 | } 63 | , 1450); 64 | })); 65 | 66 | $(document).ready((function() { 67 | console.log("Setting Timeout!"); 68 | setTimeout(function(){ 69 | console.log("Timeout RAN!"); 70 | $('#linkedin').removeClass('invisible'); 71 | $('#linkedin').addClass('animated fadeIn'); 72 | } 73 | , 1600); 74 | })); 75 | 76 | $(document).ready((function() { 77 | console.log("Setting Timeout!"); 78 | setTimeout(function(){ 79 | console.log("Timeout RAN!"); 80 | $('#resume').removeClass('invisible'); 81 | $('#resume').addClass('animated fadeIn'); 82 | } 83 | , 1750); 84 | })); 85 | 86 | 87 | 88 | 89 | /* HELPS MOBILE */ 90 | $(document).ready((function() { 91 | 92 | if (($(window).width()/$(window).height()) < 1.4469) { 93 | $('#aboutMeCard').removeClass("animated invisible "); 94 | $('#aboutMeButton1').removeClass("animated invisible "); 95 | $('#projectCard1').removeClass("animated invisible "); 96 | $('#projectCard2').removeClass("animated invisible "); 97 | $('#projectCard3').removeClass("animated invisible "); 98 | $('#contactCard').removeClass("animated invisible "); 99 | 100 | 101 | }; 102 | 103 | })); 104 | 105 | console.log(($(window).width()/$(window).height())); 106 | /*introCol hide content*/ 107 | $(window).scroll(function(){ 108 | if (($(window).width()/$(window).height()) > 1.4469){ 109 | if ($(this).scrollTop() < 35) { 110 | $('#introTitle').removeClass('flipOutX'); 111 | setTimeout(function(){ 112 | $('#introSubtitle').removeClass('flipOutX'); 113 | }, 150); 114 | 115 | setTimeout(function(){ 116 | $('#introLocation').removeClass('flipOutX'); 117 | }, 300); 118 | 119 | setTimeout(function(){ 120 | $('#introArrowButton').removeClass('flipOutX'); 121 | }, 450); 122 | 123 | 124 | console.log("Removing flipOutX"); 125 | $('#introTitle').addClass('flipInX'); 126 | setTimeout(function(){ 127 | $('#introSubtitle').addClass('flipInX'); 128 | }, 150); 129 | setTimeout(function(){ 130 | $('#introLocation').addClass('flipInX'); 131 | }, 300); 132 | setTimeout(function(){ 133 | $('#introArrowButton').addClass('flipInX'); 134 | }, 450); 135 | }; 136 | console.log("Adding flipInX"); 137 | /*if($( ".aboutMeCard" ).hasClass( "invisible" )){ 138 | $('.aboutMeCard').removeClass('invisible'); 139 | console.log("Removing Invisible"); 140 | $('.aboutMeCard').addClass('visible'); 141 | console.log("Adding Visible"); 142 | } 143 | else{ 144 | }; 145 | } else { 146 | $('.aboutMeCard').removeClass('fadeIn'); 147 | console.log("Removing FadeIn"); 148 | $('.aboutMeCard').addClass('fadeOut'); 149 | console.log("Adding fadeOut");*/ 150 | 151 | if ($(this).scrollTop() > 36) { 152 | $('#introTitle').removeClass('flipInX'); 153 | setTimeout(function(){ 154 | $('#introSubtitle').removeClass('flipInX'); 155 | }, 150); 156 | setTimeout(function(){ 157 | $('#introLocation').removeClass('flipInX'); 158 | }, 300); 159 | setTimeout(function(){ 160 | $('#introArrowButton').removeClass('flipInX'); 161 | }, 450); 162 | 163 | console.log("Removing flipInX"); 164 | if($( "#introTitle" ).hasClass( "flipOutX" )){ 165 | } else{ 166 | $('#introTitle').addClass('flipOutX'); 167 | setTimeout(function(){ 168 | $('#introSubtitle').addClass('flipOutX'); 169 | }, 150); 170 | setTimeout(function(){ 171 | $('#introLocation').addClass('flipOutX'); 172 | }, 300); 173 | setTimeout(function(){ 174 | $('#introArrowButton').addClass('flipOutX'); 175 | }, 450); 176 | 177 | }; 178 | } else { 179 | 180 | }; 181 | 182 | 183 | /*show the main body, remove if too early*/ 184 | if ($(this).scrollTop() > 630 && $(this).scrollTop() < 1100) { 185 | $('.aboutMeCard').removeClass('fadeOut'); 186 | setTimeout(function(){ 187 | $('.aboutMeButton').removeClass('fadeOut'); 188 | }, 200); 189 | console.log("Removing fadeOut"); 190 | $('.aboutMeCard').addClass('fadeIn'); 191 | setTimeout(function(){ 192 | $('.aboutMeButton').addClass('fadeIn'); 193 | }, 200); 194 | console.log("Adding fadeIn"); 195 | if($( ".aboutMeCard" ).hasClass( "invisible" )){ 196 | 197 | $('.aboutMeCard').removeClass('invisible'); 198 | setTimeout(function(){ 199 | $('.aboutMeButton').removeClass('invisible'); 200 | }, 200); 201 | console.log("Removing Invisible"); 202 | $('.aboutMeCard').addClass('visible'); 203 | setTimeout(function(){ 204 | $('.aboutMeButton').addClass('visible'); 205 | }, 200); 206 | console.log("Adding Visible"); 207 | } 208 | else{ 209 | }; 210 | } else { 211 | $('.aboutMeCard').removeClass('fadeIn'); 212 | setTimeout(function(){ 213 | $('.aboutMeButton').removeClass('fadeIn'); 214 | }, 200); 215 | console.log("Removing FadeIn"); 216 | $('.aboutMeCard').addClass('fadeOut'); 217 | setTimeout(function(){ 218 | $('.aboutMeButton').addClass('fadeOut'); 219 | }, 200); 220 | console.log("Adding fadeOut"); 221 | }; 222 | 223 | 224 | 225 | /* remove main body if too late*/ 226 | if ($(this).scrollTop() > 1100) { 227 | $('.aboutMeCard').removeClass('fadeIn'); 228 | setTimeout(function(){ 229 | $('.aboutMeButton').removeClass('fadeIn'); 230 | }, 200); 231 | console.log("Removing FadeIn"); 232 | if($( ".aboutMeCard" ).hasClass( "fadeOut" )){ 233 | } else{ 234 | $('.aboutMeCard').addClass('fadeOut'); 235 | setTimeout(function(){ 236 | $('.aboutMeButton').addClass('fadeOut'); 237 | }, 200); 238 | } 239 | }else { 240 | 241 | } 242 | 243 | 244 | 245 | 246 | /* SCROLL SHOW/HIDE FOR PROJECTS*/ 247 | 248 | 249 | 250 | if ($(this).scrollTop() > 1500) { 251 | $('#projectCard1').removeClass('fadeOut'); 252 | setTimeout(function(){ 253 | $('#projectCard2').removeClass('fadeOut'); 254 | }, 150); 255 | 256 | setTimeout(function(){ 257 | $('#projectCard3').removeClass('fadeOut'); 258 | }, 300); 259 | 260 | setTimeout(function(){ 261 | $('#contactCard').removeClass('fadeOut'); 262 | }, 450); 263 | 264 | 265 | 266 | 267 | console.log("Removing flipOutX"); 268 | $('#projectCard1').addClass('fadeIn'); 269 | if($( "#projectCard1" ).hasClass( "invisible" )){ 270 | $('#projectCard1').removeClass('invisible'); 271 | console.log("Removing Invisible"); 272 | $('#projectCard1').addClass('visible'); 273 | }; 274 | 275 | setTimeout(function(){ 276 | $('#projectCard2').addClass('fadeIn'); 277 | if($( "#projectCard2" ).hasClass( "invisible" )){ 278 | $('#projectCard2').removeClass('invisible'); 279 | console.log("Removing Invisible"); 280 | $('#projectCard2').addClass('visible'); 281 | }; 282 | }, 150); 283 | 284 | setTimeout(function(){ 285 | $('#projectCard3').addClass('fadeIn'); 286 | if($( "#projectCard3" ).hasClass( "invisible" )){ 287 | $('#projectCard3').removeClass('invisible'); 288 | console.log("Removing Invisible"); 289 | $('#projectCard3').addClass('visible'); 290 | }; 291 | }, 300); 292 | 293 | setTimeout(function(){ 294 | $('#contactCard').addClass('fadeIn'); 295 | if($( "#contactCard" ).hasClass( "invisible" )){ 296 | $('#contactCard').removeClass('invisible'); 297 | console.log("Removing Invisible"); 298 | $('#contactCard').addClass('visible'); 299 | }; 300 | }, 450); 301 | 302 | 303 | /* PLACE HOLDER FOR CONTACT ME 304 | setTimeout(function(){ 305 | $('#introArrowButton').addClass('flipInX'); 306 | }, 450); 307 | console.log("Adding flipInX");*/ 308 | 309 | 310 | /*if($( ".aboutMeCard" ).hasClass( "invisible" )){ 311 | $('.aboutMeCard').removeClass('invisible'); 312 | console.log("Removing Invisible"); 313 | $('.aboutMeCard').addClass('visible'); 314 | console.log("Adding Visible"); 315 | } 316 | else{ 317 | }; 318 | } else { 319 | $('.aboutMeCard').removeClass('fadeIn'); 320 | console.log("Removing FadeIn"); 321 | $('.aboutMeCard').addClass('fadeOut'); 322 | console.log("Adding fadeOut");*/ 323 | }; 324 | 325 | if ($(this).scrollTop() < 1490) { 326 | $('#projectCard1').removeClass('fadeIn'); 327 | setTimeout(function(){ 328 | $('#projectCard2').removeClass('fadeIn'); 329 | }, 150); 330 | setTimeout(function(){ 331 | $('#projectCard3').removeClass('fadeIn'); 332 | }, 300); 333 | setTimeout(function(){ 334 | $('#contactCard').removeClass('fadeIn'); 335 | }, 450); 336 | /*PLACE HOLDER FOR CONTACT ME 337 | setTimeout(function(){ 338 | $('#introArrowButton').removeClass('flipInX'); 339 | }, 450);*/ 340 | 341 | console.log("Removing flipInX"); 342 | if($( "#projectCard1" ).hasClass( "fadeOut" )){ 343 | } else{ 344 | $('#projectCard1').addClass('fadeOut'); 345 | setTimeout(function(){ 346 | $('#projectCard2').addClass('fadeOut'); 347 | }, 150); 348 | setTimeout(function(){ 349 | $('#projectCard3').addClass('fadeOut'); 350 | }, 300); 351 | setTimeout(function(){ 352 | $('#contactCard').addClass('fadeOut'); 353 | }, 450); 354 | 355 | /* PLACEHOLDER FOR CONTACT ME 356 | setTimeout(function(){ 357 | $('#introArrowButton').addClass('flipOutX'); 358 | }, 450);*/ 359 | 360 | }; 361 | } else { 362 | 363 | }; 364 | 365 | 366 | }}); 367 | 368 | 369 | 370 | $("a[href^='#']").click(function(e) { 371 | e.preventDefault(); 372 | 373 | var position = $($(this).attr("href")).offset().top; 374 | 375 | $("body, html").animate({ 376 | scrollTop: position 377 | }, 2000 ); 378 | }); -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /*TODO: HIDE OVERFLOW Y, */ 2 | 3 | 4 | 5 | .visible{ 6 | visibility: visible; 7 | } 8 | 9 | .invisible{ 10 | visibility: initial; 11 | } 12 | 13 | #animatedPortrait{ 14 | margin-top: auto; 15 | margin-bottom: auto; 16 | } 17 | .aboutMeWrapper{ 18 | background-image: url("images/background65.jpg" ); 19 | -webkit-background-size: 100% 100%; 20 | -moz-background-size: 100% 100%; 21 | -o-background-size: 100% 100%; 22 | background-size: 100% 100%; 23 | background-repeat: no-repeat; 24 | width: 100%; 25 | min-height: 100vh; 26 | padding-top: 10vh; 27 | padding-right: 14vw; 28 | padding-left: 14vw; 29 | padding-bottom: 0px; 30 | /*padding-top: 56.25%; 31 | (img-height / img-width * container-width) */ 32 | /* (853 / 1280 * 100) */ 33 | } 34 | 35 | .introWrapper{ 36 | background: linear-gradient(#041c29,#08486B); 37 | -webkit-background-size: cover; 38 | -moz-background-size: cover; 39 | -o-background-size: cover; 40 | background-size: auto 100%; 41 | background-repeat: no-repeat; 42 | width: 100%; 43 | min-height: 100vh; 44 | padding-top: 70px; 45 | padding-right: 35px; 46 | padding-left: 35px; 47 | padding-bottom: 0px; 48 | /*padding-top: 56.25%; 49 | (img-height / img-width * container-width) */ 50 | /* (853 / 1280 * 100) */ 51 | } 52 | 53 | .projectsWrapper{ 54 | background: linear-gradient(#09486b,#ecd091); 55 | /*background: #ebcf90;*/ 56 | -webkit-background-size: cover; 57 | -moz-background-size: cover; 58 | -o-background-size: cover; 59 | background-size: cover; 60 | background-repeat: no-repeat; 61 | width: 100%; 62 | min-height: 100vh; 63 | padding-top: 50px; 64 | padding-right: 3vw; 65 | padding-left: 3vw; 66 | padding-bottom: 0px; 67 | /*padding-top: 56.25%; 68 | (img-height / img-width * container-width) */ 69 | /* (853 / 1280 * 100) */ 70 | } 71 | 72 | .navbarIcon{ 73 | margin-top: 2px; 74 | margin-left: 6px; 75 | margin-right: 6px; 76 | height: 2.5em; 77 | width: 2.5em; 78 | } 79 | 80 | .navbarIcon:hover{ 81 | transform: translateY(55px); 82 | -webkit-transform: translateY(5px); 83 | transition-duration: 0.2s; 84 | cursor: pointer; 85 | width: 2.75em; 86 | height: 2.75em; 87 | } 88 | 89 | .contentIcon{ 90 | margin-top: 5px; 91 | margin-left: 9px; 92 | margin-right: 9px; 93 | height: 3.25em; 94 | width: 3.25em; 95 | } 96 | 97 | .contentIcon:hover{ 98 | transform: translateY(55px); 99 | -webkit-transform: translateY(5px); 100 | transition-duration: 0.2s; 101 | cursor: pointer; 102 | width: 3.5em; 103 | height: 3.5em; 104 | } 105 | 106 | .tooltip > .tooltip-inner { 107 | margin-top: 1px; 108 | background-color: #147085; 109 | color: #f3eedb; 110 | opacity: 0.9; 111 | border: 1px solid white; 112 | padding: 3px; 113 | font-size: 18px; 114 | position: bottom; 115 | display: inline-block; 116 | font-family: 'Montserrat', sans-serif; 117 | margin-top: 3px; 118 | } 119 | 120 | .tooltip.bottom .tooltip-arrow { 121 | top: 0; 122 | left: 50%; 123 | margin-left: -5px; 124 | border-width: 0 5px 5px; 125 | border-bottom-color: #000; 126 | } 127 | 128 | #introCol{ 129 | padding: 0px !important; 130 | margin: 0px !important; 131 | 132 | } 133 | 134 | #projectsCol{ 135 | padding: 0px !important; 136 | margin: 0px !important; 137 | } 138 | 139 | 140 | .mainTitle{ 141 | margin-top: 25vh; 142 | margin-bottom: 5vh; 143 | font-family: 'Pridi', serif; 144 | font-size: 75px; 145 | color: #ffef9b; 146 | line-height: 75%; 147 | } 148 | 149 | .subTitle{ 150 | line-height: 100%; 151 | font-size: 35px; 152 | color: #ffef9b; 153 | font-family: 'Montserrat', sans-serif; 154 | } 155 | 156 | .centerIt{ 157 | margin:0 auto; 158 | text-align: center; 159 | } 160 | 161 | #aboutMeCol{ 162 | padding: 0px !important; 163 | margin: 0px !important; 164 | 165 | } 166 | 167 | .aboutMeHeader{ 168 | font-size: 25px; 169 | border-bottom: 2px solid #12849f; 170 | margin-top: 2px; 171 | margin-bottom: 5px; 172 | font-family: 'Pridi', serif; 173 | } 174 | 175 | .aboutMeContent{ 176 | margin-bottom: 30px; 177 | font-family: 'Montserrat', sans-serif; 178 | font-size: 20px; 179 | 180 | } 181 | .aboutMeFrameworks{ 182 | margin-bottom: 30px; 183 | font-family: 'Montserrat', sans-serif; 184 | text-align: center; 185 | } 186 | 187 | .aboutMeCard{ 188 | width: 100%; 189 | height: 100%; 190 | background-color: white; 191 | opacity: 0.90; 192 | filter: alpha(opacity=90); /* For IE8 and earlier */ 193 | margin: 0 auto; 194 | margin-bottom: 8vh; 195 | padding: 20px; 196 | padding-right: 65px; 197 | position: relative; 198 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 199 | animation-duration: .75s; 200 | 201 | } 202 | 203 | 204 | 205 | .container-fluid { 206 | overflow-x: hidden; 207 | } 208 | 209 | .card{ 210 | background:white; 211 | box-shadow: -5px -5px 15px rgba(0,0,0,0.25), 5px 5px 15px rgba(0,0,0,0.25),-5px 5px 15px rgba(0,0,0,0.25), 5px -5px 15px rgba(0,0,0,0.25) ; 212 | height: 100%; 213 | 214 | } 215 | 216 | .card:hover{ 217 | transform: translateY(-5px); 218 | -webkit-transform: translateY(-5px); 219 | transition-duration: 0.2s; 220 | box-shadow: -5px -5px 15px rgba(0,0,0,0.4), 5px 5px 15px rgba(0,0,0,0.4),-5px 5px 15px rgba(0,0,0,0.4), 5px -5px 15px rgba(0,0,0,0.4) ; 221 | cursor: pointer; 222 | 223 | } 224 | .cardType{ 225 | font-family: 'Pridi', serif; 226 | font-size: 25px; 227 | font-style: italic; 228 | text-align: center; 229 | line-height: 75%; 230 | margin-bottom: 5px; 231 | 232 | } 233 | .cardImage{ 234 | height: 80%; 235 | width: 100%; 236 | object-fit: cover; 237 | display: contain; 238 | } 239 | 240 | .cardTitle{ 241 | padding-left: 9px; 242 | padding-right: 9px; 243 | padding-top: 7px; 244 | padding-bottom: 0px; 245 | margin-bottom: 2px; 246 | width: 100%; 247 | text-align: center; 248 | line-height: 75%; 249 | font-size: 30px; 250 | font-family: 'Pridi', serif; 251 | background-color: white; 252 | } 253 | 254 | .cardText{ 255 | padding-left: 12px; 256 | padding-right: 12px; 257 | background-color: white; 258 | max-width: 100%; 259 | text-align: left; 260 | font-size: 20px; 261 | font-family: 'Montserrat', sans-serif; 262 | margin-bottom: 12px; 263 | 264 | } 265 | 266 | #projectCard1{ 267 | width: 100%; 268 | height: 100%; 269 | margin-top: 10px; 270 | margin-bottom: 10px; 271 | padding-left: 1em; 272 | padding-right: 1em; 273 | 274 | 275 | } 276 | 277 | #projectCard2{ 278 | width: 100%; 279 | height: 100%; 280 | margin-top: 10px; 281 | margin-bottom: 10px; 282 | padding-left: 1em; 283 | padding-right: 1em; 284 | } 285 | 286 | #projectCard3{ 287 | width: 100%; 288 | height: 100%; 289 | margin-top: 10px; 290 | margin-bottom: 10px; 291 | padding-left: 1em; 292 | padding-right: 1em; 293 | 294 | 295 | } 296 | 297 | 298 | #introArrow{ 299 | font-size:2em; 300 | color:#ffef9b; 301 | margin-top: 7vh; 302 | display: inline-block; 303 | transform: scale(2.25,1.5); 304 | -webkit-animation: mover 1.25s infinite alternate; 305 | -moz-animation: mover 1.25s infinite alternate; 306 | -o-animation: mover 1.25s infinite alternate; 307 | animation: mover 1.25s infinite alternate; 308 | } 309 | 310 | 311 | #introArrow:hover{ 312 | font-size: 2.2em; 313 | color:white; 314 | } 315 | 316 | .aboutMeButton{ 317 | margin: 0px auto; 318 | display: block; 319 | background:white; 320 | font-size: 20px; 321 | font-family: 'Pridi', serif; 322 | opacity: 0.90; 323 | filter: alpha(opacity=90); /* For IE8 and earlier */ 324 | color: #0a415f; 325 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 326 | border: 0px; 327 | 328 | } 329 | 330 | .aboutMeButton:hover{ 331 | margin: 0px auto; 332 | display: block; 333 | background:#0a4968; 334 | font-size: 20px; 335 | font-family: 'Pridi', serif; 336 | opacity: 0.90; 337 | filter: alpha(opacity=90); /* For IE8 and earlier */ 338 | color: #e9ce90; 339 | box-shadow: -5px -5px 15px rgba(0,0,0,0.4), 5px 5px 15px rgba(0,0,0,0.4),-5px 5px 15px rgba(0,0,0,0.4), 5px -5px 15px rgba(0,0,0,0.4) ; 340 | border: 0px; 341 | 342 | } 343 | 344 | .control-label{ 345 | text-align: center; 346 | } 347 | 348 | #submitbutton{ 349 | width: 100% !important; 350 | } 351 | 352 | #contactCard{ 353 | background-color: white; 354 | opacity: 0.90; 355 | filter: alpha(opacity=90); /* For IE8 and earlier */ 356 | margin: 40px; 357 | margin-top: 50px; 358 | margin-bottom: 20px; 359 | padding-top: 15px; 360 | /*margin-bottom: 15vh; 361 | 362 | padding: 20px; 363 | padding-right: 65px; 364 | position: relative;*/ 365 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 366 | animation-duration: .75s; 367 | } 368 | 369 | #contactHeader{ 370 | font-size: 1.75rem; 371 | border-bottom: 2px solid #12849f; 372 | margin-top: 20px; 373 | margin-bottom: 13px; 374 | font-family: 'Pridi', serif; 375 | text-align: center; 376 | width: 80%; 377 | line-height: 113%; 378 | 379 | } 380 | 381 | 382 | .control-label{ 383 | font-size: 20px !important; 384 | font-family: 'Montserrat', sans-serif !important; 385 | } 386 | 387 | #submitbutton{ 388 | background-color: #12849f; 389 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 390 | border-style: solid; 391 | border-width: 4px 4px 4px 4px; 392 | border-color: #12849f; 393 | } 394 | 395 | #submitbutton:hover{ 396 | box-shadow: -5px -5px 15px rgba(0,0,0,0.4), 5px 5px 15px rgba(0,0,0,0.4),-5px 5px 15px rgba(0,0,0,0.4), 5px -5px 15px rgba(0,0,0,0.4) ; 397 | background-color: white; 398 | border-style: solid; 399 | border-width: 4px 4px 4px 4px; 400 | border-color: #12849f; 401 | color: #12849f; 402 | } 403 | 404 | #Footer{ 405 | margin-bottom: 20px; 406 | } 407 | 408 | #FooterText{ 409 | margin: 0 auto; 410 | padding: 0 auto; 411 | text-align: center; 412 | font-family: 'Pridi', serif; 413 | opacity: 0.6; 414 | } 415 | 416 | #Website{ 417 | color: #0000EE; 418 | opacity: 0.6; 419 | } 420 | 421 | #Website:hover{ 422 | transform: translateY(55px); 423 | -webkit-transform: translateY(5px); 424 | transition-duration: 0.2s; 425 | cursor: pointer; 426 | } 427 | 428 | #Github{ 429 | color: #0000EE; 430 | opacity:0.6; 431 | } 432 | 433 | #Github:hover{ 434 | transform: translateY(55px); 435 | -webkit-transform: translateY(5px); 436 | transition-duration: 0.2s; 437 | cursor: pointer; 438 | opacity 439 | } 440 | 441 | @-moz-keyframes mover { 442 | 0% { transform: translateY(0); } 443 | 100% { transform: translateY(-15px); } 444 | } 445 | @-o-keyframes mover { 446 | 0% { transform: translateY(0); } 447 | 100% { transform: translateY(-15px); } 448 | } 449 | @keyframes mover { 450 | 0% { transform: translateY(0); } 451 | 100% { transform: translateY(-15px); } 452 | } 453 | 454 | 455 | @media only screen and (max-width: 1275px) { 456 | /* your css of 1024 px screen size */ 457 | .aboutMeWrapper { 458 | -webkit-background-size: cover; 459 | -moz-background-size: cover; 460 | -o-background-size: cover; 461 | background-size: cover; 462 | background-repeat: no-repeat; 463 | background-position: center; 464 | padding-left: 9px; 465 | padding-right: 9px; 466 | } 467 | 468 | .aboutMeHeader{ 469 | font-size: 35px; 470 | border-bottom: 2px solid #12849f; 471 | margin-top: 2px; 472 | margin-bottom: 5px; 473 | font-family: 'Pridi', serif; 474 | } 475 | 476 | .mainTitle{ 477 | margin-top: 10vh; 478 | } 479 | 480 | .aboutMeContent{ 481 | text-align: center; 482 | } 483 | 484 | .aboutMeHeader{ 485 | text-align: center; 486 | } 487 | 488 | .aboutMeCard{ 489 | padding-right: 20px; 490 | } 491 | 492 | .cardText{ 493 | font-size: 13px; 494 | } 495 | } 496 | 497 | @media only screen and (max-width: 640px) { 498 | /* your css of 640 px screen size */ 499 | .aboutMeWrapper { 500 | -webkit-background-size: cover; 501 | -moz-background-size: cover; 502 | -o-background-size: cover; 503 | background-size: cover; 504 | background-repeat: no-repeat; 505 | background-position: -1300px; 506 | padding-left: 9px; 507 | padding-right: 9px; 508 | } 509 | 510 | .aboutMeHeader{ 511 | font-size: 20px; 512 | border-bottom: 2px solid #12849f; 513 | margin-top: 2px; 514 | margin-bottom: 5px; 515 | font-family: 'Pridi', serif; 516 | } 517 | 518 | .mainTitle{ 519 | margin-top: 10vh; 520 | } 521 | 522 | .aboutMeContent{ 523 | text-align: center; 524 | } 525 | 526 | .aboutMeHeader{ 527 | text-align: center; 528 | } 529 | 530 | .aboutMeCard{ 531 | padding-right: 20px; 532 | } 533 | 534 | .cardText{ 535 | font-size: 17px; 536 | } 537 | 538 | } 539 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | Hunter Harding 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 |
36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 |
44 | 47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 83 | 84 | 85 | 86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 106 | 119 | 132 |
133 |
134 | 135 |
136 |
137 | 175 |
176 |
177 |
178 | 181 | 182 | 183 |
184 |
185 |
186 |
187 | 188 | 189 | 193 | 194 | 195 | 196 | 197 | --------------------------------------------------------------------------------