Eclectic Media Git eclecticmedia.space / d4e0262
Merge branch 'about_us' Adds an about us section, and a jarallax splitter Ariana Giroux 2 months ago
11 changed file(s) with 110 addition(s) and 67 deletion(s). Raw diff Collapse all Expand all
00 from flask import Flask
11
2 from utilities.renderer import render, render_index, render_markdown
2 from utilities.renderer import render, render_markdown
33
44 app = Flask(__name__)
55
66
77 @app.route('/', methods=['GET'])
88 def index():
9 return render_index()
9 return render('index.jinja',
10 context={'about_us':
11 render_markdown('content/about-us.md')}
12 )
1013
1114
1215 @app.route('/open-source-difference')
0 # About Me
1
2 A Full Stack Web Developer, DJ, Audio Engineer, and community organizer, I'm one
3 of those crazies that thrives on being busy. Give me a coffee and some time to
4 lay out a plan of attack and I or a fellow entrepreneur can tackle any task!
5
6 Born and raised in Saskatchewan, I've always had to work with *creative*
7 solutions to achieve my tech-nerd dreams. Whether that was making my own
8 ethernet cables or trying to build my own guitar amp, I've always prided myself
9 on [making it work]. No problem is ever to much to tackle for me, and no hurdle
10 is above a good joke! Using the problem solving and logic flow skills only an
11 *Audio Engineering & Production* diploma can give you, I believe that any
12 project can be boiled down into a simple step by step process.
13
14 Let's face it, it's not impossible to go out there and find some website to in
15 turn build your website. Solutions like SquareSpace and Wix are seemingly
16 everywhere you look.
17
18 Here's the thing with site builders however:
19
20 <blockquote class="text-center"><strong>You'll never be able to have full control over your site.</strong></blockquote>
21
22 That's why I choose to use [open source], [self hosted], and hand crafted
23 websites! Using our tech stack, we can assure that:
24
25 - Your site will load faster,
26 - We can come closer to your vision,
27 - And most importantly, your site will always be within your control!
28
29
30 Why not give me a shout, we'll have a coffee and see if we can't figure out your
31 site!
32
33 <a href="#contact" class="btn btn-large btn-primary" style="width:100%">Get in touch!</a>
34
35
36 [making it work]: https://www.youtube.com/watch?v=fwwPmNWQfIY
37 [self hosted]: /why-we-self-host
38 [open source]: /open-source-difference
139139 @import 'scss/_top.scss';
140140 @import 'scss/_middle.scss';
141141 @import 'scss/_bottom.scss';
142 @import 'scss/_about_us.scss';
142143 // @import 'scss/_top.scss';
143144 // @import 'scss/_bottom_25.scss';
144145 // @import 'scss/_wide_info.scss';
0 #AboutUs {
1 margin: 0; padding: 0;
2 margin-top: 4em;
3 animation-duration: 3s;
4 animation-delay: 1s;
5 }
22 position: relative;
33 z-index: 0;
44 height: 32em;
5
6 .row { height: 100%; }
7
8 .col-6 {
9 background-color: $dark-grey-transparent;
10 }
11
12 h1, p {
13 position: relative;
14 color: white;
15 }
16
17 h1 {
18 top: 50%; left: 50%;
19 transform: translate(-50%, -50%);
20 }
21 p {
22 top: 60%; left: 60%;
23 transform: translate(-60%, -60%);
24 }
525 }
26
627 .jarallax > .jarallax-img {
728 position: absolute;
829 object-fit: cover;
1435 height: 100%;
1536 z-index: -1;
1637 }
17 .jarallax .bottom25-title {
18 background-color: $dark-grey-transparent;
19 box-shadow: 0 0 1em 2em $dark-grey-transparent;
20 }
21
22 .jarallax .jarallax-logo {
23 margin: 0;
24 background-color: $dark-grey-extra-transparent;
25 height: 100%;
26 .col-lg-8 { text-align: center; }
27 }
28
29 .jarallax .jarallax-logo-container {
30 background-color: $dark-grey-transparent;
31 @media only screen and (max-width: 767px) {
32 margin: 0 1em;
33 }
34 border-radius: 0.25em;
35 padding: 0.5em;
36 padding-bottom: 1.5em;
37
38 position: relative;
39 top: 50%;
40 transform: translateY(-50%);
41 img { width: 80%; }
42
43 div > p {
44 font-size: 2em; // MAKE RESPONSIVE!
45 color: $white;
46 }
47 button {
48 border-color: $white;
49 a { color: $white; }
50 font-size: 2em;
51 }
52 }
53 //
54 // .jarallax {
55 // .bottom25-title {
56 // background-color: $dark-grey-extra-transparent;
57 // }
58 // }
Binary diff not shown
0 <div id="AboutUs" class="row animated fadeIn">
1 <div class="col-3"></div>
2 <div class="col-6">
3 {{ body }}
4 </div>
5 <div class="col-3"></div>
6 </div>
0 <div id="Footer" class="animated fadeIn">
1 <p><a href="#">ABOUT US</a> | <a href="#">DEMOS</a> | <a href="#">RESUME</a></p>
0 <div id="Footer" class="animated fadeInUp">
1 <p><a href="#AboutUs">ABOUT US</a> | <a href="#">DEMOS</a> | <a href="#">RESUME</a></p>
22 <p>Site design by <a rel="me" href="https://keybase.io/arianagiroux">Ariana Giroux</a></p>
33 </div>
1111 {%- endwith %}
1212 {%- with %}
1313 {%- include 'widgets/cards.jinja' with context %}
14 {%- endwith %}
15 {%- with %}
16 {%- set body=about_us %}
17 {%- include 'aboutus.jinja' with context %}
18 {%- endwith %}
19 {%- with %}
20 {%- set title='Just a few of our recent projects!' %}
21 {%- set img_uri='/static/coffee-cup.jpg' %}
22 {%- set tag_line='Only the most recently worked on projects are shown' %}
23 {%- include 'widgets/jarallax.jinja' %}
1424 {%- endwith %}
1525 {%- with %}
1626 {%- set demos=[
0 <div data-jarallax data-speed="0.2" class="jarallax" style="height: 100%">
0 <div data-jarallax data-speed="0.2" class="jarallax" {% if full_size | length > 0 %}style="height: 100%"{% endif %}>
11 <img class="jarallax-img" src="{{ img_uri }}" alt="{{ img_alt }}">
2 {% if title | length > 0 %}
3 <span>
4 <h1>
5 {{ title | escape }}
6 </h1>
7 <p><a class="btn btn-outline-primary" href="#">{{ tag_line | escape }}</a></p>
8 </span>
9 {% endif %}
2 {% if title | length > 0 %}
3 <div class="row">
4 <div class="col-3"></div>
5 <div class="col-6 text-center">
6 <h1>
7 {{ title | escape }}
8 </h1>
9 {%- if tag_line | length > 0 %}
10 {%- if tag_button | length > 0 %}
11 <p><a class="btn btn-outline-primary" href="#">{{ tag_line | escape }}</a></p>
12 {% else %}
13 <p><em>{{ tag_line }}</em></p>
14 {% endif %}
15 {%- endif %}
16 </div>
17 <div class="col-3"></div>
18 </div>
19 {% endif %}
1020 </div>
44 from markdown import markdown
55
66 renderer = Renderer(search_dirs='templates', file_extension='stache')
7
8
9 def render_index(**kwargs):
10 """ For jinja """
11 file_loader = FileSystemLoader('templates')
12 env = Environment(loader=file_loader)
13 template = env.get_template('index.jinja')
14
15 # Define data dictionaries
16 output = template.render(**kwargs)
17
18 return output
197
208
219 def render(path, context={}, **kwargs):