-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (129 loc) · 10.5 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gabe Velez - Product Designer & Front End Developer</title>
<meta name="description" content="Portfolio site of Gabe Velez, a multi-disciplined designer and developer with over 20 years of experience.">
<meta property="og:title" content="Gabe Velez - Product Designer & Front End Developer" />
<meta property="og:description" content="Portfolio site of Gabe Velez, a multi-disciplined designer and developer with over 20 years of experience." />
<meta property="og:type" content="website" />
<meta property="og:image" content="/img/OGimage.png" />
<meta property="og:url" content="https://gabevelez.com/" />
<link rel="canonical" href="https://gabevelez.com/" />
<link rel="shortcut icon" type="image/jpg" href="/img/fav-icon.png"/>
<!--<link rel="manifest" href="site.webmanifest">-->
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="/layout.js" type="text/javascript"></script>
<script src="/scroll.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://use.typekit.net/lho8sph.css">
</head>
<body class="home">
<header>
</header>
<section class="hero">
<picture>
<source type="image/webp" media="(min-width: 1060px)" srcset="img/gv-voutche-desktop.webp" />
<source type="image/webp" media="(min-width: 600px)" srcset="img/gv-voutche-tablet.webp" />
<img class="hero__image" loading="eager" decoding="async" src="img/gv-voutche-mobile.webp" alt="Gabe Velez holding mobile phone in office" >
</picture>
<div class="hero__textarea">
<h1 class="hero__text"><span class="hero__hi">Hi, My Name is</span> <span class="hero__hidden">Gabe - </span><br>
<svg xmlns="http://www.w3.org/2000/svg" width="145" height="40" fill="none" aria-labelledby="Gabe"><path fill="#fff" d="M26.333 13.278a6.264 6.264 0 0 0-2.61-2.39c-1.075-.555-2.353-.832-3.834-.832-2.74 0-4.907.888-6.5 2.666-1.556 1.778-2.333 4.167-2.333 7.167 0 3.37.833 5.944 2.5 7.722 1.703 1.74 4.166 2.611 7.388 2.611 3.815 0 6.538-1.722 8.167-5.166H18.167v-7.834H38.5v10.556c-.852 2.074-2.111 4.018-3.778 5.833-1.63 1.815-3.704 3.315-6.222 4.5-2.518 1.148-5.389 1.722-8.611 1.722-3.926 0-7.407-.833-10.445-2.5-3-1.703-5.333-4.055-7-7.055C.814 27.24 0 23.778 0 19.888c0-3.851.815-7.277 2.444-10.277 1.667-3.037 4-5.389 7-7.055C12.444.852 15.907 0 19.834 0c4.925 0 9 1.185 12.222 3.556 3.222 2.37 5.222 5.61 6 9.722H26.333Z"/><path fill="#fff" d="M60.441 33.167H46.553l-2.111 6.389H32.996L47.275.389H59.83l14.223 39.167h-11.5l-2.111-6.39Zm-2.722-8.334-4.222-12.666-4.167 12.666h8.39Z"/><path fill="#fff" d="M97.972 19.444c2.296.519 4.111 1.667 5.444 3.445 1.371 1.74 2.056 3.74 2.056 6 0 3.333-1.148 5.944-3.444 7.833-2.297 1.89-5.519 2.834-9.667 2.834H72.972V.389H91.75c4 0 7.13.889 9.389 2.667 2.296 1.777 3.444 4.277 3.444 7.5 0 2.296-.611 4.222-1.833 5.777-1.185 1.519-2.778 2.556-4.778 3.111Zm-14.111-3.5h5.5c2.74 0 4.111-1.13 4.111-3.388 0-2.334-1.37-3.5-4.111-3.5h-5.5v6.888Zm6.333 14.834c2.741 0 4.111-1.148 4.111-3.445 0-1.185-.37-2.092-1.11-2.722-.704-.63-1.723-.944-3.056-.944H83.86v7.11h6.333ZM116.503 9.111V15.5h12.5v8.278h-12.5v7.055h14.167v8.723h-25.055V.389h25.055V9.11h-14.167ZM138.242 40c-1.926 0-3.481-.519-4.667-1.556-1.148-1.074-1.722-2.425-1.722-4.055s.574-2.982 1.722-4.056c1.186-1.074 2.741-1.61 4.667-1.61 1.889 0 3.408.536 4.556 1.61 1.185 1.074 1.777 2.426 1.777 4.056 0 1.592-.592 2.926-1.777 4-1.148 1.074-2.667 1.611-4.556 1.611Z"/>
</svg>
<br>
<span class="hero__break">I’m a multi-disciplined designer and developer with over <strong>15 years of experience.</strong></span>
</h1>
<h2 class="hero__text">
<span class="hero__break">Currently I serve as the Chief Technology Officer for <a class="company__link" href="https://anom.group/" rel="nofollow">A&N Online Marketing</a> working as their entire design & engineering department.</span>
<span class="hero__break">I'm based in Queens, New York.</span>
</h2>
</div>
</section>
<section class="cases">
<h2 class="cases__title">Case Studies</h2>
<div class="cases__container">
<a class="card" href="case-studies/afterpromcentral-events-calendar.html">
<picture>
<source type="image/webp" media="(min-width: 1060px)" srcset="img/caseStudy_APCECalendar.webp 1x, img/caseStudy_APCECalendar@2x.webp 2x" />
<source type="image/webp" media="(min-width: 600px)" srcset="img/caseStudy_APCECalendar@2x.webp" />
<img class="card__image" loading="lazy" decoding="async" src="img/caseStudy_APCECalendar.webp" alt="AfterPromCentral Calendar list view on iPhone with cheering prom crowd in background.">
</picture>
<div class="card__textarea">
<h3 class="card__title"><span class="company__link">AfterProm Events Calendar</span></h3>
<p class="card__description">A custom plugin built for internal use, leading to a better user experience and increased sales.</p>
</div>
</a>
<a class="card " href="case-studies/integrate-design-system-audit.html">
<picture>
<source type="image/webp" media="(min-width: 1060px)" srcset="img/caseStudy_IntegrateDesignSystem.webp" />
<source type="image/webp" media="(min-width: 600px)" srcset="img/caseStudy_IntegrateDesignSystem@2x.webp" />
<img class="card__image" loading="lazy" decoding="async" src="img/caseStudy_IntegrateDesignSystem.webp" alt="Integrate Design System logo">
</picture>
<div class="card__textarea">
<h3 class="card__title"><span class="company__link">Integrate Design System Audit</span></h3>
<p class="card__description">New design language that both ignited deep conversations within design & engineering.</p>
</div>
</a>
<!-- <a class="card disabled" href="case-studies/integrate-asset-library-redesign.html">
<p class="card__banner">Under Construction</p>
<picture>
<source type="image/webp" media="(min-width: 1060px)" srcset="img/caseStudy_IntegrateAssetLibrary.webp" />
<source type="image/webp" media="(min-width: 600px)" srcset="img/caseStudy_IntegrateAssetLibrary@2x.webp" />
<img class="card__image" loading="lazy" decoding="async" src="img/caseStudy_IntegrateAssetLibrary.webp" alt="Integrate Design System logo">
</picture>
<div class="card__textarea">
<h3 class="card__title"><span class="company__link">Integrate Asset Library Redesign</span></h3>
<p class="card__description">Redefining how Asset Management works so as to satisfy different customer use cases.</p>
</div>
</a>
<a class="card disabled" href="case-studies/integrate-abm-web-analytics.html">
<p class="card__banner">Under Construction</p>
<picture>
<source type="image/webp" media="(min-width: 1060px)" srcset="img/caseStudy_IntegrateABMWebAnalytics.webp" />
<source type="image/webp" media="(min-width: 600px)" srcset="img/caseStudy_IntegrateABMWebAnalytics@2x.webp" />
<img class="card__image" loading="lazy" decoding="async" src="img/caseStudy_IntegrateABMWebAnalytics.webp" alt="Integrate Design System logo">
</picture>
<div class="card__textarea">
<h3 class="card__title"><span class="company__link">Integrate ABM Web Analytics</span></h3>
<p class="card__description">A new feature built to further expand the power of our current ABM product.</p>
</div>
</a> -->
</div>
</section>
<footer>
</footer>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<!-- <script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script> -->
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<!-- <script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script> -->
<script>
$(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 10) {
$(".logo__gabe").removeClass("logo__gabe--remove");
} else {
$(".logo__gabe").addClass("logo__gabe--remove");
}
});
});
</script>
</body>
</html>