latest version of the site, I'm a graphic designer now

This commit is contained in:
Brian Picciano 2022-04-11 21:00:39 -06:00
parent 7b207b5b01
commit b5ce8cb1ac
9 changed files with 1755 additions and 110 deletions

Binary file not shown.

88
css/main-index.css Normal file
View File

@ -0,0 +1,88 @@
@font-face {
font-family: "SourceCode-Pro";
src: url("source-code-pro.woff") format('woff');
}
@font-face {
font-family: "PlayfairDisplay-Regular";
src: url("playfair-display-regular.ttf");
}
@font-face {
font-family: "AbrilFatface-Regular";
src: url("AbrilFatface-Regular.ttf");
}
html {
font-family: Helvetica, sans-serif;
background-color: #fafafa;
color: #050505;
}
.container-wrap {
width: 100%;
}
.sep {
display: block;
width: 100%;
}
.button-primary {
background-color: #0F2E4D !important;
color: #E1EDF9 !important;
border: none !important;
text-decoration: none;
font-size: 3rem;
padding: 2rem;
height: auto !important;
}
.large {
color: #0F2E4D;
font-size: 3rem;
}
.neutral {
color: #0F2E4D;
font-family: "AbrilFatface-Regular", serif;
}
h1 {
font-size: 9rem;
font-weight: normal;
}
h2 {
font-size: 7rem;
font-weight: normal;
}
.design {
background-color: #991F3B;
color: #FFEDF1;
font-size: 2rem;
}
.design h2 {
font-family: "PlayfairDisplay-Regular", serif;
}
.develop {
background-color: #66991F;
color: #F8FFED;
font-size: 2rem;
}
.develop h2 {
font-family: "SourceCode-Pro", monospace, sans-serif;
}
em {
font-style: normal;
font-weight: bold;
}
a, a:active {
color: #5762AD;
}

View File

@ -8,17 +8,6 @@ html {
background-color: #f2f2f2;
}
@font-face {
font-family: "Overpass";
src: url("overpass-regular.woff") format('woff');
}
/*
h1, h2, h3, h4, h5, h6, .button-primary, .button {
font-family: "Overpass", Helvetica, sans-serif;
}
*/
h1 { color: #008700; }
h2 { color: #0087af; }
h3 { color: #8700af; }

Binary file not shown.

Binary file not shown.

264
img/a.svg Normal file
View File

@ -0,0 +1,264 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1000"
height="50"
viewBox="0 0 264.58333 13.229167"
version="1.1"
id="svg5"
sodipodi:docname="a.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview886"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
showgrid="false"
inkscape:snap-page="true"
inkscape:zoom="0.76438243"
inkscape:cx="793.45099"
inkscape:cy="-35.976756"
inkscape:window-width="1920"
inkscape:window-height="1060"
inkscape:window-x="0"
inkscape:window-y="20"
inkscape:window-maximized="1"
inkscape:current-layer="g5282" />
<defs
id="defs2">
<symbol
id="symbol1980">
<path
style="fill:#991f3b;stroke-width:3.51251;stroke-linejoin:round"
d="m 0,4.9229759 h 5.2916667 v 1.3229167 h -5.2916667 z"
id="path1876" />
<path
style="fill:#991f3b;stroke-width:3.51251;stroke-linejoin:round"
d="m 5.2916667,6.2458926 h 5.2916673 v 1.3229166 h -5.2916673 z"
id="path1876-1" />
</symbol>
</defs>
<g
id="g5282">
<g
id="g5400"
transform="matrix(1.0298971,-0.03882691,0.04001789,0.99924595,-0.50198934,5.1482287)">
<use
xlink:href="#symbol1980"
id="use1984"
x="0"
y="0"
width="100%"
height="100%" />
<use
xlink:href="#symbol1980"
id="use1984-0"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(10.583334)" />
<use
xlink:href="#symbol1980"
id="use1984-9"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(21.166668)" />
<use
xlink:href="#symbol1980"
id="use1984-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(31.750002)" />
<use
xlink:href="#symbol1980"
id="use1984-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(42.333336)" />
<use
xlink:href="#symbol1980"
id="use1984-06"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(52.91667)" />
<use
xlink:href="#symbol1980"
id="use1984-2"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(63.500004)" />
<use
xlink:href="#symbol1980"
id="use1984-61"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(74.083338)" />
<use
xlink:href="#symbol1980"
id="use1984-8"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(84.666672)" />
<use
xlink:href="#symbol1980"
id="use1984-7"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(95.250006)" />
<use
xlink:href="#symbol1980"
id="use1984-92"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(105.83334)" />
<use
xlink:href="#symbol1980"
id="use1984-02"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(116.41667)" />
<use
xlink:href="#symbol1980"
id="use1984-37"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(127)" />
<use
xlink:href="#symbol1980"
id="use1984-5"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(137.58333)" />
<use
xlink:href="#symbol1980"
id="use1984-922"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(148.16666)" />
<use
xlink:href="#symbol1980"
id="use1984-89"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(158.74999)" />
<use
xlink:href="#symbol1980"
id="use1984-73"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(169.33332)" />
<use
xlink:href="#symbol1980"
id="use1984-612"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(179.91665)" />
<use
xlink:href="#symbol1980"
id="use1984-93"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(190.49998)" />
<use
xlink:href="#symbol1980"
id="use1984-1"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(201.08331)" />
<use
xlink:href="#symbol1980"
id="use1984-94"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(211.66664)" />
<use
xlink:href="#symbol1980"
id="use1984-78"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(222.24997)" />
<use
xlink:href="#symbol1980"
id="use1984-4"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(232.8333)" />
<use
xlink:href="#symbol1980"
id="use1984-50"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(243.41663)" />
<use
xlink:href="#symbol1980"
id="use1984-36"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(253.99996)" />
<rect
style="fill:#991f3b;stroke-width:5.67329;stroke-linejoin:round"
id="rect3610"
width="264.58328"
height="18.63422"
x="5.2529296e-05"
y="7.4083333"
ry="0" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.5 KiB

809
img/b.svg Normal file
View File

@ -0,0 +1,809 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1000"
height="100"
viewBox="0 0 264.58333 26.458334"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<path
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
d="m 0,26.458333 v -20.521259 h 264.58333 l 0,20.521259 z"
id="path1612" />
<path
style="fill:#991f3b;fill-opacity:1;stroke:none;stroke-width:1.5875;stroke-linejoin:round;stroke-opacity:1"
d="m 0,0 v 5.937074 l 264.58333,13.229167 v -13.229167 -5.937074"
id="path1055" />
<g
id="g4033"
transform="rotate(3.0045567,446.71555,-135.62883)">
<g
id="use2015">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1440"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1442"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1444"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1446"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5"
transform="translate(10.583333)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1450"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1452"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1454"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1456"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-6"
transform="translate(21.166667)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1460"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1462"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1464"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1466"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-2"
transform="translate(31.75)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1470"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1472"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1474"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1476"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-9"
transform="translate(42.333334)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1480"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1482"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1484"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1486"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-1"
transform="translate(52.916667)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1490"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1492"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1494"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1496"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-6-2"
transform="translate(63.500001)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1500"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1502"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1504"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1506"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-2-7"
transform="translate(74.083334)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1510"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1512"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1514"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1516"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-0"
transform="translate(84.666667)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1520"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1522"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1524"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1526"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-9"
transform="translate(95.25)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1530"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1532"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1534"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1536"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-6-3"
transform="translate(105.83333)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1540"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1542"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1544"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1546"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-2-6"
transform="translate(116.41666)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1550"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1552"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1554"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1556"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-9-0"
transform="translate(127)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1560"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1562"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1564"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1566"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-1-6"
transform="translate(137.58333)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1570"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1572"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1574"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1576"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-6-2-2"
transform="translate(148.16667)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1580"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1582"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1584"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1586"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-2-7-6"
transform="translate(158.75)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1590"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1592"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1594"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1596"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-59"
transform="translate(169.33333)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1600"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1602"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1604"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1606"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-22"
transform="translate(179.91666)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1610"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1612"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1614"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1616"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-6-8"
transform="translate(190.5)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1620"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1622"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1624"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1626"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-2-9"
transform="translate(201.08333)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1630"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1632"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1634"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1636"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-9-7"
transform="translate(211.66666)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1640"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1642"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1644"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1646"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-1-3"
transform="translate(222.25)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1650"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1652"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1654"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1656"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-6-2-6"
transform="translate(232.83333)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1660"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1662"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1664"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1666"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-2-7-1"
transform="translate(243.41666)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1670"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1672"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1674"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1676"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-9-7-2"
transform="translate(254)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1680"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1682"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1684"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1686"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-1-3-9"
transform="translate(264.58334)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1690"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1692"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1694"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1696"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-6-2-6-3"
transform="translate(275.16667)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1700"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1702"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1704"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1706"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
<g
id="use2015-5-2-7-1-1"
transform="translate(285.75)">
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1710"
cx="2.6458333"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:1.5875;stroke-linejoin:round"
id="circle1712"
cx="7.9375"
cy="29.104166"
r="2.6458333" />
<circle
style="fill:#991f3b;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1714"
cx="2.6458333"
cy="29.104166"
r="1.3229166" />
<circle
style="fill:#66991f;fill-opacity:1;stroke-width:2.01952;stroke-linejoin:round"
id="circle1716"
cx="7.9375"
cy="29.104166"
r="1.3229166" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 25 KiB

502
img/c.svg Normal file
View File

@ -0,0 +1,502 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1000"
height="50"
viewBox="0 0 264.58333 13.229167"
version="1.1"
id="svg5"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2">
<symbol
id="symbol9023">
<path
style="fill:#fafafa;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 0,7.6184998 1.201303,1.201303 1.201303,-1.201303 -0.017298,-0.1576054 -2.3853076,-0.058815 z"
id="path6933" />
<path
style="fill:#66991f;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 2.402606,7.6184998 1.201303,-1.201303 1.201303,1.201303 -0.017298,0.1576054 -2.3853076,0.058815 z"
id="path6933-3" />
</symbol>
</defs>
<g
id="g10886"
transform="matrix(0.99934047,-0.03631283,-0.03631283,-0.99934047,-3.5983112,19.407054)">
<rect
style="fill:#66991f;fill-opacity:1;stroke:none;stroke-width:0.735948;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
id="rect6514"
width="276.88617"
height="17.238796"
x="0"
y="7.6184998"
ry="0" />
<use
xlink:href="#symbol9023"
id="use9027"
x="0"
y="0"
width="100%"
height="100%" />
<use
xlink:href="#symbol9023"
id="use9027-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(4.805212)" />
<use
xlink:href="#symbol9023"
id="use9027-0"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(9.610424)" />
<use
xlink:href="#symbol9023"
id="use9027-7"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(14.415636)" />
<use
xlink:href="#symbol9023"
id="use9027-8"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(19.220848)" />
<use
xlink:href="#symbol9023"
id="use9027-3-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(24.02606)" />
<use
xlink:href="#symbol9023"
id="use9027-0-8"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(28.831272)" />
<use
xlink:href="#symbol9023"
id="use9027-7-8"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(33.636484)" />
<use
xlink:href="#symbol9023"
id="use9027-4"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(38.441696)" />
<use
xlink:href="#symbol9023"
id="use9027-3-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(43.246908)" />
<use
xlink:href="#symbol9023"
id="use9027-0-1"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(48.05212)" />
<use
xlink:href="#symbol9023"
id="use9027-7-4"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(52.857332)" />
<use
xlink:href="#symbol9023"
id="use9027-9"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(57.662544)" />
<use
xlink:href="#symbol9023"
id="use9027-3-2"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(62.467756)" />
<use
xlink:href="#symbol9023"
id="use9027-0-0"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(67.272968)" />
<use
xlink:href="#symbol9023"
id="use9027-7-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(72.07818)" />
<use
xlink:href="#symbol9023"
id="use9027-89"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(76.883392)" />
<use
xlink:href="#symbol9023"
id="use9027-3-26"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(81.688604)" />
<use
xlink:href="#symbol9023"
id="use9027-0-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(86.493816)" />
<use
xlink:href="#symbol9023"
id="use9027-7-49"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(91.299028)" />
<use
xlink:href="#symbol9023"
id="use9027-5"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(96.10424)" />
<use
xlink:href="#symbol9023"
id="use9027-3-0"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(100.90946)" />
<use
xlink:href="#symbol9023"
id="use9027-0-4"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(105.71467)" />
<use
xlink:href="#symbol9023"
id="use9027-7-87"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(110.51988)" />
<use
xlink:href="#symbol9023"
id="use9027-7-4-7"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(115.32509)" />
<use
xlink:href="#symbol9023"
id="use9027-9-7"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(120.1303)" />
<use
xlink:href="#symbol9023"
id="use9027-3-2-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(124.93551)" />
<use
xlink:href="#symbol9023"
id="use9027-0-0-7"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(129.74072)" />
<use
xlink:href="#symbol9023"
id="use9027-7-6-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(134.54594)" />
<use
xlink:href="#symbol9023"
id="use9027-89-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(139.35115)" />
<use
xlink:href="#symbol9023"
id="use9027-3-26-5"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(144.15636)" />
<use
xlink:href="#symbol9023"
id="use9027-0-6-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(148.96157)" />
<use
xlink:href="#symbol9023"
id="use9027-7-49-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(153.76678)" />
<use
xlink:href="#symbol9023"
id="use9027-5-9"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(158.57199)" />
<use
xlink:href="#symbol9023"
id="use9027-3-0-4"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(163.37721)" />
<use
xlink:href="#symbol9023"
id="use9027-0-4-8"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(168.18242)" />
<use
xlink:href="#symbol9023"
id="use9027-7-87-1"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(172.98763)" />
<use
xlink:href="#symbol9023"
id="use9027-7-4-2"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(177.79284)" />
<use
xlink:href="#symbol9023"
id="use9027-9-9"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(182.59805)" />
<use
xlink:href="#symbol9023"
id="use9027-3-2-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(187.40327)" />
<use
xlink:href="#symbol9023"
id="use9027-0-0-9"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(192.20848)" />
<use
xlink:href="#symbol9023"
id="use9027-7-6-0"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(197.01369)" />
<use
xlink:href="#symbol9023"
id="use9027-89-8"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(201.8189)" />
<use
xlink:href="#symbol9023"
id="use9027-3-26-8"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(206.62411)" />
<use
xlink:href="#symbol9023"
id="use9027-0-6-5"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(211.42933)" />
<use
xlink:href="#symbol9023"
id="use9027-7-49-0"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(216.23454)" />
<use
xlink:href="#symbol9023"
id="use9027-5-96"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(221.03975)" />
<use
xlink:href="#symbol9023"
id="use9027-3-0-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(225.84497)" />
<use
xlink:href="#symbol9023"
id="use9027-0-4-85"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(230.65018)" />
<use
xlink:href="#symbol9023"
id="use9027-7-87-6"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(235.45539)" />
<use
xlink:href="#symbol9023"
id="use9027-7-4-1"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(240.2606)" />
<use
xlink:href="#symbol9023"
id="use9027-9-1"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(245.06581)" />
<use
xlink:href="#symbol9023"
id="use9027-3-2-5"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(249.87103)" />
<use
xlink:href="#symbol9023"
id="use9027-0-0-98"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(254.67624)" />
<use
xlink:href="#symbol9023"
id="use9027-7-6-4"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(259.48145)" />
<use
xlink:href="#symbol9023"
id="use9027-89-81"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(264.28666)" />
<use
xlink:href="#symbol9023"
id="use9027-3-26-0"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(269.09187)" />
<use
xlink:href="#symbol9023"
id="use9027-0-6-3"
x="0"
y="0"
width="100%"
height="100%"
transform="translate(273.89709)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -4,7 +4,7 @@
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Brian Picciano - Freelance Developer</title>
<title>Brian Picciano - Freelance Web Design and Development</title>
<meta name="author" content="Brian Picciano">
<!-- No favicon -->
@ -16,130 +16,123 @@
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main-index.css">
</head>
<body>
<div class="header">
<div class="selected tab">/index</div><!--
--><div class="tab"><a href="resume.html">/resume</a></div><!--
--><div class="tab"><a href="contact.html">/contact</a></div>
<div class="x">X</div>
<div class="container" style="margin-top: 5rem;">
<p class="large">
Hello! I'm Brian Picciano, a freelance graphic designer and web
developer. My passion is creating <em>beautiful</em> websites that
<em>delight</em> their users.
</p>
<p class="large">
<a href="mailto:bgpicciano@gmail.com">Contact me</a>
if I can help you with...
</p>
</div>
<img class="sep" src="img/a.svg" />
<div class="container-wrap design" style="padding: 5rem 0 2rem 0;"><div class="container">
<div class="row">
<div class="eight columns">
<h2>Graphic Design</h2>
<p>
Design is expression, so we will work together to understand what
exactly your brand and product express. The result will be a
<em>vivid</em> and <em>sincere</em> reflection of your brand's
identity.
</p>
<p>
Offerings include logos, graphics, styleguides, and even full
website mockups.
</p>
</div>
<div class="four columns">
&nbsp;
</div>
</div>
</div></div>
<img class="sep" src="img/b.svg" />
<div class="container-wrap develop"><div class="container">
<div class="row">
<div class="four columns">
&nbsp;
</div>
<div class="eight columns">
<h2>Web Development</h2>
<p>
With over 10+ years experience on the web, I can pretty much build
anything. Whether you need a brand new site, a complete overhaul,
or minor adjustments to an existing site, you can count on me.
</p>
<p>
Where other developers might work with bulky frameworks which
result in a frustrating user experience, I will get down in the
weeds to craft your site by hand. The result is code which is
lightweight, fast, and responsive for all of your users, not just
those with the latest hardware.
</p>
</div>
</div>
</div></div>
<img class="sep" src="img/c.svg" />
<div class="container">
<h1>Brian Picciano</h1>
<h2>Freelance Developer</h2>
<h1 class="neutral" style="text-align: center; padding: 2rem 0 4rem 0;">
Next Steps
</h1>
<div class="row">
<div class="six columns" style="text-align: center;">
<a href="mailto:bgpicciano@gmail.com">
<button class="button-primary">Contact me!</button></a>
</div>
<div class="six columns">
<p>
Hello! My name is <strong>Brian Picciano</strong>. I'm a full-stack
developer with a focus on designing <em>secure</em> and
<em>scalable</em> backends for web applications.
I work remotely and can adapt to any timezone constraints you may
have. So hit the big button and we'll get started right away!
</p>
<p>
I have gained experience with an <em>extremely diverse</em> set of
languages, databases, and products over the last <em>ten years</em>,
and I'm always looking for more.
During our initial, free, 45-minute consultation, we will discuss
the work you'd like done, timelines on both of our ends, and
compensation. If we choose to continue then work will begin
promptly, with weekly progress reports from me so you can give
feedback as necessary.
</p>
<p>
Remote work has been my life since 2015. No matter where in the
<em>world</em> your team is, I can work with them smoothly and
effectively over a variety of communication platforms.
Thank you for your time, and I look forward to hearing from you.
</p>
<h2>What I Do</h2>
- Brian Picciano
<p>
I help you <em>solve your problems</em>, no matter what stage of
development you're at. <a href="contact.html">Contact me</a> if you
need someone to:
</p>
<ul>
<li>
Create a <em>development roadmap</em>, so your app can scale
globally starting from <em>now</em>.
</li>
<li>
Analyze or design your <em>system architecture</em> with an eye to
performance, scaling, security, and visibility.
</li>
<li>
Get down into the weeds to <em>debug</em> those pesky network and
operating system adjacent issues which eat so much dev time when
they show up.
</li>
<li>
Be the <em>one extra super-dev</em> you need to grind out that
crucial feature before deadline.
</li>
<li>
Try something new and different! I'm a quick learner and can
execute research spikes and MVPs for ideas that have yet to be
proven or even fully understood.
</li>
</ul>
<h2>What I've Done</h2>
<p>
You can see a breakdown of all my past work at my
<a href="resume.html">resume</a> page. Feel free to
<a href="contact.html">reach out to me</a> if you have any questions
about my past work.
</p>
<h2>Next Steps</h2>
<p>
Drop by my <a href="contact.html">contact</a> page to schedule a
<em>free</em>, 45 minute consultation. We will discuss your project,
what sort of assistance you need from me, and a timeline to get it
to you.
</p>
</div>
</div>
<div class="footer">
<div class="scrollpos" id="scrollpos">---</div>
</div>
<script>
function getScrollPct() {
const heightOfWindow = window.innerHeight,
contentScrolled = window.pageYOffset,
bodyHeight = document.body.offsetHeight;
if(bodyHeight - contentScrolled <= heightOfWindow) {
return "Bot";
} else if (contentScrolled == 0) {
return "Top";
} else {
const total = bodyHeight - heightOfWindow,
got = contentScrolled,
percent = parseInt((got/total) * 100);
return percent + "%"
}
}
const scrollposEl = document.getElementById("scrollpos");
scrollposEl.textContent = getScrollPct();
window.addEventListener("scroll", (event) => {
scrollposEl.textContent = getScrollPct();
});
</script>
</body>
</html>