Various Changes

- Implemented contact-me form
- Added social icons using font-awesome
- Changed font
- Added favicon
- Changed site logo from png to svg
This commit is contained in:
JayWll 2020-05-18 11:49:56 -06:00
parent e4d86628aa
commit cc791c8e20
11 changed files with 241 additions and 15 deletions

View File

@ -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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 976 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

@ -0,0 +1,3 @@
$(() => {
$('[data-toggle="tooltip"]').tooltip()
});

View File

@ -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/popper.js@1.16.0/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>

View File

@ -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[] = "j@son-williams.ca"
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>

View File

@ -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>

View File

@ -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>

View File

@ -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>