Various Changes

- Implemented contact-me form - Added social icons using font-awesome - Changed font - Added favicon - Changed site logo from png to svg
2020-05-18 11:49:56 -06:00
1 parent e4d86628aa
commit cc791c8e20
@@ -1,9 +1,20 @@
+:root {
+    --main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
+    --main-accent-color: #302b44;
+    --light-accent-color: #686283;
+    --alt-accent-color: #B05C71; /*#990F3D;*/
+    --dark-alt-accent-color: #913A50;
+    --title-font: 'Cinzel', serif;
+    --body-font: 'Raleway', sans-serif;
+}
+
 html, body { height: 100%; }

 body {
-    background-color: #ccfff3;
-    font-family: roboto,sans-serif;
-    color: #302b44;
+    background-color: var(--main-bg-color);
+    font-family: var(--body-font);
+    font-weight: 500;
+    color: var(--main-accent-color);
 }

 #page-content {
@@ -12,11 +23,11 @@ body {

 footer {
    flex-shrink: 0;
-    background-color: #302b44;
+    background-color: var(--main-accent-color);
 }

 footer p, footer ul li {
-    color: #686283;
+    color: var(--light-accent-color);
    font-size: 0.8rem;
 }

@@ -25,6 +36,10 @@ footer ul {
    padding-left: 20px;
 }

+h1, h2, h3, h4 {
+    font-weight: 500;
+}
+
 .container-fluid {
    padding-left: 5%;
    padding-right: 5%;
@@ -38,9 +53,52 @@ footer ul {
 .navbar-brand {
    height: 75px;
    padding-left: 100px;
-    font-family: cinzel,serif;
+    font-family: var(--title-font);
    font-size: 2.5rem;
-    background-image: url('../images/jwlogo.png');
+    background-image: url('../images/jwlogo.svg');
    background-repeat: no-repeat;
-    color: #302b44;
-}
+    color: var(--main-accent-color);
+}
+
+.navbar-light .navbar-nav .nav-link {
+    text-decoration: none;
+}
+
+.navbar-light .navbar-nav .nav-link:hover {
+    color: var(--alt-accent-color);
+}
+
+.social-icons {
+    font-size: 0;
+}
+
+.social-icons a {
+    display: inline-block;
+    height: 3.5rem;
+    width: 3.5rem;
+    background-color: var(--main-accent-color);
+    color: var(--main-bg-color);
+    text-align: center;
+    font-size: 1.5rem;
+    line-height: 3.5rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+}
+
+.social-icons a:last-child {
+  margin-right: 0;
+}
+
+.social-icons a:hover {
+    background-color: var(--dark-alt-accent-color);
+    color: #fff;
+}
+
+a {
+    color: var(--alt-accent-color);
+    text-decoration: underline;
+}
+
+a:hover {
+    color: var(--dark-alt-accent-color);
+    text-decoration: none;
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg991"
+   version="1.1"
+   viewBox="0 0 20.245804 20.24579"
+   height="20.24579mm"
+   width="20.245804mm">
+  <defs
+     id="defs985" />
+  <metadata
+     id="metadata988">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-47.754592,-115.27591)"
+     id="layer1">
+    <path
+       id="rect14-6"
+       d="m 47.754592,115.27591 v 17.63304 c 0.106168,-0.24788 0.233702,-0.4884 0.384473,-0.72141 0.199014,-0.31273 0.431246,-0.61124 0.696598,-0.89555 0.255874,-0.27483 0.516513,-0.53548 0.781864,-0.78186 0.09477,-0.0853 0.24678,-0.22285 0.45527,-0.41239 0.199014,-0.18006 0.430729,-0.38388 0.696081,-0.61132 0.255874,-0.21796 0.525982,-0.45468 0.810287,-0.71056 0.284305,-0.24639 0.559405,-0.48362 0.824756,-0.71107 0.255875,-0.21795 0.488108,-0.41231 0.696598,-0.5829 l 0.469222,-0.38343 c 0.04738,-0.14217 0.137075,-0.38387 0.269751,-0.72504 0.142152,-0.34117 0.28917,-0.70147 0.4408,-1.08055 0.151629,-0.38854 0.298648,-0.74835 0.4408,-1.08004 0.142153,-0.34116 0.241313,-0.57838 0.298173,-0.71106 0.04739,-0.11372 0.104194,-0.23233 0.170532,-0.35554 0.06634,-0.13267 0.142601,-0.25077 0.227893,-0.35502 0.09477,-0.11373 0.19892,-0.2084 0.312642,-0.28422 0.113723,-0.0758 0.241288,-0.1142 0.38344,-0.1142 0,0.29378 -0.05182,0.62121 -0.156063,0.98133 -0.09477,0.36013 -0.213382,0.71992 -0.355534,1.08004 -0.132676,0.35065 -0.274701,0.68256 -0.426331,0.99529 -0.142152,0.30326 -0.255773,0.54943 -0.341064,0.73897 0.01895,0 0.04736,0.005 0.08527,0.0145 h 0.09922 c 0.236921,0 0.464678,-0.0334 0.682645,-0.0997 0.217967,-0.0663 0.445208,-0.0992 0.682129,-0.0992 0.07581,0 0.156554,0.004 0.241846,0.0139 0.0085,8.6e-4 0.01527,0.004 0.02325,0.006 0.176817,-0.31351 0.375447,-0.60935 0.59738,-0.88676 0.236921,-0.29378 0.483616,-0.57388 0.73949,-0.83923 0.265352,-0.26535 0.497068,-0.53046 0.696081,-0.79582 0.161106,0 0.265775,0.0329 0.313159,0.0992 0.04738,0.0663 0.0708,0.15156 0.0708,0.2558 -0.07581,0.0853 -0.194428,0.23679 -0.355534,0.45475 -0.151629,0.21797 -0.307599,0.4502 -0.468705,0.6966 -0.161106,0.2464 -0.308124,0.48311 -0.4408,0.71055 -0.123199,0.21797 -0.189477,0.37445 -0.198954,0.46922 -0.07581,0.27482 -0.07581,0.45026 0,0.52607 0.08529,0.0663 0.217848,0.0663 0.397908,0 0.18006,-0.0758 0.393357,-0.19891 0.639755,-0.36949 0.246398,-0.18005 0.502044,-0.38388 0.767395,-0.61132 0.265352,-0.22744 0.521513,-0.45967 0.767911,-0.69661 0.255875,-0.23691 0.473647,-0.4502 0.653707,-0.63975 h 0.611332 c 0,0.16111 -0.02393,0.3126 -0.07131,0.45475 -0.04738,0.14217 -0.0992,0.2847 -0.156063,0.42685 -0.04738,0.13268 -0.09473,0.26972 -0.14211,0.41187 -0.04739,0.13267 -0.07131,0.27522 -0.07131,0.42685 0,0.20849 0.06628,0.33605 0.198955,0.38343 0.132676,0.0474 0.289161,0.0713 0.469222,0.0713 0.23692,0 0.48809,-0.0473 0.753442,-0.14211 0.265351,-0.0948 0.507053,-0.22733 0.72502,-0.39791 0.227444,-0.17058 0.412337,-0.36993 0.554488,-0.59738 0.142153,-0.22744 0.212907,-0.47362 0.212907,-0.73897 0,-0.2464 -0.03787,-0.46917 -0.113688,-0.66818 -0.06634,-0.19903 -0.09922,-0.4168 -0.09922,-0.65372 0,-0.2843 0.156487,-0.42684 0.469223,-0.42684 0.0075,0 0.0143,0.002 0.0217,0.003 l 0.0031,-0.0429 c 0.01302,0.0179 0.02863,0.0328 0.04393,0.0481 0.104472,0.0159 0.19804,0.0678 0.280086,0.15658 0.464728,0.17372 0.93881,0.28894 1.422136,0.34571 0.490136,0.0628 0.993857,0.10272 1.511536,0.11937 0.02542,-0.001 0.09464,-0.008 0.207739,-0.0202 0.09978,-0.0109 0.216542,-0.0244 0.340547,-0.0393 v -8.24135 z m 10.051066,1.55908 c 0.132675,0 0.213416,0.0518 0.241846,0.15606 0.02843,0.10425 0.04237,0.20892 0.04237,0.31316 0,0.17059 -0.04734,0.32207 -0.14211,0.45475 -0.09477,0.12319 -0.236793,0.18449 -0.42633,0.18449 -0.170584,0 -0.274736,-0.0757 -0.312643,-0.22738 -0.02843,-0.15163 -0.04289,-0.29813 -0.04289,-0.44028 0,-0.0569 0.02393,-0.11419 0.07131,-0.17105 0.04738,-0.0569 0.104194,-0.1042 0.170532,-0.14211 0.06634,-0.0379 0.137092,-0.0663 0.212907,-0.0853 0.07581,-0.0284 0.137618,-0.0424 0.185002,-0.0424 z m 7.029545,6.85436 v 5.2e-4 c 0.04391,0.1266 0.08006,0.25708 0.101802,0.39481 0.03791,0.17057 0.05685,0.30812 0.05685,0.41237 0,0.48331 -0.113621,0.9094 -0.341065,1.279 -0.227444,0.36958 -0.521481,0.68257 -0.8816,0.93844 -0.36012,0.2464 -0.762784,0.43577 -1.208195,0.56844 -0.435934,0.1232 -0.867003,0.185 -1.293461,0.185 -0.350643,0 -0.630218,-0.12808 -0.838708,-0.38395 -0.199014,-0.25588 -0.303166,-0.5544 -0.312643,-0.89556 -0.265351,0.0853 -0.512045,0.22731 -0.739489,0.42633 -0.217968,0.19901 -0.440733,0.40284 -0.668177,0.61134 -0.217967,0.19901 -0.445208,0.37943 -0.682129,0.54053 -0.236921,0.16111 -0.502035,0.24133 -0.795817,0.24133 -0.07581,0 -0.166022,-0.0284 -0.270267,-0.0853 -0.104246,-0.0663 -0.208398,-0.14655 -0.312643,-0.24132 -0.09477,-0.0948 -0.175508,-0.19446 -0.241846,-0.2987 -0.05686,-0.10424 -0.08027,-0.19893 -0.0708,-0.28421 0.01385,-0.18461 0.04494,-0.36219 0.0925,-0.53331 -0.03325,0.0174 -0.06589,0.0354 -0.102319,0.0496 -0.217967,0.0853 -0.450201,0.15657 -0.696598,0.21343 -0.236921,0.0569 -0.464162,0.12813 -0.682129,0.21342 -0.217968,0.0758 -0.374454,0.21285 -0.469222,0.41186 -0.05686,0.11373 -0.142075,0.28915 -0.255798,0.52607 -0.113722,0.22744 -0.24628,0.48808 -0.397909,0.78186 -0.142153,0.29379 -0.294163,0.60177 -0.455269,0.92398 -0.15163,0.33169 -0.29813,0.64466 -0.440283,0.93844 -0.132675,0.30326 -0.256282,0.57337 -0.370004,0.81029 -0.11Line truncated
+       style="fill:#302b44;fill-opacity:1;stroke:none;stroke-width:0.26458332" />
+  </g>
+</svg>
@@ -0,0 +1,3 @@
+$(() => {
+    $('[data-toggle="tooltip"]').tooltip()
+});
@@ -12,9 +12,11 @@ description = "Default Layout"
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

-        <link href='//fonts.googleapis.com/css?family=Cinzel|Roboto:300,400,500' rel='stylesheet' type='text/css'>
+        <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Raleway:wght@500;600&display=swap" rel="stylesheet">
        <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
-        <title>Hello, world!</title>
+        <link rel="icon" type="image/png" sizes="32x32" href="{{ 'assets/images/favicon-32x32.png'|theme }}">
+        <link rel="icon" type="image/png" sizes="16x16" href="{{ 'assets/images/favicon-16x16.png'|theme }}">
+        <title>{{ this.page.title }} - Ja.son-Williams.ca</title>
    </head>
    <body class="d-flex flex-column">
        <div id="page-content">
@@ -44,7 +46,7 @@ description = "Default Layout"
                            <li><a href="/contact">Contact Me</a></li>
                        </ul>
                        {% component 'CurrentInfo' %}
-                        <p>Made with 💖 in #YYC<br><a href="https://www.madeinyyc.com/"><img src="{{ 'assets/images/madeinyyc.png'|theme }}"></a></p>
+                        <p>Made with <i class="fas fa-heart"></i> in #YYC<br><a href="https://www.madeinyyc.com/"><img src="{{ 'assets/images/madeinyyc.png'|theme }}"></a></p>
                    </div>
                    <div class="col-md-4">
                        <p>Recent Projects</p>
@@ -58,6 +60,7 @@ description = "Default Layout"
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+        <script src="https://kit.fontawesome.com/e0459f3cc9.js" crossorigin="anonymous"></script>
        {% framework extras %}
        {% scripts %}
    </body>
@@ -2,5 +2,44 @@ title = "Contact Me"
 url = "/contact"
 layout = "default"
 is_hidden = 0
+
+[emptyForm contactform]
+group = "Contact Me"
+rules[name] = "required"
+rules[email] = "required|email"
+rules[message] = "required"
+messages_success = "Your form was successfully submitted"
+messages_errors = "There were errors with your submission"
+mail_enabled = 1
+mail_subject = "Contact Me"
+mail_recipients[] = "[email protected]"
+mail_replyto = "email"
+inline_errors = "disabled"
+sanitize_data = "disabled"
+anonymize_ip = "disabled"
+recaptcha_enabled = 1
+recaptcha_theme = "light"
+recaptcha_type = "image"
+recaptcha_size = "invisible"
+emails_date_format = "Y-m-d"
 ==
-<p>Contact Me</p>
+<div class="row">
+    <div class="col-lg-7">
+        <h1>Contact Me</h1>
+        <p>The simplest and quickest way to contact me is by completing the form below.</p>
+        {% component 'contactform' %}
+    </div>
+    <div class="col-lg-5">
+        <h2>Old School</h2>
+        <p>Sometimes the more traditional ways of getting in touch are just better...</p>
+        <p>IMG</p>
+        <p>4th Floor, 1207 11 Ave SW,<br>
+          Calgary, AB, T3C 0M5<br>
+          Canada</p>
+        <p><a href="tel:+15872888242">(587) 288-8242</a></p>
+        
+        <h2>New Cool</h2>
+        <p>...and sometimes it's better to keep up with the times.</p>
+        {% partial 'social' nocode = true nocontact = true %}
+    </div>
+</div>
@@ -7,8 +7,11 @@ is_hidden = 0
    <div class="col-lg-5 order-lg-2">
        <h1>Welcome</h1>
        <p>Welcome to Ja.son-Williams.ca, the little home on the web of – surprise, surprise – Jason Williams.</p>
-        <p>Jay is a caucasian male originally from Swansea, UK but last spotted in Calgary, Canada. By day he's a mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
-        <p>He doesn't kepp very much stuff here, but to browse around please make a selection from the menu at the top right of the page.</p>
+        <p>Jay is a caucasian male originally from <a href="https://en.wikipedia.org/wiki/Swansea">Swansea, UK</a> but last spotted in <a href="https://en.wikipedia.org/wiki/Calgary">Calgary, Canada</a>. By day he's a mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
+        <p>He doesn't keep very much stuff here, but to browse around please make a selection from the menu at the top right of the page.</p>
+
+        <h2>Available Everywhere</h2>
+        {% partial 'social' %}
    </div>
    <div class="col-lg-7 order-lg-1">
        <h1>Feed</h1>
@@ -0,0 +1,38 @@
+description = "Contact Me Form"
+==
+<form data-request="{{ __SELF__ }}::onFormSubmit">
+
+    {{ form_token() }}
+
+    <div id="{{ __SELF__ }}_forms_flash"></div>
+
+    <div class="form-group">
+        <!--<label for="name">Name:</label>
+        <input type="text" id="name" name="name" class="form-control">-->
+        <input type="text" id="name" name="name" class="form-control" placeholder="Your Name" required autofocus>
+    </div>
+
+    <div class="form-group">
+        <!--<label for="email">Email:</label>
+        <input type="text" id="email" name="email" class="form-control">-->
+        <input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required>
+    </div>
+
+    <!--<div class="form-group">
+        <label for="subject">Subject:</label>
+        <input type="text" id="subject" name="subject" class="form-control">
+    </div>-->
+
+    <div class="form-group">
+        <!--<label for="message">Message:</label>-->
+        <textarea id="message" name="message" rows="8" class="form-control" placeholder="Message"></textarea>
+    </div>
+
+    <div class="form-group">
+        {% partial '@recaptcha' %}
+    </div>
+
+    <button id="simpleContactSubmitButton" type="submit" class="btn btn-outline-primary">Send</button>
+    <button type="reset" class="btn btn-outline-danger">Cancel</button>
+
+</form>
@@ -0,0 +1,47 @@
+description = "Social Media Links"
+==
+<?php
+function onStart()
+{
+    $this->addJs('assets/javascript/tooltips.js');
+}
+?>
+==
+<div class="social-icons">
+    {% if not nosocial %}
+        <a href="https://www.linkedin.com/in/jaywll/" data-toggle="tooltip" title="LinkedIn">
+            <i class="fab fa-linkedin-in"></i>
+        </a>
+        <a href="https://twitter.com/jaywll" data-toggle="tooltip" title="Twitter">
+            <i class="fab fa-twitter"></i>
+        </a>
+        <a href="https://www.instagram.com/jaywll/" data-toggle="tooltip" title="Instagram">
+            <i class="fab fa-instagram"></i>
+        </a>
+        <a href="https://www.facebook.com/jaywll/" data-toggle="tooltip" title="Facebook">
+            <i class="fab fa-facebook-f"></i>
+        </a>
+        <a href="https://jaywll.wordpress.com/category/blog/" data-toggle="tooltip" title="Wordpress">
+            <i class="fab fa-wordpress-simple"></i>
+        </a>
+        <a href="https://foursquare.com/jaywll" data-toggle="tooltip" title="Foursquare">
+            <i class="fab fa-foursquare"></i>
+        </a>
+    {% endif %}
+    {% if not nocode %}
+        <a href="https://glitch.com/@JayWll" data-toggle="tooltip" title="Glitch">
+            <i class="fab fa-node-js"></i>
+        </a>
+        <a href="https://github.com/JayWll" data-toggle="tooltip" title="GitHub">
+            <i class="fab fa-github"></i>
+        </a>
+        <a href="https://gitlab.com/jaywll" data-toggle="tooltip" title="GitLab">
+            <i class="fab fa-gitlab"></i>
+        </a>
+    {% endif %}
+    {% if not nocontact %}
+        <a href="/contact" data-toggle="tooltip" title="Contact Me">
+            <i class="fas fa-envelope"></i>
+        </a>
+    {% endif %}
+</div>