initial commit
This commit is contained in:
commit
05e5cd3e51
|
|
@ -0,0 +1,2 @@
|
|||
html/
|
||||
site/
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
SRC_DIR = src
|
||||
OUT_DIR = site
|
||||
|
||||
ROOT_DIR = $(SRC_DIR)/root
|
||||
INCLUDE_DIR = $(SRC_DIR)/include
|
||||
|
||||
PAGES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
|
||||
HTML_INCLUDES = $(shell find $(INCLUDE_DIR) -name *.html)
|
||||
HTML_TARGETS = $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
|
||||
|
||||
STYLES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
|
||||
CSS_TARGETS = $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
|
||||
|
||||
run: $(HTML_TARGETS) $(CSS_TARGETS)
|
||||
|
||||
$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES)
|
||||
mkdir -p $(OUT_DIR)
|
||||
python ppp.py $< $(HTML_INCLUDES) > $@
|
||||
|
||||
$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css
|
||||
cp $< $@
|
||||
|
||||
clean:
|
||||
rm -r $(OUT_DIR)
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import sys
|
||||
import os.path
|
||||
|
||||
err = False
|
||||
paths = []
|
||||
|
||||
def print_usage():
|
||||
print("\nusage: python ppp.py ROOT TEMPLATES [...]")
|
||||
|
||||
# check arguments
|
||||
argc = len(sys.argv)
|
||||
if argc < 3:
|
||||
print_usage()
|
||||
sys.exit(1)
|
||||
|
||||
# figure out src dir from first include shader path root argument
|
||||
sep="/"
|
||||
inc_start_idx = 2
|
||||
inc_end_idx = argc - 1
|
||||
src_dir = sep.join(sys.argv[2].split(sep)[:-1])
|
||||
|
||||
def preprocess_file(path):
|
||||
lines=0
|
||||
|
||||
with open(path) as f:
|
||||
content = f.readlines()
|
||||
content = [x.strip() for x in content]
|
||||
lines=len(content)
|
||||
|
||||
for line in content:
|
||||
|
||||
directive = "#include"
|
||||
if line.startswith(directive):
|
||||
include_path = line.split(" ")[1]
|
||||
|
||||
# prepend directory
|
||||
include_path = "/".join([src_dir, include_path])
|
||||
|
||||
preprocess_file(include_path)
|
||||
continue
|
||||
|
||||
print(line)
|
||||
|
||||
|
||||
for i in range(1,argc):
|
||||
path = sys.argv[i]
|
||||
|
||||
if not os.path.isfile(path):
|
||||
|
||||
print(path + " is not a file")
|
||||
err = True
|
||||
continue
|
||||
|
||||
if path in paths:
|
||||
# ignore duplicates
|
||||
continue
|
||||
|
||||
paths.append(path)
|
||||
|
||||
if err:
|
||||
print_usage()
|
||||
sys.exit(1)
|
||||
|
||||
preprocess_file(sys.argv[1])
|
||||
|
||||
sys.exit(0)
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# ideas
|
||||
|
||||
* [ ] software
|
||||
* [ ] blog
|
||||
* [ ] gallery
|
||||
* [ ] images
|
||||
* [ ] captions
|
||||
|
||||
* [ ] graphics
|
||||
* [ ] a few planets orbit the cursor, or flat color otherwise
|
||||
when you click on the planets they turn into a context menu !
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
|
||||
<meta name="description" content="computer whisperer" />
|
||||
<meta name="keywords" content="Cat Flynn, Ktyl, Portfolio, Showreel, Blog, Gallery"/> <!-- blog, gallery -->
|
||||
<link rel="canonical" href="https://ktyl.dev/">
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
|
||||
<script src="https://kit.fontawesome.com/ad50bb2e16.js" crossorigin="anonymous"></script>
|
||||
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
|
||||
<!-- <script src="main.js"></script> -->
|
||||
</head>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<div class="planets"></div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="sidebar">
|
||||
<div class="sidebarContent">
|
||||
|
||||
<ul>
|
||||
<li><a href="about.html" class="fsText">/about</a></li>
|
||||
<li><a href="portfolio.html" class="fsText">/portfolio</a></li>
|
||||
<li><a href="gallery.html" class="fsText">/gallery</a></li>
|
||||
<li><a href="blog.html" class="fsText">/blog</a></li>
|
||||
<li><a href="contact.html" class="fsText">/contact</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="socials">
|
||||
<a href="https://github.com/ktyldev/"><i class="fab fa-github"></i></a>
|
||||
<a href="https://instragram.com/ktyldev"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://twitter.com/ktyldev"><i class="fab fa-twitter"></i></a>
|
||||
<a href="https://www.linkedin.com/in/cat-flynn-08751611b/"><i class="fab fa-linkedin"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
<div class="title">
|
||||
<h1 class="fsText"><a href="index.html">ktyl@website</a>/about</h1>
|
||||
</div>
|
||||
|
||||
#include sidebar.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
<div class="title">
|
||||
<h1 class="fsText"><a href="index.html">ktyl@website</a>/blog</h1>
|
||||
</div>
|
||||
|
||||
#include sidebar.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
:root {
|
||||
/* Special */
|
||||
--background: #eee;
|
||||
--foreground: #222;
|
||||
--foreground-inactive: #777;
|
||||
|
||||
/* Colors */
|
||||
--color0: #0000ff;
|
||||
--color1: #00ff00;
|
||||
--color2: #ff0000;
|
||||
--color3: #ff00ff;
|
||||
--color4: #ffff00;
|
||||
--color5: #00ffff;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
<div class="title">
|
||||
<h1 class="fsText"><a href="index.html">ktyl@website</a>/contact</h1>
|
||||
</div>
|
||||
|
||||
#include sidebar.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
<div class="title">
|
||||
<h1 class="fsText"><a href="index.html">ktyl@website</a>/contact</h1>
|
||||
</div>
|
||||
|
||||
#include sidebar.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
<div class="title">
|
||||
<h1 class="fsText"><a href="index.html">ktyl@website</a>/gallery</h1>
|
||||
</div>
|
||||
|
||||
#include sidebar.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
<title>ktyl ~ home</title>
|
||||
<div class="title">
|
||||
<h1 class="fsText">ktyl@website</h1>
|
||||
</div>
|
||||
|
||||
#include sidebar.html
|
||||
|
||||
<div class="column">
|
||||
<h1>cats stuff</h1>
|
||||
|
||||
<p>hi, im cat and i do things and stuff. eventually i want to make this an actual, useful landing page for people interested in me and what i do. unfortunately, im very scatterbrained and not very organised! as a result, this is just one of myriad ongoing projects that i constantly try to chip away at, to varying degrees of success.</p>
|
||||
</div>
|
||||
|
||||
#include planets.html
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
|
||||
@import 'colors.css';
|
||||
|
||||
:root {
|
||||
--title-height: min(20vmin, 90px);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 80px;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size);
|
||||
color: var(--color1);
|
||||
padding-bottom: 0;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display:inline;
|
||||
/*padding-left: 1em;*/
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
transform: translate(10px);
|
||||
}
|
||||
|
||||
a.fsText {
|
||||
position:relative;
|
||||
text-decoration: none;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground-inactive);
|
||||
|
||||
padding: 0 6px;
|
||||
|
||||
transform: scale(1);
|
||||
transition: background-color 0.2s, color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.fsText a {
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
a.fsText:hover {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
|
||||
transform: scale(1.1, 1);
|
||||
}
|
||||
|
||||
.fsText {
|
||||
--font-size: 1.6em;
|
||||
font-size: var(--font-size);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.column {
|
||||
position: absolute;
|
||||
width: max(30vmax,500px);
|
||||
left:50%;
|
||||
top:var(--title-height);
|
||||
bottom:0;
|
||||
padding: 10px 0 0;
|
||||
background-color: var(--color0);
|
||||
opacity: 0.7;
|
||||
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.column p {
|
||||
margin: 0 40px;
|
||||
padding-top: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.column h1 {
|
||||
padding-left: 30px;
|
||||
padding-top: 10px;
|
||||
left: 50%;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
width: max(11vmax, 180px);
|
||||
top:var(--title-height);
|
||||
bottom:0;
|
||||
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.sidebarContent {
|
||||
position: relative;
|
||||
background-color: var(--background);
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
position: relative;
|
||||
background-color: var(--background);
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
display: block;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.sidebar li a {
|
||||
padding: 0 0;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.socials {
|
||||
margin-top: 16px;
|
||||
margin-left: 10px;
|
||||
background-color:var(--background);
|
||||
}
|
||||
|
||||
.socials i {
|
||||
font-size: 2em;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.socials a {
|
||||
color: var(--foreground-inactive);
|
||||
text-decoration: none;
|
||||
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.socials a:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.planets {
|
||||
position: absolute;
|
||||
height: 60vmax;
|
||||
width: 60vmax;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
background-color: var(--color2);
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
<div class="title">
|
||||
<h1 class="fsText"><a href="index.html">ktyl@website</a>/portfolio</h1>
|
||||
</div>
|
||||
|
||||
#include sidebar.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue