-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (91 loc) · 12.8 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Rose Gabon Portfolio - Senior Front End Developer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shiv and Respond.js IE8 support of HTML 5 elements and media queries -->
<!--WARNING: Respond.js doesn't work if you view the page via file://-->
<!--[if lt IE 9]
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.9/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!--[endif]-->
</head>
<body>
<article class="wrap">
<section class="animate-block">
<div class="container">
<header id="tagline" class="row" >
<div class="col-md-6">
<h1>Senior Front End Developer</h1>
<p><em>Develop websites (with love) for 6 years<br>using Drupal, Wordpress, MEAN Stack (MongoDB, Express JS, Angular, Node JS) and Ionic 4</em></p>
</div>
<div class="col-md-6">
<div class="row card-portfolio">
<div class="col-sm-3 col-md-4 col-lg-3">
<img src="./images/profile.jpg" width="100" class="rounded-circle">
</div>
<div class="col-sm-3 col-md-4 col-lg-3 d-flex flex-column justify-content-center">
<div>Hi! I'm</div>
<p>Rose Gabon</p>
</div>
<div class="col-sm-3 hide-small-screen d-flex flex-column justify-content-center">
<div>Do you want to see more of my works?</div>
</div>
<div class="col-sm-3 d-flex flex-column justify-content-center">
<a class="view-all" id="portfolio-btn" href="https://forms.gle/JbZp57immv2TJZbU8" target="_blank"><i class="fas fa-envelope"></i> <span class="hide-small-screen">Contact</span></a>
</div>
</div>
</div>
</header>
<section class="d-none d-md-block">
<div class="foreground"> </div>
<div class="midground">
<div class="banneranimate"> </div>
</div>
<div class="background"> </div>
</section>
<svg class="d-md-none d-lg-none" xml:space="preserve" style="enable-background:new 0 0 1500 500;" viewBox="0 0 1500 500" width="600px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"><style type="text/css">.st0 {fill:#F0F0F0; stroke: none;}
.st1{fill:#727272;stroke:#1B1B1B;stroke-miterlimit:10;}
.st2{fill:#F0F0F0;stroke:#1B1B1B;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#444444;stroke:#1B1B1B;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#F0F0F0;stroke:#1B1B1B;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#B7B7B7;stroke:#1B1B1B;stroke-miterlimit:10;}
.st6{fill:none;stroke:#1B1B1B;stroke-miterlimit:10;}
.st7{fill:#444444;stroke:#1B1B1B;stroke-miterlimit:10;}
.st8{fill:#F0F0F0;stroke:#1B1B1B;stroke-miterlimit:10;}
.st9{fill:#5D5D5D;stroke:#1B1B1B;stroke-miterlimit:10;}
.st10{fill:#221E1F;}
.st11{fill:#429C0F;}
.st12{fill:#444444;stroke:#1B1B1B;stroke-width:2.481;stroke-miterlimit:10;}
.st13{fill:#1A5920;}
.st14{fill:#F0F0F0;stroke:#1B1B1B;stroke-width:2;stroke-miterlimit:10;}
.st15{fill:#F0F0F0;stroke:#1B1B1B;stroke-width:2;stroke-miterlimit:10;}
.st16{fill:#E5E5E5;}.st0, .st2, .st3, .st4, .st5,.st6, .st7, .st8, .st9, .st10, .st11, .st12, .st13, .st14, .st15, .st16{
stroke-dasharray: 8000;
stroke-dashoffset: 0;
-webkit-animation: dash 20s linear forwards;
-moz-animation: dash 20s linear forwards;
-o-animation: dash 20s linear forwards;
animation: dash 20s linear forwards;
}@-webkit-keyframes dash {
from { stroke-dashoffset: 8000; }
to { stroke-dashoffset: 0;}
}.fade {opacity: 1;
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
animation-duration: 0.8s;
}</style><g id="bg"><rect height="500" width="1500" class="st0"></rect></g><g id="Mobiles"><g id="cel"><path d="M253.5,413.08c0,7.964-6.456,14.42-14.42,14.42H110.92c-7.964,0-14.42-6.456-14.42-14.42V160.92 c0-7.964,6.456-14.42,14.42-14.42H239.08c7.964,0,14.42,6.456,14.42,14.42V413.08z" class="st1"></path><line y2="170" x2="198" y1="170" x1="162" class="st2"></line><circle r="9.613" cy="396.657" cx="177.812" class="st3"></circle><rect height="189" width="131" class="st4" y="185" x="112"></rect></g><g id="cel_1_"><path d="M538.5,418.227c0,6.778-5.495,12.273-12.273,12.273H311.773c-6.778,0-12.273-5.495-12.273-12.273V309.773 c0-6.778,5.495-12.273,12.273-12.273h214.453c6.778,0,12.273,5.495,12.273,12.273V418.227z" class="st5"></path><line y2="376" x2="518.5" y1="346" x1="518.5" class="st6"></line><circle r="8.182" cy="363.308" cx="327.257" class="st7"></circle><rect height="110" width="160" class="st8" y="307.5" x="345.5"></rect></g><g id="cel_2_"><path d="M1387.5,434.224c0,10.831-6.352,24.276-20.724,24.276H1135.66c-14.372,0-30.16-13.445-30.16-24.276V90.974 c0-10.831,15.788-15.474,30.16-15.474h231.116c14.372,0,20.724,4.643,20.724,15.474V434.224z" class="st1"></path><rect height="305" width="234" class="st8" y="103.5" x="1131.5"></rect></g><g id="cel_3_"><path d="M617.402,411.5c-11.718,0-26.902-13.986-26.902-27.863V160.481c0-13.877,15.184-20.981,26.902-20.981H988.78 c11.718,0,16.72,7.105,16.72,20.981v223.156c0,13.877-5.002,27.863-16.72,27.863H617.402z" class="st9"></path><rect height="227" width="355" class="st8" y="162.5" x="620.5"></rect></g><path d="M724.5,478.5h152v-21.704c0,0,2.94-12.296-19.745-11.296c-20.694,0-111.033,0-111.033,0 s-21.223-5.021-21.223,10.898S724.5,478.5,724.5,478.5z" class="st9"></path><line y2="442" x2="802" y1="420" x1="802" class="st2"></line><path d="M723.679,211.089c-32.328,2.142-57.741,28.957-57.741,61.727c-0.038,1.909,0.041,3.843,0.254,5.796 c0.886,9.533,3.958,18.44,8.674,26.222c16.201,31.554,48.812,60.546,48.812,60.546v-30.835v-25.215v-19.476l-17.461-17.461 l17.461-17.46V211.089z" class="st10"></path><path d="M731.336,333.683c32.328-2.142,57.726-28.958,57.726-61.728c0.037-1.908-0.048-3.843-0.262-5.796 c-0.886-9.533-3.947-18.439-8.663-26.221c-16.201-31.554-48.801-60.546-48.801-60.546v30.834v25.215v19.477l17.461,17.46 l-17.461,17.461V333.683z" class="st11"></path><path d="M179.253,250.986c-13.192,0.874-23.562,11.816-23.562,25.189c-0.015,0.779,0.017,1.568,0.104,2.365 c0.361,3.89,1.615,7.525,3.54,10.7c6.611,12.876,19.919,24.707,19.919,24.707v-12.583v-10.29v-7.948l-7.125-7.125l7.125-7.125 V250.986z" class="st10"></path><path d="M182.377,301.014c13.192-0.874,23.557-11.817,23.557-25.189c0.015-0.779-0.02-1.568-0.107-2.365 c-0.362-3.89-1.611-7.524-3.535-10.7c-6.611-12.876-19.915-24.707-19.915-24.707v12.583v10.29v7.948l7.125,7.125l-7.125,7.125 V301.014z" class="st11"></path><circle r="11.925" cy="434.969" cx="1248.124" class="st12"></circle></g><g id="Layer_5"><path d="M881.039,221.385c0,0-30.413-41.994,10.414-58.547c0,0,74.07-11.539,46.484,56.33 S881.039,221.385,881.039,221.385z" class="st4" id="body_3_"></path><path d="M906.52,357.748c0,0,44.24-4.256,63.791-26.725c0,0,35.327-33.788,19.809-78.305 c0,0-11.397-26.624-59.953-32.881c0,0-96.068-9.109-83.709,59.301c0,0,9.636,53.507,61.559,53.298c0,0-18.819,16.985-39.57,14.354 C847.697,344.159,875.581,358.632,906.52,357.748z" class="st4"></path><circle r="7.3" cy="279.686" cx="937.077" class="st13" id="eyes_2_6_"></circle><circle r="7.3" cy="284.555" cx="882.673" class="st13" id="eyes_1_6_"></circle><path d="M888.049,259.054c0,0,15.112-16.506,40.087-3.154" class="st2" id="smile_6_"></path><polyline points="862.17,311.756 908.17,289.872 986.741,307.092 " class="st2"></polyline><line y2="315.785" x2="838.698" y1="310.622" x1="851.16" class="st2" id="right_arm_12_"></line><line y2="318.719" x2="1002.733" y1="307.96" x1="994.597" class="st2" id="right_arm_11_"></line><circle r="9.184" cy="329.899" cx="1008.789" class="st4"></circle><circle r="9.184" cy="325.124" cx="828.51" class="st4"></circle></g><g id="pix_1"><g><path d="M757.2,96.854c0,0,14.594,21.789,32.259,16.903c17.665-4.886-6.954,45.379-41.482,16.728 S757.2,96.854,757.2,96.854z" class="st4" id="body_2_"></path><path d="M709.143,30.343c0,0-27.043,17.921-31.931,39.106c0,0-11.168,33.89,14.104,57.248 c0,0,16.478,13.243,49.909,0.615c0,0,65.021-27.093,33.587-66.928c0,0-24.567-31.168-57.949-13.218c0,0,6.298-17.4,20.57-22.825 C751.704,18.916,728.773,19.158,709.143,30.343z" class="st4"></path><circle r="5.329" cy="91.122" cx="716.239" class="st13" id="eyes_2_2_"></circle><circle r="5.329" cy="69.319" cx="749.62" class="st13" id="eyes_1_2_"></circle><path d="M754.906,87.594c0,0-4.073,15.819-24.746,15.786" class="st2" id="smile_2_"></path><polyline points="753.498,44.759 731.369,74.641 674.837,90.505 " class="st2"></polyline><line y2="136.542" x2="798.875" y1="134.982" x1="788.216" class="st2" id="right_leg_4_"></line><line y2="127.454" x2="805.807" y1="119.384" x1="799.669" class="st2" id="right_leg_1_"></line><line y2="91.573" x2="793.753" y1="90.98" x1="783.924" class="st2" id="right_arm_6_"></line><circle r="4.402" cy="89.401" cx="797.903" class="st14"></circle><line y2="143.676" x2="721.603" y1="134.513" x1="725.208" class="st2" id="right_arm_5_"></line><circle r="4.402" cy="131.096" cx="706.993" class="st14"></circle><circle r="5.584" cy="137.916" cx="807.049" class="st4"></circle><circle r="5.584" cy="130.875" cx="813.915" class="st2"></circle><line y2="139.613" x2="719.103" y1="135.878" x1="709.676" class="st2" id="right_leg_5_"></line></g></g><g id="Layer_4"><g><path d="M1264.508,195.957c0,0-47.734,25.895-59.006,60.498c0,0-23.618,54.863,15.078,97.535 c0,0,25.523,24.51,83.128,8.383c0,0,112.411-35.589,65.869-106.645c0,0-36.369-55.591-94.676-30.583 c0,0,13.066-28.085,37.662-35.025C1337.16,183.179,1298.889,180.202,1264.508,195.957z" class="st4"></path><circle r="8.919" cy="298.346" cx="1267.38" class="st13" id="eyes_2_4_"></circle><circle r="8.919" cy="266.912" cx="1326.254" class="st13" id="eyes_1_4_"></circle><path d="M1332.374,298.163c0,0-9.124,25.777-43.588,22.674" class="st2" id="smile_4_"></path><polyline points="1336.34,226.532 1295.037,273.097 1198.438,291.214 " class="st2"></polyline><line y2="354.814" x2="1353.524" y1="355.242" x1="1337.047" class="st2" id="right_arm_2_"></line><circle r="7.369" cy="359.389" cx="1372.863" class="st4"></circle><line y2="368.137" x2="1304.967" y1="382.731" x1="1297.152" class="st2" id="right_arm_1_"></line><circle r="7.369" cy="398.041" cx="1289.246" class="st4"></circle></g></g><g id="Layer_3"><g><path d="M325.865,114.354c0,0,46.23,8.041,65.004,33.268c0,0,34.471,38.413,14.552,84.028 c0,0-14.141,27.11-65.761,29.79c0,0-101.867,1.858-83.351-69.165c0,0,14.451-55.553,69.095-51.154 c0,0-18.445-19.395-40.501-18.295C262.847,123.926,293.366,110.934,325.865,114.354z" class="st2"></path><circle r="7.707" cy="198.992" cx="351.75" class="st13" id="eyes_2_3_"></circle><circle r="7.707" cy="189.487" cx="294.87" class="st13" id="eyes_1_3_"></circle><path d="M298.477,216.766c0,0,14.58,18.592,41.947,6.546" class="st2" id="smile_3_"></path><polyline points="275.474,159.202 322.139,185.942 406.239,174.137 " class="st2"></polyline><line y2="153.292" x2="264.523" y1="166.161" x1="270.624" class="st2" id="right_arm_8_"></line><circle r="6.367" cy="136.191" cx="254.594" class="st2"></circle><line y2="278.854" x2="363.195" y1="268.808" x1="353.099" class="st2" id="right_arm_7_"></line><circle r="6.367" cy="286.637" cx="368.938" class="st15"></circle></g><path d="M283.766,254.479c0,0-50.862,38.217,11.315,65.871" class="st2"></path></g><g id="shade"><path d="M332.838,123.419c0,0,48.823,15.971,63.495,42.742l-31.747,4.172 C364.586,170.333,369.344,143.838,332.838,123.419z" class="st11"></path><path d="M711.325,36.613c0,0-26.113,22.401-28.866,39.201l20.354-7.896C702.813,67.918,693.766,57.247,711.325,36.613 z" class="st11"></path><path d="M902.144,353.161c0,0,50.442-9.713,68.36-34.43l-30.972-8.126 C939.532,310.605,940.924,337.488,902.144,353.161z" class="st11"></path><path d="M1258.851,212.988c0,0-41.799,29.859-47.78,59.796l31.54-5.527 C1242.611,267.257,1230.137,243.402,1258.851,212.988z" class="st11"></path><polygon points="347,414.834 392.617,384.863 504.353,310 347,310 " class="st16"></polygon></g></svg>
</section>
</article>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"></script>
</body>
</html>