-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (104 loc) · 7.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>An independent web design studio located in Portland, Maine</title>
<meta property="og:image" content="_img/delightful-labs-icon.png" />
<link rel="stylesheet" href="_styles/styles.css">
</head>
<body>
<svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0, 0, 1900, 550">
<g id="Layer_1">
<text transform="matrix(1, 0, 0, 1, 950, 366.705)">
<tspan x="-933.344" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-12" fill="#999999" fill-opacity="0">d</tspan>
<tspan x="-750.944" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-12" fill="#999999">e</tspan>
<tspan x="-585.044" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-10" fill="#999999">l</tspan>
<tspan x="-527.244" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-8" fill="#999999">i</tspan>
<tspan x="-467.444" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-16" fill="#999999">g</tspan>
<tspan x="-289.344" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-12" fill="#999999">h</tspan>
<tspan x="-123.444" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-6" fill="#999999">t</tspan>
<tspan x="-14.844" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-14" fill="#999999">f</tspan>
<tspan x="71.956" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-17" fill="#999999">u</tspan>
<tspan x="234.656" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-80" fill="#999999">l</tspan>
<tspan x="222.456" y="101.705" font-family="FilsonProLight" font-size="300" fill="#999999"> </tspan>
<tspan x="306.456" y="101.705" font-family="FilsonProLight" font-size="300" fill="#9FF299">L</tspan>
<tspan x="448.356" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-22" fill="#9FF299">a</tspan>
<tspan x="620.756" y="101.705" font-family="FilsonProLight" font-size="300" kerning="-10" fill="#9FF299">b</tspan>
<tspan x="805.156" y="101.705" font-family="FilsonProLight" font-size="300" fill="#9FF299">s</tspan>
</text>
<path d="M171.818,457.588 C171.517,454.61 172.605,374.983 171.764,375.152 C159.672,391.366 146.544,375.047 146.544,375.047 C146.544,375.047 132.824,355.978 121.044,375.016 C111.237,390.868 95.544,375.016 95.544,375.016 C95.544,375.016 81.073,356.805 70.044,375.016 C61.228,389.574 45.513,374.928 45.513,374.939 C40.414,390.014 39.351,443.136 85.783,456.512 C116.696,463.747 149.844,460.984 171.818,457.588 z" fill="#9FF299"/>
<path d="M82.822,111.572 L178.822,111.572 C178.822,111.572 178.822,463.49 178.822,463.49 C178.822,463.49 133.89,473.003 87.657,464.039 C21.391,450.122 13.001,329.996 106.822,323.654 C107.25,311.654 106.822,159.572 106.822,159.572 L82.822,159.572 z M178.822,159.306 L106.822,159.572" fill-opacity="0" stroke="#999999" stroke-width="13"/>
<g>
<path d="M456.002,285.067 C448.006,285.067 441.525,278.647 441.525,270.726 C441.525,262.806 448.006,256.385 456.002,256.385 C463.997,256.385 470.479,262.806 470.479,270.726 C470.479,278.647 463.997,285.067 456.002,285.067 z" fill="#FFFFFF"/>
<path d="M456.002,285.067 C448.006,285.067 441.525,278.647 441.525,270.726 C441.525,262.806 448.006,256.385 456.002,256.385 C463.997,256.385 470.479,262.806 470.479,270.726 C470.479,278.647 463.997,285.067 456.002,285.067 z" fill-opacity="0" stroke="#9FF299" stroke-width="6"/>
</g>
<text transform="matrix(1, 0, 0, 1, 547.817, 268.226)"/>
<path d="M148.491,39.682 C156.487,39.682 162.968,33.261 162.968,25.341 C162.968,17.421 156.487,11 148.491,11 C140.496,11 134.014,17.421 134.014,25.341 C134.014,33.261 140.496,39.682 148.491,39.682 z" fill-opacity="0" stroke="#9FF299" stroke-width="6"/>
<path d="M84.056,418.949 C76.061,418.949 69.579,412.529 69.579,404.608 C69.579,396.688 76.061,390.267 84.056,390.267 C92.051,390.267 98.533,396.688 98.533,404.608 C98.533,412.529 92.051,418.949 84.056,418.949 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="6"/>
<path d="M133.556,435.232 C127.348,435.232 122.316,430.252 122.316,424.108 C122.316,417.965 127.348,412.984 133.556,412.984 C139.764,412.984 144.796,417.965 144.796,424.108 C144.796,430.252 139.764,435.232 133.556,435.232 z" fill="#FFFFFF"/>
<path d="M137.491,276.729 C145.487,276.729 151.968,270.309 151.968,262.388 C151.968,254.468 145.487,248.047 137.491,248.047 C129.496,248.047 123.014,254.468 123.014,262.388 C123.014,270.309 129.496,276.729 137.491,276.729 z" fill-opacity="0" stroke="#9FF299" stroke-width="6"/>
<path d="M147.991,210.304 C154.199,210.304 159.231,205.323 159.231,199.18 C159.231,193.036 154.199,188.056 147.991,188.056 C141.784,188.056 136.751,193.036 136.751,199.18 C136.751,205.323 141.784,210.304 147.991,210.304 z" fill="#9FF299"/>
<path d="M147.991,339.061 C154.199,339.061 159.231,334.081 159.231,327.937 C159.231,321.793 154.199,316.813 147.991,316.813 C141.784,316.813 136.751,321.793 136.751,327.937 C136.751,334.081 141.784,339.061 147.991,339.061 z" fill="#9FF299"/>
<path d="M136.991,87.711 C143.199,87.711 148.231,82.73 148.231,76.587 C148.231,70.443 143.199,65.463 136.991,65.463 C130.784,65.463 125.751,70.443 125.751,76.587 C125.751,82.73 130.784,87.711 136.991,87.711 z" fill="#9FF299"/>
</g>
</svg>
<div class="bubble-box">
<p>I'm Matt Derocher, and Delightful Labs is my personal web design studio.</p>
<p>I focus on creating clean and original sites that deliver an excellent user experience.</p>
<span class="bubble">
<span class="glow"></span>
</span>
<span class="bubble">
<span class="glow"></span>
</span>
<span class="bubble">
<span class="glow"></span>
</span>
<span class="bubble">
<span class="glow"></span>
</span>
<span class="bubble">
<span class="glow"></span>
</span>
<span class="bubble">
<span class="glow"></span>
</span>
</div>
<h2>Work</h2>
<div class="portfolio">
<div>
<a class="portfolio-img" href="https://water.deliverance.me/"><img src="_img/mungu-maji_1600.jpg" /></a>
<a href="https://stenographer-jeffrey-83688.netlify.app/">Mungu Maji Water Project webpage</a>
</div>
<div>
<a class="portfolio-img" href="https://panthercreektrailrides.com/"><img src="_img/panther_1600.jpg" /></a>
<a href="https://panthercreektrailrides.com/">Panther Creek website</a>
</div>
<div>
<a class="portfolio-img" href="https://yale.cofb.us/"><img src="_img/general-assembly_1600.jpg" /></a>
<a href="https://yale.cofb.us/">Church of the Firstborn website</a>
</div>
<div>
<a class="portfolio-img" href="https://treeguy.netlify.com/"><img src="_img/207-tree-guy_1600.jpg" /></a>
<a href="https://207treeguy.com/">207Treeguy website</a>
</div>
<div>
<a class="portfolio-img" href="http://dogwoodchurch.us/"><img src="_img/dogwood_1600.jpg" /></a>
<a href="http://dogwoodchurch.us/">Dogwood Church website</a>
</div>
<div>
<a class="portfolio-img" href="http://connexion.camp"><img src="_img/connexion.jpg" /></a>
<a href="http://connexion.camp">Camp Connexion website</a>
</div>
</div>
<div class="molecules">
<h2>Contact</h2>
<p>Email me at <a href="mailto:[email protected]">[email protected]</a></p>
<p>Download my <a href="https://drive.google.com/file/d/1l98dU_nuMSZo0wcTxroPnKgjvueUzlAa/view?usp=sharing">resume</a></p>
<footer>
<p>Copyright 2018 Matthew Derocher</p>
</footer>
</div>
</body>
</html>