Switch to using Hugo. #8
|
|
@ -1,4 +0,0 @@
|
|||
.git
|
||||
.gitignore
|
||||
Dockerfile*
|
||||
README.md
|
||||
|
|
@ -1,14 +1,8 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
package-lock.json
|
||||
|
||||
node_modules/
|
||||
dist
|
||||
public
|
||||
|
||||
# IDE
|
||||
.idea
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
# Using the current version of Node and Alpine
|
||||
FROM node:current-alpine
|
||||
|
||||
# This should be mounted with docker run command
|
||||
WORKDIR /src
|
||||
|
||||
# Install deps and run the development server
|
||||
ENV PATH="/node_modules/.bin:${PATH}"
|
||||
ENTRYPOINT cd /src && yarn --modules-folder /node_modules install && yarn --modules-folder /node_modules dev
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
# STEP 1: Build the website's files
|
||||
FROM node:current-alpine AS build-website
|
||||
|
||||
WORKDIR /src
|
||||
|
||||
COPY . /src/
|
||||
|
||||
RUN cd /src && yarn && yarn build
|
||||
|
||||
# STEP 2: Get a binary for the static-web-server
|
||||
FROM golang:alpine AS build-webserver
|
||||
|
||||
RUN apk update && apk upgrade && \
|
||||
apk add --no-cache git
|
||||
|
||||
RUN go get -u git.simplesystems.tech/SimpleSystems/static-web-server
|
||||
|
||||
# STEP 3: Combine static files and binary on fresh alpine image
|
||||
FROM alpine:latest
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy over static website files
|
||||
COPY --from=build-website /src/dist /app/dist
|
||||
|
||||
# Copy over static-web-server
|
||||
COPY --from=build-webserver /go/bin/static-web-server /app/
|
||||
|
||||
ENTRYPOINT ["./static-web-server", "-rootDir", "dist", "-port", "80", "-spa"]
|
||||
55
README.md
55
README.md
|
|
@ -1,55 +1,26 @@
|
|||
# Simple Systems Website
|
||||
|
||||
Built using [Hugo](https://gohugo.io/getting-started/installing/)
|
||||
|
||||
## Local development
|
||||
Build image
|
||||
```shell script
|
||||
docker build -f Dockerfile.dev -t website-fe .
|
||||
```
|
||||
hugo server
|
||||
```
|
||||
|
||||
Run the container using the current directory for the source files
|
||||
```shell script
|
||||
docker run -it -p 8080:8080 --mount source=$(pwd),target=/src,type=bind --rm website-fe
|
||||
## Production
|
||||
To build the production site, run the following command:
|
||||
```
|
||||
hugo --minify
|
||||
```
|
||||
|
||||
## Building (non docker)
|
||||
|
||||
To create a production build, run:
|
||||
```shell script
|
||||
yarn
|
||||
yarn build
|
||||
```
|
||||
|
||||
The static resources will be stored in the `./dist` directory.
|
||||
|
||||
## Production Docker build and run
|
||||
To build the production site in a docker container, run the following command:
|
||||
```shell script
|
||||
docker build -f Dockerfile.prod -t website-rel .
|
||||
```
|
||||
|
||||
To run the production container, run the following command:
|
||||
```shell script
|
||||
docker run --rm -it -p 8080:8080 website-rel
|
||||
```
|
||||
The resources will be stored in the `./public` directory.
|
||||
|
||||
## Managing Job Posts
|
||||
|
||||
To add a job post:
|
||||
1. Place the markdown file in `./src/job-posts`.
|
||||
2. Add the file name (excluding the extension) as an entry `./src/assets/jobKeys.js`.
|
||||
These entries determine the display order.
|
||||
|
||||
To remove a job post:
|
||||
1. Remove the markdown file from `./src/job-posts`.
|
||||
2. Remove the entry from the data in `./src/assets/jobKeys.js`.
|
||||
* To add a job post, create the markdown file in `content/jobs`.
|
||||
* To remove a job post, remove its markdown file from `content/jobs`.
|
||||
|
||||
## Managing Blog Posts
|
||||
|
||||
To add a blog post:
|
||||
1. Place the markdown file in `./src/blog-posts`.
|
||||
2. Add the file name (excluding the extension) as an entry `./src/assets/blogKeys.js`.
|
||||
These entries determine the display order.
|
||||
|
||||
To remove a blog post:
|
||||
1. Remove the markdown file from `./src/blog-posts`.
|
||||
2. Remove the entry from the data in `./src/assets/blogKeys.js`.
|
||||
* To add a blog post, create the markdown file in `content/blog`.
|
||||
* To remove a blog post, remove its markdown file from `content/blog`.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
languageCode = "en-us"
|
||||
title = "SimpleSystems, LLC"
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe= true
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
image: /img/monero.png
|
||||
title: Simple Systems Accepts Cryptocurrency
|
||||
img: /img/monero.png
|
||||
title: Monero
|
||||
author: Jeff Russo
|
||||
published: Dec 1, 2019
|
||||
pdate: Dec 1, 2019
|
||||
desc: This is why we accept crypto
|
||||
---
|
||||
|
||||
|
|
@ -11,11 +11,11 @@ Simple Systems will accept payment in
|
|||
[Bitcoin](https://bitcoin.org/), or
|
||||
[Litecoin](https://litecoin.org/).
|
||||
|
||||
### What is cryptocurrency?
|
||||
## What is cryptocurrency?
|
||||
Cryptocurrency is a medium of exchange that uses cryptography to ensure the key [properties](https://en.wikipedia.org/wiki/Money#Properties) of money are fulfilled.
|
||||
It is decentralized, meaning no single entity controls it; all the regulations come from cryptography and consensus.
|
||||
|
||||
### Centralized fiat currencies
|
||||
## Centralized fiat currencies
|
||||
Today, governments across the world maintain different fiat currencies.
|
||||
Fiat has some advantages over its predecessor, precious metals.
|
||||
The government can control the supply, stabilizing the value.
|
||||
|
|
@ -29,14 +29,17 @@ Here are a few examples of this happening:
|
|||
* <a href="https://www.theguardian.com/money/2016/may/14/zimbabwe-trillion-dollar-note-hyerinflation-investment" target="_blank">Z$100 trillion loaves of bread in Zimbabwe</a>
|
||||
* <a href="https://en.wikipedia.org/wiki/Hyperinflation_in_the_Weimar_Republic" target="_blank">German Papiermark</a>: The currency was inflated to the point of people getting paid in wheelbarrows of cash.
|
||||
|
||||
|
||||
<p class="no-indent">
|
||||
<img alt="Wheelbarrow of Cash" src="/img/hyperinflation_wheelbarrow.jpg">
|
||||
</p>
|
||||
|
||||
* <a href="https://fee.org/articles/venezuela-cant-afford-to-print-more-money/" target="_blank">Venezuela could not afford to print money</a>
|
||||
* <a href="https://www.youtube.com/watch?v=dwZ6B5kalbQ" target="_blank">This video</a> shows some recent history of inflation rates.
|
||||
|
||||
The US Dollar is relatively strong, but its value has still been inflated away since its inception.
|
||||
If you saved a dollar in 1913, it only has about 4 cents worth of buying power now.
|
||||
|
||||
### Bitcoin - A Major Breakthrough
|
||||
## Bitcoin - A Major Breakthrough
|
||||
[Bitcoin](https://bitcoin.org/bitcoin.pdf) was a major breakthrough in both computing and money.
|
||||
It's Proof of Work consensus algorithm is the backbone of most cryptocurrencies.
|
||||
This method enables entities from around the world to agree on something.
|
||||
|
|
@ -54,7 +57,7 @@ Organizations can refuse to do business with certain tainted bitcoin addresses.
|
|||
By analogy, if you find a $10 bill on the ground and pick it up, should you be tied to its history?
|
||||
If that $10 was in a bank robbery last year, should it be deemed to have less than $10 in value?
|
||||
|
||||
### Monero - Fungible
|
||||
## Monero - Fungible
|
||||
[Monero](https://web.getmonero.org/) is cryptocurrency which was released a few years after Bitcoin.
|
||||
It is [fungible](https://web.getmonero.org/resources/moneropedia/fungibility.html) unlike Bitcoin, meaning each unit of currency is of equal value as the others.
|
||||
This is achieved by keeping the ledger private.
|
||||
|
|
@ -65,7 +68,7 @@ Monero is private by default, but has the ability to reveal transactions at your
|
|||
In the case of a business, it may be required to show the "books".
|
||||
This is simple with a view key that can be used to show incoming transactions.
|
||||
|
||||
### Be your own bank
|
||||
## Be your own bank
|
||||
One of the advantages to using cryptocurrency is that you are your own bank.
|
||||
As long as you hold your private keys, your funds are safe.
|
||||
With today's computing power, you will be long gone before [your key is guessed](https://bitcoin.stackexchange.com/questions/2847/how-long-would-it-take-a-large-computer-to-crack-a-private-key).
|
||||
|
|
@ -75,7 +78,7 @@ When you are your own bank, there is no middle man, and it is your responsibilit
|
|||
As mentioned earlier, the Bitcoin network has not gone down in over a decade. Monero has a similar track record.
|
||||
This 24/7 availability gives you 24/7 access.
|
||||
|
||||
### Conclusion
|
||||
## Conclusion
|
||||
I think cryptocurrencies are the future of money.
|
||||
They are superior to fiat in so many ways.
|
||||
There are almost no barriers to entry; Essentially anyone with internet access can use crypto.
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
image: /favicon.ico
|
||||
title: Simplicity
|
||||
img: /img/settings.png
|
||||
title: "Simplicity"
|
||||
author: Jeff Russo
|
||||
published: Dec 7, 2019
|
||||
pdate: Dec 7, 2019
|
||||
desc: What is a simple system?
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"projects": [
|
||||
{
|
||||
"title": "SBA Ponderay",
|
||||
"img": "https://sbaponderay.com/img/sba-ponderay.png",
|
||||
"desc": "SBA Ponderay is a Jiu Jitsu gym in Ponderay, ID. It specializes in the Progressive System of Brazilian Jiu Jitsu. Simple Systems' owner trains there several times a week.",
|
||||
"href": "https://sbaponderay.com/"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"services": [
|
||||
{
|
||||
"title": "Software",
|
||||
"img": "/img/monitor.png",
|
||||
"desc": [
|
||||
"We are passionate about creating software to solve problems. We have experience in a broad range of software environments including web, database, machine automation, and backend services.",
|
||||
"Simple Systems can consult with you on a comprehensive solution that fits your business needs. Our process is flexible and will be tuned to the problem we're solving. Once the system is complete, we can deliver it, or manage it for you."
|
||||
],
|
||||
"links": [
|
||||
{ "text": "Our Projects", "href": "https://git.simplesystems.tech/SimpleSystems" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Websites",
|
||||
"img": "/img/website.png",
|
||||
"desc": [
|
||||
"Every business needs a web presence. It is one of the most effective ways to drive customers to your business.",
|
||||
"It can be a deterrent if it is not high quality though! Over half of users will abandon your site if it does not load in under 3 seconds. It is crucial that the website displays quickly and looks good.",
|
||||
"Simple Systems can improve your prospective clients' experience by building a website from scratch, or cleaning up the existing one. We can handle all the hosting for you too!"
|
||||
],
|
||||
"links": [
|
||||
{ "text": "Our Portfolio", "href": "/portfolio/" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Data Management",
|
||||
"img": "/img/database.png",
|
||||
"desc": [
|
||||
"The manner in which you store your data will affect business performance. If it is unorganized, accessing it can be slow. This can impair future upgrades and additions to your application. Make sure your data is organized and, most importantly, secured.",
|
||||
"Storage systems are evolving all the time, and moving to a new one may save a lot of money. Data migrations are tricky, and can lose data if done incorrectly. It is important to have a documented process and verification everything worked.",
|
||||
"Simple Systems can pick the right type of database for your needs, design it, and deploy it. After it is deployed and tested, we can maintain it as your data needs change. We can also work with you to increase the performance of your current solution, or migrate it to something better."
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Engineering Discipline",
|
||||
"img": "/img/checklist.png",
|
||||
"desc": [
|
||||
"Sometimes it is important to move fast and get features done quickly. This mode of operation will build technical debt that must eventually be paid. Code will become fragile and unmanageable. The epitome of this development pace is rewriting a project from scratch because it has become cheaper to do so than maintain.",
|
||||
"Disciplined engineers do not let this happen. They are patient, calculating, and write code deliberately. This will allow features to be released faster in the future.",
|
||||
"Simple Systems can help guide your team on these practices. We have the experience of small startups all the way to fortune 50 companies."
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
[
|
||||
{
|
||||
"title": "Comprehensible Interaction",
|
||||
"img": "/img/interact.png",
|
||||
"desc": "The interface to software should be clear, without surprises. Engineers working on the project should not be deciphering code. Documentation is implied as part of the system, enabling all users to understand the software package better."
|
||||
},
|
||||
{
|
||||
"title": "Straightforward Modification",
|
||||
"img": "/img/tools.png",
|
||||
"desc": "Software should handle changes smoothly. Great software feels like it was designed for future changes. The documentation will instruct an engineer's strategy, removing ambiguity of how something works."
|
||||
},
|
||||
{
|
||||
"title": "Robust",
|
||||
"img": "/img/robust.png",
|
||||
"desc": "Load spikes, accidental misuse, and business growth should not bring software crashing to the ground. Systems should be designed to handle faults gracefully. If there are errors, they should be reported clearly."
|
||||
},
|
||||
{
|
||||
"title": "Leveraged by Other Systems",
|
||||
"img": "/img/leverage.png",
|
||||
"desc": "When software simply does its job, and does it well, it will be an asset to other systems. When software becomes convoluted, it will hinder other systems."
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<link rel="stylesheet" href="/icons.css">
|
||||
<link rel="stylesheet" href="/simplesystems.css">
|
||||
<link rel="stylesheet" href="/light-theme.css">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
|
||||
<title>{{ block "title" . }}
|
||||
{{ .Site.Title }}
|
||||
{{ end }}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{ partial "navbar/site-navbar.html" . }}
|
||||
|
||||
<main>
|
||||
{{ block "main" . }}
|
||||
<!-- The part of the page that begins to differ between templates -->
|
||||
{{ end }}
|
||||
</main>
|
||||
|
||||
{{ partial "footer/site-footer.html" . }}
|
||||
{{ partial "scripts/scripts.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{{ range .Pages }}
|
||||
<div class="col xs-12 md-6">
|
||||
<a href="{{ .Permalink }}">
|
||||
<div class="card">
|
||||
<div class="card-title align-center">
|
||||
<img src="{{ .Params.image }}" width="48" height="48" class="mr-4">
|
||||
{{ .Title }}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="card-text">
|
||||
{{ .Params.desc }} ...
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{{ define "main" }}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col article">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{{ define "main" }}
|
||||
<div class="blog container">
|
||||
<div class="row align-center">
|
||||
<div class="col shrink">
|
||||
<img src="{{ .Params.img }}" width="88" height="88">
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h1>{{ .Params.title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-center">
|
||||
<div class="col xs-12 mt-4">
|
||||
by <a href="/about">{{ .Params.author }}</a>
|
||||
<span style="margin: 0 1rem">|</span>
|
||||
{{ .Params.pdate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col xs-12 mt-4">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="article">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "jumbotron.html" . }}
|
||||
{{ partial "simple-software.html" . }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<div class="card">
|
||||
<div class="card-title align-center">
|
||||
<img src="{{ .img }}" width="48" height="48" class="mr-4">
|
||||
{{ .title }}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="card-text">
|
||||
{{ .desc }} ...
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<div class="card pa-4">
|
||||
<div class="text-center">
|
||||
<img src="{{ .img }}" width="100" height="100" class="mr-4" style="margin: auto;">
|
||||
</div>
|
||||
|
||||
<div class="title text-center">
|
||||
<h3>{{ .title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="article">
|
||||
<p>{{ .desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<div class="card">
|
||||
<div class="card-title align-center">
|
||||
<i class="material-icons mr-4">{{ .icon }} </i>
|
||||
{{ .title }}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="card-text">
|
||||
{{ .desc }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="card">
|
||||
<div class="card-title align-center">
|
||||
<img src="{{ .img }}" width="48" height="48" class="mr-4">
|
||||
{{ .title }}
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<a class="px-0" href="{{ .href }}" target="_blank" style="font-size: 1.1rem">
|
||||
Visit Site
|
||||
<i class="material-icons sm ml-1">launch</i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="card-text">
|
||||
{{ .desc }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="card flex-column">
|
||||
<div class="card-title align-center">
|
||||
<img src="{{ .img }}" width="48" height="48" class="mr-4">
|
||||
{{ .title }}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="card-text" style="flex: 1 0 auto;">
|
||||
{{ range .desc }}
|
||||
<p> {{ . }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
{{ range .links }}
|
||||
<div class="pb-4 pr-4">
|
||||
<a href="{{ .href }}">{{ .text }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="footer">
|
||||
<div class="container">
|
||||
<div class="row justify-center">
|
||||
<div class="col xs-12 md-6" style="max-width: 500px;">
|
||||
<a href="mailto:info@simplesystems.tech">
|
||||
<div class="card blue pa-4 text-center contact">
|
||||
<h2 style="margin: 0; margin-bottom: 1.5rem;">Contact Us</h2>
|
||||
|
||||
<div class="d-flex align-center justify-center">
|
||||
<i class="material-icons mr-4">mail_outline</i>
|
||||
info@simplesystems.tech
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<div class="jtron">
|
||||
<div class="container">
|
||||
<div class="row align-center">
|
||||
<div class="col xs-12 md-4 lg-6 text-center">
|
||||
<div class="text-center d-inline-block jtron-left">
|
||||
<div class="hide-sm-and-down">
|
||||
<h1>Simple</h1>
|
||||
<h1>Systems</h1>
|
||||
<h3>LLC</h3>
|
||||
</div>
|
||||
|
||||
<div class="hide-md-and-up">
|
||||
<h2>Simple Systems, LLC</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col xs-12 md-8 lg-6 text-left pa-4">
|
||||
<div class="jtron-right">
|
||||
<div>
|
||||
<i class="material-icons xl">business</i>
|
||||
|
||||
<div class="mt-4">We build software that businesses understand and engineers want to use.</div>
|
||||
|
||||
<a class="btn lg blue mt-8" href="mailto:info@simplesystems.tech">
|
||||
<i class="material-icons mr-4">mail_outline</i>
|
||||
<span class="mr-4 hide-sm-and-down">Email Us:</span>
|
||||
info@simplesystems.tech
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<div id="nav" class="navbar">
|
||||
<button id="thToggle" class="flat round" onclick="toggleTheme()">Toggle</button>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<!--
|
||||
<a href="/" class="navbar-title">
|
||||
SimpleSystems
|
||||
</a>
|
||||
-->
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<div class="navbar-items hide-sm-and-down">
|
||||
<a href="/">Home</a>
|
||||
<a href="/services/">Services</a>
|
||||
<a href="/about/">About</a>
|
||||
<a href="/blog/">Blog</a>
|
||||
<a href="/jobs/">Jobs</a>
|
||||
</div>
|
||||
|
||||
<button class="flat hide-md-and-up" onclick="openNavDrawer()">
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="navDrawer" class="drawer">
|
||||
<div class="navbar">
|
||||
<div class="spacer"></div>
|
||||
|
||||
<button class="flat" onclick="closeNavDrawer()">
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="drawer-items">
|
||||
<a href="/">Home</a>
|
||||
<a href="/services/">Services</a>
|
||||
<a href="/about/">About</a>
|
||||
<a href="/blog/">Blog</a>
|
||||
<a href="/jobs/">Jobs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navDrawerOverlay" class="overlay d-none" onclick="closeNavDrawer()"></div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<script>
|
||||
function openNavDrawer() {
|
||||
navDrawerOverlay.classList.toggle('d-none')
|
||||
navDrawer.style.transform = 'translate(0)'
|
||||
}
|
||||
|
||||
function closeNavDrawer() {
|
||||
navDrawerOverlay.classList.toggle('d-none')
|
||||
navDrawer.style.transform = 'translate(100%)'
|
||||
}
|
||||
|
||||
function currentTheme() {
|
||||
var _isDark = JSON.parse(localStorage.getItem('themeIsDark'))
|
||||
return _isDark
|
||||
}
|
||||
|
||||
function storeTheme(_isDark) {
|
||||
localStorage.setItem('themeIsDark', _isDark)
|
||||
}
|
||||
|
||||
function setThemeTo(_isDark) {
|
||||
var elems = [
|
||||
...document.body.getElementsByTagName("*"),
|
||||
document.body,
|
||||
]
|
||||
|
||||
elems.forEach(el => {
|
||||
if (_isDark) {
|
||||
el.classList.remove('light')
|
||||
el.classList.add('dark')
|
||||
} else {
|
||||
el.classList.remove('dark')
|
||||
el.classList.add('light')
|
||||
}
|
||||
})
|
||||
|
||||
initToggle(_isDark)
|
||||
storeTheme(_isDark)
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
var th = currentTheme()
|
||||
if (th === null) {
|
||||
th = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
}
|
||||
setThemeTo(!th)
|
||||
}
|
||||
|
||||
function initToggle(_isDark) {
|
||||
if (_isDark) {
|
||||
thToggle.innerHTML = '<i class="material-icons">wb_sunny</i>'
|
||||
} else {
|
||||
thToggle.innerHTML = '<i class="material-icons">brightness_2</i>'
|
||||
}
|
||||
}
|
||||
|
||||
(function() {
|
||||
var th = currentTheme()
|
||||
if (th === null) {
|
||||
initToggle(window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
return
|
||||
}
|
||||
setThemeTo(th)
|
||||
initToggle(th)
|
||||
})()
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col xs-12">
|
||||
<h2>Software Should be Simple</h2>
|
||||
<hr width="75%" class="mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
{{ range $.Site.Data.home.ssattrs }}
|
||||
<div class="col xs-12 sm-10 md-6">
|
||||
{{ partial "cards/home-card.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
{{ define "main" }}
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col xs-12">
|
||||
<p class="headline">Our mission is to deliver simple solutions for complex problems.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
<div class="col">
|
||||
<div class="card text-center">
|
||||
<div class="row align-center">
|
||||
<div class="col xs-12 sm-content">
|
||||
<img src="/img/rocket.png" width="150" height="150">
|
||||
</div>
|
||||
|
||||
<div class="col xs-12 sm-grow">
|
||||
<p class="mb-0">“Any darn fool can make something complex;<br>It takes a genius to make something simple.”</p>
|
||||
<br>
|
||||
<p class="ml-5">-- Albert Einstein</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col xs-12">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="col xs-12">
|
||||
<h1>The Team</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
<div class="col xs-12 sm-10">
|
||||
<div class="card">
|
||||
<div class="row align-center">
|
||||
<div class="col xs-12 md-3 text-center">
|
||||
<img src="/img/jeff-snow.jpg" width="256">
|
||||
</div>
|
||||
|
||||
<div class="col xs-12 md-9">
|
||||
<h2>Jeff</h2>
|
||||
<div class="article">
|
||||
<p>My name is Jeff Russo. I am the founder of Simple Systems, LLC. I've been a software engineer for about a decade, and I'm still passionate about it!</p>
|
||||
<p>I've worked at several companies in my career. Some were three man startup teams, and some were fortune 50 enterprises. At each job, I learned many things, and now I can apply that knowledge to my own company! I pursue excellence in all that I do, and this adventure will be no different.</p>
|
||||
<p>The biggest thing I saw at all levels of business was unnecessary complexity. It demoralizes teams and can bring your software to a crashing halt. My mission is to deliver software that is simple, to both the business, and the engineers that have to use it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col xs-12">
|
||||
<h1>Blog</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
{{ range .Pages }}
|
||||
<div class="col xs-12 sm-9 md-6">
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ partial "cards/app-card.html" .Params }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col xs-12">
|
||||
<h1>Jobs</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{{ range .Pages }}
|
||||
<div class="col xs-12 sm-6">
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ partial "cards/job.html" .Params }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{{ define "main" }}
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col xs-12">
|
||||
<h1>Our Portfolio</h1>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{{ range .Params.projects }}
|
||||
<div class="col xs-12 sm-10 md-6">
|
||||
{{ partial "cards/portfolio-card.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{{ define "main" }}
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col xs-12">
|
||||
<h1>What We Do</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-center">
|
||||
{{ range .Params.services }}
|
||||
<div class="col xs-12 sm-10 md-6">
|
||||
{{ partial "cards/services-card.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
25
package.json
25
package.json
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"name": "SimpleSystems",
|
||||
"version": "0.1.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-service": "^3.11.0",
|
||||
"deepmerge": "^4.1.1",
|
||||
"fibers": "^4.0.1",
|
||||
"frontmatter-markdown-loader": "^3.1.0",
|
||||
"material-design-icons-iconfont": "^5.0.1",
|
||||
"sass": "^1.23.0",
|
||||
"sass-loader": "7.3.1",
|
||||
"vue-cli-plugin-vuetify": "^1.1.1",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.1.3",
|
||||
"vuetify": "^2.1.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
|
||||
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
|
||||
<title>SimpleSystems, LLC</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
124
src/App.vue
124
src/App.vue
|
|
@ -1,124 +0,0 @@
|
|||
<template>
|
||||
<v-app id="inspire">
|
||||
<v-app-bar dark fixed app>
|
||||
<!-- Light / dark Vuetify theme toggle -->
|
||||
<v-btn
|
||||
icon
|
||||
@click="$vuetify.theme.dark = !$vuetify.theme.dark"
|
||||
>
|
||||
<v-icon v-text="($vuetify.theme.dark) ? 'wb_sunny' : 'brightness_2'" />
|
||||
</v-btn>
|
||||
|
||||
<v-spacer/>
|
||||
|
||||
<router-link to="/">
|
||||
<div class="white--text">
|
||||
Simple Systems, LLC
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<v-spacer/>
|
||||
<v-btn icon @click="drawer = true">
|
||||
<v-icon>menu</v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
height="auto"
|
||||
app
|
||||
fixed
|
||||
right
|
||||
temporary
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item @click="drawer = false">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Close</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-icon>close</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item v-for="link in validNav" :key="link.title" :to="link.to" :href="link.href" :target="('href' in link) ? '_blank' : ''">
|
||||
<v-list-item-action>
|
||||
<v-icon>{{ link.icon }}</v-icon>
|
||||
</v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ link.title }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-content>
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
|
||||
<app-footer />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppFooter from '@/components/AppFooter.vue'
|
||||
|
||||
export default {
|
||||
components: { AppFooter },
|
||||
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
navLinks: [
|
||||
{ title: 'Home', icon: 'home', to: '/' },
|
||||
{ title: 'Services', icon: 'work', to: '/services' },
|
||||
// { title: 'Our Process', icon: 'build', to: '/process' },
|
||||
// { title: 'Influences', icon: 'build', to: '/influences' },
|
||||
{ title: 'About', icon: 'info', to: '/about' },
|
||||
{ title: 'Blog', icon: 'description', to: '/blog' },
|
||||
{ title: 'Jobs', icon: 'dns', to: '/jobs' },
|
||||
{ title: 'Our Projects', icon: 'code', href: 'https://git.simplesystems.tech/SimpleSystems' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
validNav() {
|
||||
return this.navLinks.filter(l => l.to !== this.$route.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
* {
|
||||
letter-spacing: 0 !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
hr {
|
||||
color: white;
|
||||
}
|
||||
h2, h3, h4 {
|
||||
margin-top: 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.article h3 ~ p {
|
||||
margin-left: 1rem;
|
||||
text-indent: 20pt;
|
||||
}
|
||||
.v-card__title {
|
||||
word-break: normal;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.v-btn::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export default [
|
||||
'cryptocurrency',
|
||||
'simplicity',
|
||||
]
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import blogKeys from '@/assets/blogKeys'
|
||||
|
||||
export default blogKeys.map(blogKey => {
|
||||
return {
|
||||
key: blogKey,
|
||||
module: require('@/blog-posts/' + blogKey + '.md'),
|
||||
}
|
||||
})
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default [
|
||||
'front-end-engineer',
|
||||
]
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="12" md="11" lg="10" xl="8">
|
||||
<slot/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<v-footer height="auto" color="#333">
|
||||
<v-container>
|
||||
<v-row class="text-center align-center justify-center">
|
||||
<v-col cols="12" sm="11" md="4" lg="4" xl="4">
|
||||
<contact />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Contact from '@/components/Contact'
|
||||
|
||||
export default {
|
||||
components: { Contact }
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<v-card dark :color="$vuetify.theme.dark ? 'blue darken-4' : 'blue'">
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-card-title class="headline justify-center">
|
||||
Contact Us
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text style="cursor: pointer;" v-on="on" @click="copyEmail">
|
||||
<v-icon>mail_outline</v-icon>
|
||||
{{ email }}
|
||||
</v-card-text>
|
||||
</template>
|
||||
|
||||
<span v-show="!emailCopied">Click to copy!</span>
|
||||
<span v-show="emailCopied">Copied to clipboard!</span>
|
||||
</v-tooltip>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
email: 'info@simplesystems.tech',
|
||||
emailCopied: false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
copyEmail() {
|
||||
navigator.clipboard.writeText(this.email).then(() => {
|
||||
this.emailCopied = true
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
17
src/main.js
17
src/main.js
|
|
@ -1,17 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
import router from './plugins/vue-router'
|
||||
import vuetify from './plugins/vuetify'
|
||||
|
||||
import AppContainer from '@/components/AppContainer'
|
||||
|
||||
Vue.component('app-container', AppContainer)
|
||||
|
||||
import App from './App'
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
router,
|
||||
vuetify,
|
||||
})
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<app-container>
|
||||
<v-row class="text-center pt-12">
|
||||
<v-col cols="12" class="pt-12">
|
||||
<v-icon size="175" color="light-blue">help</v-icon>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="pt-12">
|
||||
<h1 class="display-1 mb-6">Oops...</h1>
|
||||
|
||||
<p>The page you requested doesn't exist.</p>
|
||||
<p>Please start again from the <router-link to="/">Home Page</router-link> and let us know if this happens again.</p>
|
||||
|
||||
<v-btn dark large color="light-blue" class="mt-12" to="/">
|
||||
Go to Home Page
|
||||
<v-icon right>arrow_forward</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</app-container>
|
||||
</template>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<template>
|
||||
<app-container>
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-center">
|
||||
<p class="headline">Our mission is to deliver simple solutions for complex problems.</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="12" lg="8">
|
||||
<v-card dark>
|
||||
<v-card-text class="about-quote">
|
||||
<v-row class="align-center">
|
||||
<v-col cols="auto">
|
||||
<img src="/img/rocket-512.png" width="150">
|
||||
</v-col>
|
||||
<v-col class="text-center">
|
||||
<p class="mb-0">“Any darn fool can make something complex;<br>It takes a genius to make something simple.”</p>
|
||||
<br>
|
||||
<p class="ml-5">-- Albert Einstein</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-divider/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="12" class="text-center">
|
||||
<h1 class="display-1">The Team</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" lg="9">
|
||||
<v-card>
|
||||
<v-container>
|
||||
<v-row class="align-center">
|
||||
<v-col cols="12" md="3" class="text-center">
|
||||
<img src="/img/jeff-snow.jpg" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="9">
|
||||
<h1>Jeff</h1>
|
||||
<p class="person_desc">My name is Jeff Russo. I am the founder of Simple Systems, LLC. I've been a software engineer for about a decade, and I'm still passionate about it!</p>
|
||||
<p class="person_desc">I've worked at several companies in my career. Some were three man startup teams, and some were fortune 50 enterprises. At each job, I learned many things, and now I can apply that knowledge to my own company! I pursue excellence in all that I do, and this adventure will be no different.</p>
|
||||
<p class="person_desc">The biggest thing I saw at all levels of business was unnecessary complexity. It demoralizes teams and can bring your software to a crashing halt. My mission is to deliver software that is simple, to both the business, and the engineers that have to use it.</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</app-container>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.about-quote, .person_desc {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.person_desc {
|
||||
text-indent: 2.0em;
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<template>
|
||||
<app-container>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="auto" class="d-flex">
|
||||
<h1 class="display-2">Blog</h1>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-btn
|
||||
v-if="$vuetify.breakpoint.xsOnly"
|
||||
dark fab small
|
||||
color="light-blue lighten-1"
|
||||
@click="toggleMobileSearch"
|
||||
class="elevation-2"
|
||||
>
|
||||
<v-icon>search</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="12" sm="auto">
|
||||
<v-text-field
|
||||
v-if="$vuetify.breakpoint.smAndUp"
|
||||
v-model="searchText"
|
||||
label="Search"
|
||||
outlined
|
||||
append-icon="search"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-expand-transition>
|
||||
<v-row v-show="$vuetify.breakpoint.xsOnly && showMobileSearch">
|
||||
<v-col class="pt-0">
|
||||
<v-text-field v-model="searchText" placeholder="Search" ref="mobileSearchField" single-line outlined />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-row class="justify-center">
|
||||
<v-col v-for="(blogPost, i) in filteredPosts" :key="i" cols="12" sm="10" md="6" lg="5">
|
||||
<router-link :to="'/blog/post/' + blogPost.key">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-row class="align-center">
|
||||
<v-col cols="auto" class="mr-3"><img v-if="blogPost.image" :src="blogPost.image" width="64" height="64"></v-col>
|
||||
<v-col class="title">{{ blogPost.title }}</v-col>
|
||||
</v-row>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text>{{ blogPost.desc }}...</v-card-text>
|
||||
</v-card>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</app-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import blogPosts from '@/assets/blogPosts'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
posts: blogPosts.map(bPost => {
|
||||
return {
|
||||
key: bPost.key,
|
||||
...bPost.module.attributes,
|
||||
}
|
||||
}),
|
||||
showMobileSearch: false,
|
||||
searchText: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredPosts() {
|
||||
return this.posts.filter(post => {
|
||||
return this.searchText === '' || post.title.toLowerCase().includes(this.searchText.toLowerCase()) || post.desc.toLowerCase().includes(this.searchText.toLowerCase())
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleMobileSearch() {
|
||||
this.showMobileSearch = !this.showMobileSearch
|
||||
this.$nextTick(() => this.$refs.mobileSearchField.focus())
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<v-container style="max-width: 800px">
|
||||
<v-row>
|
||||
<v-col class="article">
|
||||
<div class="d-flex align-center mt-6">
|
||||
<img v-if="image" :src="image" width="88" height="88" class="mr-6">
|
||||
<h1 class="headline">{{ title }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grey--text text--darken-1">
|
||||
by <router-link to="/about">{{ author }}</router-link>
|
||||
<span class="mx-2 headline font-weight-thin grey--text text--lighten-2">|</span>
|
||||
{{ published }}
|
||||
</div>
|
||||
|
||||
<v-divider class="my-6" />
|
||||
|
||||
<component :is="cmpnt" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
cmpnt: Object,
|
||||
attrs: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
...this.attrs,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<v-container class="jumbotron" :style="jumbotronStyling" fluid>
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="12" lg="10" xl="7">
|
||||
<v-row class="align-center justify-center jumbotron-content">
|
||||
<v-col v-show="$vuetify.breakpoint.lgAndUp" lg="6" class="heading text-center">
|
||||
<span class="display-3">Simple</span><br class="mb-8">
|
||||
<span class="display-3">Systems</span>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="9" md="7" lg="6" class="text-center">
|
||||
<v-card class="pa-2" dark>
|
||||
<v-card-text>
|
||||
<v-icon large>business</v-icon>
|
||||
<p class="mb-0 headline">We build software that businesses understand and engineers want to use.</p>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider class="mb-3 mx-auto" style="width: 75%;"></v-divider>
|
||||
|
||||
<v-btn :color="$vuetify.theme.dark ? 'blue darken-4' : 'blue'" href="mailto:info@simplesystems.tech" target="_blank">
|
||||
<v-icon color="white" class="mr-2" left size="24">mail_outline</v-icon>
|
||||
Email us: info@simplesystems.tech
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<app-container class="text-center">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="desc">Software Should be Simple</h1>
|
||||
<v-divider class="mt-3 mx-auto" width="50%"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="justify-center">
|
||||
<v-col v-for="item in ssAttrs" :key="item.icon" cols="12" sm="8" md="6">
|
||||
<v-card class="simpleAttr py-3" height="100%">
|
||||
<img :src="item.icon" height="100" width="100" class="mt-3 mx-auto"/>
|
||||
|
||||
<v-card-title class="justify-center font-weight-bold">
|
||||
{{ item.headline }}
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="attr_desc">
|
||||
{{ item.desc }}
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</app-container>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ssAttrs: [
|
||||
{
|
||||
headline: 'Comprehensible Interaction',
|
||||
icon: '/img/interact.png',
|
||||
desc: 'The interface to software should be clear without surprises. Engineers working on the project should not be deciphering other engineers\' code. Documentation is implied as part of the system, enabling all users to understand the software package better.'
|
||||
},
|
||||
{
|
||||
headline: 'Straightforward Modification',
|
||||
icon: '/img/tools.png',
|
||||
desc: 'Software should handle changes smoothly. Great software feels like it was designed for future changes. The documentation will instruct an engineer\'s strategy, removing ambiguity of how something works.'
|
||||
},
|
||||
{
|
||||
headline: 'Robust',
|
||||
icon: '/img/robust.png',
|
||||
desc: 'Load spikes, accidental misuse, and business growth should not bring software crashing to the ground. Systems should be designed to handle faults gracefully. If there are errors, they should be reported clearly.'
|
||||
},
|
||||
{
|
||||
headline: 'Leveraged by Other Systems',
|
||||
icon: '/img/leverage.png',
|
||||
desc: 'When software simply does its job, and does it well, it will be an asset to other systems. When software becomes convoluted, it will hinder other systems.'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
jumbotronStyling() {
|
||||
const gradientTop = (this.$vuetify.theme.dark) ? 'rgba(15, 15, 15, 0.55)' : 'rgba(25, 25, 25, 0.25)'
|
||||
const gradientBot = (this.$vuetify.theme.dark) ? 'rgba(48, 48, 48, 0.75)' : 'rgba(250, 250, 250, 0.75)'
|
||||
return {
|
||||
background: 'linear-gradient(to bottom, ' + gradientTop + ', ' + gradientBot + '), url(/img/background-gray.png) center center no-repeat',
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.jumbotron {
|
||||
padding-top: 7rem;
|
||||
padding-bottom: 7rem;
|
||||
}
|
||||
.jumbotron-content {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.simpleAttr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
@media (max-width: 1263px) {
|
||||
.jumbotron {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<v-container style="max-width: 800px">
|
||||
<v-row>
|
||||
<v-col class="article">
|
||||
<router-view />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<app-container>
|
||||
<v-row class="text-center mb-8">
|
||||
<v-col>
|
||||
<h1 class="display-2">Jobs</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="jobs === null || jobs.length <= 0" class="text-center">
|
||||
<v-col>
|
||||
No job openings at this time, but we are always open to starting a conversation. Email us at <a href="mailto:jobs@simplesystems.tech">jobs@simplesystems.tech</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-else>
|
||||
<v-col v-for="(j, i) in jobs" :key="i" cols="12" md="6">
|
||||
<router-link :to="'/job/' + j.key">
|
||||
<v-card>
|
||||
<v-card-title class="grey" :class="$vuetify.theme.dark ? 'darken-2' : 'lighten-5'">
|
||||
<v-icon class="mr-3">{{ j.icon }}</v-icon>
|
||||
{{ j.title }}
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text>{{ j.desc }}</v-card-text>
|
||||
</v-card>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</app-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jobKeys from '@/assets/jobKeys'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
jobs: [],
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
Promise.all(
|
||||
jobKeys.map(async jobKey => {
|
||||
return {
|
||||
key: jobKey,
|
||||
...await import('@/job-posts/' + jobKey + '.md').then(md => md.attributes)
|
||||
}
|
||||
})
|
||||
).then(data => {
|
||||
this.jobs = data
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<template>
|
||||
<app-container>
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-center">
|
||||
<h1 class="display-2">Our Portfolio</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-center">
|
||||
<hr>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="justify-center justify-md-start">
|
||||
<v-col
|
||||
v-for="(p, i) in projects"
|
||||
:key="i"
|
||||
cols="12"
|
||||
sm="10"
|
||||
md="6"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="grey" :class="$vuetify.theme.dark ? 'darken-2' : 'lighten-5'">
|
||||
<img :src="p.logo" class="mr-3" width="48" height="48">
|
||||
{{ p.title }}
|
||||
|
||||
<div class="flex-grow-1"/>
|
||||
|
||||
<v-btn text color="blue" class="px-0" :href="p.href" target="_blank">
|
||||
Visit Site
|
||||
<v-icon class="ml-1" small>launch</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text>
|
||||
{{ p.desc }}
|
||||
|
||||
<!--
|
||||
<div class="text-right">
|
||||
<v-btn small class="primary" :href="p.href" target="_blank">Visit Site</v-btn>
|
||||
</div>
|
||||
-->
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</app-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projects: [
|
||||
{
|
||||
title: 'SBA Ponderay',
|
||||
logo: 'https://sbaponderay.com/img/sba-ponderay.png',
|
||||
desc: 'SBA Ponderay is a Jiu Jitsu gym in Ponderay, ID. It specializes in the Progressive System of Brazilian Jiu Jitsu. Simple Systems\' owner trains there several times a week.',
|
||||
href: 'https://sbaponderay.com/',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<app-container>
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-center">
|
||||
<h1 class="display-2">What We Do</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="justify-center">
|
||||
<v-col v-for="serv in services" :key="serv.name" class="pa-3" cols="12" sm="8" md="6">
|
||||
<v-card class="service-card pt-3">
|
||||
<v-card-title>
|
||||
<img :src="serv.img" width="80" height="80" class="mr-4" />
|
||||
<span class="headline font-weight-bold">{{ serv.name }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<p v-for="d in serv.desc" class="service_desc">{{ d }}</p>
|
||||
<div class="text-right">
|
||||
<v-btn
|
||||
v-for="(l, i) in serv.links"
|
||||
:key="i"
|
||||
:to="l.to"
|
||||
class="primary"
|
||||
>
|
||||
{{ l.text }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</app-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
services: [
|
||||
{
|
||||
name: 'Software',
|
||||
img: '/img/monitor.png',
|
||||
desc: [
|
||||
'We are passionate about creating software to solve problems. We have experience in a broad range of software environments including web, database, machine automation, and backend services.',
|
||||
'Simple Systems can consult with you on a comprehensive solution that fits your business needs. Our process is flexible and will be tuned to the problem we\'re solving. Once the system is complete, we can deliver it, or manage it for you.'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Websites',
|
||||
img: '/img/website.png',
|
||||
desc: [
|
||||
'Every business needs a web presence. It is one of the most effective ways to drive customers to your business.',
|
||||
'It can be a deterrent if it is not high quality though! Over half of users will abandon your site if it does not load in under 3 seconds. It is crucial that the website displays quickly and looks good.',
|
||||
'Simple Systems can improve your prospective clients\' experience by building a website from scratch, or cleaning up the existing one. We can handle all the hosting for you too!'
|
||||
],
|
||||
links: [
|
||||
{ text: 'Our Portfolio', to: '/portfolio' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Data Management',
|
||||
img: '/img/database.png',
|
||||
desc: [
|
||||
'The manner in which you store your data will affect business performance. If it is unorganized, accessing it can be slow. This can impair future upgrades and additions to your application. Make sure your data is organized and, most importantly, secured.',
|
||||
'Storage systems are evolving all the time, and moving to a new one may save a lot of money. Data migrations are tricky, and can lose data if done incorrectly. It is important to have a documented process and verification everything worked.',
|
||||
'Simple Systems can pick the right type of database for your needs, design it, and deploy it. After it is deployed and tested, we can maintain it as your data needs change. We can also work with you to increase the performance of your current solution, or migrate it to something better.'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Engineering Discipline',
|
||||
img: '/img/checklist.png',
|
||||
desc: [
|
||||
'Sometimes it is important to move fast and get features done quickly. This mode of operation will build technical debt that must eventually be paid. Code will become fragile and unmanageable. The epitome of this development pace is rewriting a project from scratch because it has become cheaper to do so than maintain.',
|
||||
'Disciplined engineers do not let this happen. They are patient, calculating, and write code deliberately. This will allow features to be released faster in the future.',
|
||||
'Simple Systems can help guide your team on these practices. We have the experience of small startups all the way to fortune 50 companies.'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.service_desc {
|
||||
text-indent: 2.0em;
|
||||
font-size: medium;
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
import BlogPost from '@/pages/BlogPost'
|
||||
import blogPosts from '@/assets/blogPosts'
|
||||
|
||||
const blogRoutes = blogPosts.map(bPost => {
|
||||
return {
|
||||
path: '/blog/post/' + bPost.key,
|
||||
component: BlogPost,
|
||||
props: {
|
||||
cmpnt: bPost.module.vue.component,
|
||||
attrs: bPost.module.attributes,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
import jobKeys from '@/assets/jobKeys'
|
||||
|
||||
const childJobRoutes = [
|
||||
...jobKeys.map(jobKey => {
|
||||
return {
|
||||
path: jobKey,
|
||||
component: require('@/job-posts/' + jobKey + '.md').vue.component,
|
||||
}
|
||||
}),
|
||||
|
||||
// Redirect `/job` to the `/jobs` page.
|
||||
{ path: '', redirect: '/jobs' },
|
||||
]
|
||||
|
||||
export default new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{ path: '/', component: () => import('@/pages/Home') },
|
||||
{ path: '/services', component: () => import('@/pages/Services') },
|
||||
{ path: '/portfolio', component: () => import('@/pages/Portfolio.vue') },
|
||||
{ path: '/about', component: () => import('@/pages/About') },
|
||||
{ path: '/blog', component: () => import('@/pages/Blog') },
|
||||
...blogRoutes,
|
||||
{ path: '/jobs', component: () => import('@/pages/Jobs') },
|
||||
{ path: '/job', component: () => import('@/pages/JobPost'), children: childJobRoutes },
|
||||
{ path: '*', component: () => import('@/pages/404.vue') }
|
||||
],
|
||||
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return { x: 0, y: 0 }
|
||||
},
|
||||
})
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
import 'material-design-icons-iconfont/dist/material-design-icons.css'
|
||||
|
||||
import Vuetify, {
|
||||
VApp, VAppBar, VContent, VNavigationDrawer, VToolbar, VFooter,
|
||||
VContainer, VRow, VCol,
|
||||
VCard, VCardTitle, VCardText, VCardActions,
|
||||
VDialog,
|
||||
VExpansionPanels, VExpansionPanel, VExpansionPanelHeader, VExpansionPanelContent,
|
||||
VBtn, VChip, VIcon,
|
||||
VDivider, VSpacer,
|
||||
VOverlay, VTooltip,
|
||||
VList, VListItem, VListItemContent, VListItemTitle, VListItemAction,
|
||||
VTextField,
|
||||
VExpandTransition,
|
||||
} from 'vuetify/lib'
|
||||
|
||||
import { Intersect, Ripple } from 'vuetify/lib/directives'
|
||||
|
||||
Vue.use(Vuetify, {
|
||||
components: {
|
||||
VApp, VAppBar, VContent, VNavigationDrawer, VToolbar, VFooter,
|
||||
VContainer, VRow, VCol,
|
||||
VCard, VCardTitle, VCardText, VCardActions,
|
||||
VDialog,
|
||||
VExpansionPanels, VExpansionPanel, VExpansionPanelHeader, VExpansionPanelContent,
|
||||
VBtn, VChip, VIcon,
|
||||
VDivider, VSpacer,
|
||||
VOverlay, VTooltip,
|
||||
VList, VListItem, VListItemContent, VListItemTitle, VListItemAction,
|
||||
VTextField,
|
||||
VExpandTransition,
|
||||
},
|
||||
directives: {
|
||||
Intersect,
|
||||
Ripple,
|
||||
},
|
||||
})
|
||||
|
||||
export default new Vuetify({
|
||||
icons: {
|
||||
iconfont: 'md',
|
||||
},
|
||||
theme: {
|
||||
dark: false,
|
||||
},
|
||||
})
|
||||
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
/* fallback */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-moz-font-feature-settings: 'liga';
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 153 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 718 B After Width: | Height: | Size: 718 B |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
#thToggle {
|
||||
}
|
||||
body {
|
||||
background: #303030;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
p { color: #ccc }
|
||||
|
||||
hr { border-color: #6c6c6c }
|
||||
|
||||
.card {
|
||||
--bgclr: #444;
|
||||
color: white;
|
||||
}
|
||||
.card-title {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #222;
|
||||
}
|
||||
.navbar-title, .navbar-items *, .drawer-items * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.jtron {
|
||||
background: linear-gradient(to bottom, rgba(15, 15, 15, 0.55), rgba(48, 48, 48, 0.75)), url(/img/background-grey.png) center center no-repeat;
|
||||
}
|
||||
.jtron-right {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
body.dark {
|
||||
background: #303030;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
p.dark { color: #ccc }
|
||||
|
||||
hr.dark { border-color: #6c6c6c }
|
||||
|
||||
.card.dark {
|
||||
--bgclr: #444;
|
||||
color: white;
|
||||
}
|
||||
.card-title.dark {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.navbar.dark {
|
||||
background: #222;
|
||||
}
|
||||
.navbar-title.dark, .navbar-items.dark *, .drawer-items.dark * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.jtron.dark {
|
||||
background: linear-gradient(to bottom, rgba(15, 15, 15, 0.55), rgba(48, 48, 48, 0.75)), url(/img/background-grey.png) center center no-repeat;
|
||||
}
|
||||
.jtron-right.dark {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body, body.light {
|
||||
background: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Cantarell,Ubuntu,Helvetica Neue,Roboto,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2196f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img { max-width: 100% !important }
|
||||
|
||||
p, p.light { color: #555 }
|
||||
|
||||
h1 { font-weight: normal; font-size: 2.5rem; }
|
||||
h2 { font-weight: normal; font-size: 2.25rem; }
|
||||
|
||||
hr, hr.light {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-width: thin 0 0 0;
|
||||
border-style: solid;
|
||||
display: block;
|
||||
margin: 0;
|
||||
max-height: 0px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.d-flex { display: flex !important }
|
||||
.d-inline-flex { display: inline-flex !important }
|
||||
.d-inline-block { display: inline-block !important }
|
||||
.d-none { display: none !important }
|
||||
|
||||
.flex-column { display: flex !important; flex-direction: column !important }
|
||||
|
||||
.container {
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
.blog.container { max-width: 800px; padding-top: 2rem; }
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.col { flex: 0 1 auto; padding: 0.75rem; }
|
||||
.col.xs-12 { width: 100% !important }
|
||||
.col.xs-6 { width: 50% !important }
|
||||
.col.shrink { flex: 0 0 auto !important }
|
||||
@media (min-width: 600px) {
|
||||
.col.sm-content { flex-basis: content !important }
|
||||
.col.sm-grow { flex-grow: 1 !important; flex-basis: 0 !important; }
|
||||
.col.sm-shrink { flex: 0 0 auto !important; }
|
||||
.col.sm-6 { width: 50% !important }
|
||||
.col.sm-9 { width: 75% !important }
|
||||
.col.sm-10 { width: 83.3334% !important }
|
||||
|
||||
.text-sm-center { text-align: center !important; }
|
||||
.justify-sm-center { justify-content: center !important; }
|
||||
}
|
||||
@media (min-width: 950px) {
|
||||
.col.md-content { flex-basis: content !important }
|
||||
.col.md-grow { flex-grow: 1 !important; flex-basis: 0 !important; }
|
||||
.col.md-shrink { flex: 0 0 auto !important; }
|
||||
.col.md-3 { width: 25% !important }
|
||||
.col.md-4 { width: 33.3334% !important }
|
||||
.col.md-6 { width: 50% !important }
|
||||
.col.md-8 { width: 66.6667% !important }
|
||||
.col.md-9 { width: 75% !important }
|
||||
|
||||
.hide-md-and-up { display: none; }
|
||||
}
|
||||
@media (min-width: 1250px) {
|
||||
.col.lg-6 { width: 50% !important }
|
||||
}
|
||||
|
||||
@media (max-width: 949px) {
|
||||
.hide-sm-and-down { display: none; }
|
||||
}
|
||||
|
||||
.spacer { flex-grow: 1 !important }
|
||||
|
||||
.align-center { align-items: center !important }
|
||||
.justify-center { justify-content: center !important }
|
||||
.justify-end { justify-content: end !important }
|
||||
.text-center { text-align: center !important }
|
||||
.text-right { text-align: right !important }
|
||||
|
||||
.title { font-size: 1.25rem }
|
||||
.headline { font-size: 1.5rem }
|
||||
|
||||
.mx-auto { margin: auto !important }
|
||||
.ml-4 { margin-left: 1rem !important }
|
||||
.mr-4 { margin-right: 1rem !important }
|
||||
.mt-4 { margin-top: 1rem !important }
|
||||
.mt-8 { margin-top: 2rem !important }
|
||||
|
||||
.pa-4 { padding: 1rem !important }
|
||||
.pb-4 { padding-bottom: 1rem !important }
|
||||
.pr-4 { padding-right: 1rem !important }
|
||||
|
||||
.overlay {
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
|
||||
display: flex;
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card, .card.light {
|
||||
--bgclr: white;
|
||||
background: var(--bgclr);
|
||||
border-radius: 4px;
|
||||
color: #555;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
overflow-wrap: break-word;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transition-property: box-shadow;
|
||||
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: box-shadow;
|
||||
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.card.blue { --bgclr: #1E88E5 !important; color: white !important; }
|
||||
.card.outlined {
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: none;
|
||||
}
|
||||
.card-title, .card-text {
|
||||
padding: 1rem;
|
||||
}
|
||||
.card-title, .card-title.light {
|
||||
background: #f2f2f2;
|
||||
border-radius: 4px 4px 0 0 !important;
|
||||
display: flex;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.card-text p {
|
||||
text-indent: 12pt;
|
||||
}
|
||||
|
||||
.navbar, .navbar.light {
|
||||
color: white;
|
||||
background: #222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.1rem 1.5rem;
|
||||
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.35),0 1px 10px 0 rgba(0,0,0,.12);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 64px !important;
|
||||
z-index: 2;
|
||||
}
|
||||
.navbar-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.navbar-items {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.navbar-items a {
|
||||
color: white;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.navbar-items a:hover, .navbar-items.light a:hover { color: #555 }
|
||||
|
||||
#navDrawer { padding-top: 64px }
|
||||
.drawer {
|
||||
background: #333;
|
||||
color: #ddd;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 6;
|
||||
|
||||
min-width: 350px;
|
||||
max-width: 350px;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
|
||||
transition: transform 0.3s;
|
||||
transform: translate(100%);
|
||||
}
|
||||
.drawer-items a {
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
padding: 1rem;
|
||||
padding-right: 3rem;
|
||||
text-align: right;
|
||||
}
|
||||
.drawer-items a:hover {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #111;
|
||||
color: white !important;
|
||||
flex-shrink: 0;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.footer .contact {
|
||||
padding-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
.jtron, .jtron.light {
|
||||
background: linear-gradient(to bottom, rgba(25, 25, 25, 0.25), rgba(250, 250, 250, 0.75)), url(/img/background-grey.png) center center no-repeat;
|
||||
}
|
||||
.jtron {
|
||||
padding-top: 9rem;
|
||||
padding-bottom: 9rem;
|
||||
}
|
||||
.jtron h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
.jtron h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.jtron h3, .jtron h1 {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
.jtron-content {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.jtron-left {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
.jtron-right, .jtron-right.light {
|
||||
background: rgba(190, 190, 190, 0.5);
|
||||
font-size: 1.75rem;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
@media (max-width: 1249px) {
|
||||
.jtron {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.article {}
|
||||
.article h1,
|
||||
.article h2,
|
||||
.article h3 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.article p {
|
||||
text-indent: 16pt;
|
||||
}
|
||||
p.no-indent {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.material-icons.sm { font-size: 0.925rem }
|
||||
.material-icons { font-size: 1.75rem }
|
||||
.material-icons.lg { font-size: 2.25rem }
|
||||
.material-icons.xl { font-size: 3rem }
|
||||
|
||||
button::-moz-focus-inner, .btn::-moz-focus-inner {
|
||||
border: none;
|
||||
outline: 0 !important;
|
||||
}
|
||||
button, .btn {
|
||||
--clr: #777;
|
||||
border: 1px solid var(--clr);
|
||||
border-radius: 4px;
|
||||
background: var(--clr);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
button.lg, .btn.lg { font-size: 1.1rem }
|
||||
button.flat, .btn.flat {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25rem !important;
|
||||
}
|
||||
button.round, .btn.round {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.blue { --clr: #42A5F5 }
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
config.module
|
||||
.rule('md')
|
||||
.test(/\.md$/)
|
||||
.use('frontmatter-markdown-loader')
|
||||
.loader('frontmatter-markdown-loader')
|
||||
.tap(args => ({
|
||||
mode: [ "vue-component" ],
|
||||
}))
|
||||
.end()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue