Compare commits
5 Commits
fc6f8cb257
...
a0e77f816d
| Author | SHA1 | Date |
|---|---|---|
xdrm
|
a0e77f816d
|
|
|
xdrm
|
e1aa5b948a
|
|
|
xdrm
|
e5856c39ec
|
|
|
xdrm
|
fa71f5c909
|
|
|
xdrm
|
ccf518f30e
|
|
|
@ -3,13 +3,14 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=.4">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel='stylesheet' href='styles.css'>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Source+Sans+Pro&display=swap" rel="stylesheet">
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro&display=swap" as="style">
|
||||
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro&display=swap" media="all">
|
||||
|
||||
<title>xdrm()</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,8 @@ export default class App extends Vue {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/vars.scss';
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
|
@ -95,7 +97,7 @@ export default class App extends Vue {
|
|||
width: 100%;
|
||||
height: .1em;
|
||||
|
||||
background: #5f50bf;
|
||||
background: $primary-color;
|
||||
|
||||
transition: width .2s ease-in-out, margin-left .2s ease-in-out;
|
||||
|
||||
|
|
@ -106,7 +108,7 @@ export default class App extends Vue {
|
|||
color: #fff;
|
||||
|
||||
&:after {
|
||||
width: 90%;
|
||||
width: 104%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,17 @@
|
|||
<defs>
|
||||
<linearGradient id="a" x1="122.52" x2="130.49" y1="39.199" y2="31.302" gradientTransform="translate(.09658)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
|
||||
<linearGradient id="b">
|
||||
<stop stop-color="#745cfc" offset="0"/>
|
||||
<stop stop-color="#564ba4" offset="1"/>
|
||||
<stop stop-color="#a8e52c" offset="0"/>
|
||||
<stop stop-color="#8fc427" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%" gradientTransform="rotate(65)">
|
||||
<stop stop-color="#eeeeee" offset="0"/>
|
||||
<stop stop-color="#ffffff" offset=".7"/>
|
||||
<stop stop-color="#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)">
|
||||
<path d="m930.25 121.26a20.844 20.844 0 0 1-20.844 20.844 20.844 20.844 0 0 1-20.844-20.844 20.844 20.844 0 0 1 20.844-20.844 20.844 20.844 0 0 1 20.844 20.844z" fill="#fff" style="paint-order:fill markers stroke"/>
|
||||
<path d="m930.25 121.26a20.844 20.844 0 0 1-20.844 20.844 20.844 20.844 0 0 1-20.844-20.844 20.844 20.844 0 0 1 20.844-20.844 20.844 20.844 0 0 1 20.844 20.844z" style="paint-order:fill markers stroke" fill="url(#bg)"/>
|
||||
<g transform="matrix(0 2.2967 -2.2967 0 990.37 -169.5)" fill="url(#a)">
|
||||
<path d="m122.72 31.302 2.3682 3.7201a0.21308 0.21308 89.753 0 1 9.8e-4 0.2273l-2.4668 3.9498h1.5785a0.73492 0.73492 149.45 0 0 0.64338-0.37973l1.4732-2.6685a0.27716 0.27716 104.45 0 0 0.0345-0.13395v-1.7817a0.28946 0.28946 76.14 0 0-0.0332-0.13465l-1.2688-2.4147a0.71792 0.71792 31.14 0 0-0.63551-0.38397z"/>
|
||||
<path d="m130.48 39.199-2.4404-3.8335 2.538-4.0637h-2.0122l-1.7173 3.1108v1.9246l1.5038 2.8618z"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -2,8 +2,8 @@
|
|||
<svg width="4.2333mm" height="4.2333mm" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="122.52" x2="130.49" y1="39.199" y2="31.302" gradientTransform="translate(.09658)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#745cfc" offset="0"/>
|
||||
<stop stop-color="#564ba4" offset="1"/>
|
||||
<stop stop-color="#a8e52c" offset="0"/>
|
||||
<stop stop-color="#8fc427" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
|
@ -44,7 +44,7 @@
|
|||
cy="865.03"
|
||||
r="4.9253"
|
||||
fill="#2c55cf"
|
||||
style="paint-order:stroke fill markers;fill:#5f50bf;fill-opacity:1"
|
||||
style="paint-order:stroke fill markers;fill:#a8e52c;fill-opacity:.5"
|
||||
id="circle26094" />
|
||||
<path
|
||||
d="m209.6 862.95c0-0.0945-0.0733-0.29631-0.29592-0.29631-0.12969 0-0.24927 0.0842-0.28656 0.21504l-1.1874 4.156c-8e-3 0.0272-0.0115 0.0547-0.0115 0.0816-8e-3 0.0957 0.0745 0.29704 0.29715 0.29704 0.12913 0 0.24797-0.0849 0.28526-0.21541l1.1874-4.156c8e-3 -0.0276 0.0116-0.055 0.0116-0.082zm-2.2264 1.0312c0-0.16958-0.13869-0.29686-0.29686-0.29686-0.076 0-0.15195 0.029-0.20984 0.087l-1.039 1.039c-0.058 0.0661-0.087 0.14216-0.087 0.20987 0 0.0677 0.029 0.16049 0.087 0.21801l1.039 1.039c0.0577 0.0584 0.13382 0.0789 0.20988 0.0789 0.15817 0 0.29686-0.12737 0.29686-0.29686 0-0.076-0.029-0.15195-0.087-0.20993l-0.82911-0.82907 0.82916-0.82915c0.0582-0.0503 0.0869-0.12542 0.0869-0.20984zm4.3044 1.039c0-0.076-0.029-0.15195-0.087-0.20993l-1.039-1.039c-0.0577-0.0498-0.13382-0.0869-0.20989-0.0869-0.15816 0-0.29685 0.12737-0.29685 0.29686 0 0.076 0.029 0.15195 0.087 0.20993l0.82915 0.82916-0.82915 0.82916c-0.0582 0.066-0.087 0.14202-0.087 0.20974 0 0.16958 0.13869 0.29686 0.29685 0.29686 0.076 0 0.15196-0.029 0.20985-0.087l1.039-1.039c0.0583-0.0494 0.087-0.12546 0.087-0.20988z"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
|
@ -45,18 +45,18 @@
|
|||
stop-opacity=".97647"
|
||||
offset="0"
|
||||
id="stop4971"
|
||||
style="stop-color:#745cfc;stop-opacity:0.98000002;" />
|
||||
style="stop-color:#a8e52c;stop-opacity:0.98000002;" />
|
||||
<stop
|
||||
stop-color="#fff"
|
||||
stop-opacity=".89804"
|
||||
offset="0.59202999"
|
||||
id="stop4973"
|
||||
style="stop-color:#745cfc;stop-opacity:0.89999998;" />
|
||||
style="stop-color:#a8e52c;stop-opacity:0.89999998;" />
|
||||
<stop
|
||||
stop-color="#fff"
|
||||
offset="1"
|
||||
id="stop4975"
|
||||
style="stop-color:#745cfc;stop-opacity:1;" />
|
||||
style="stop-color:#a8e52c;stop-opacity:1;" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
|
@ -45,19 +45,19 @@
|
|||
stop-opacity=".25098"
|
||||
offset="0"
|
||||
id="stop7387"
|
||||
style="stop-color:#745cfc;stop-opacity:0.25;" />
|
||||
style="stop-color:#a8e52c;stop-opacity:0.25;" />
|
||||
<stop
|
||||
stop-color="#fff"
|
||||
stop-opacity=".14902"
|
||||
offset="0.22879"
|
||||
id="stop7389"
|
||||
style="stop-color:#745cfc;stop-opacity:0.15000001;" />
|
||||
style="stop-color:#a8e52c;stop-opacity:0.15000001;" />
|
||||
<stop
|
||||
stop-color="#fff"
|
||||
stop-opacity=".05098"
|
||||
offset="1"
|
||||
id="stop7391"
|
||||
style="stop-color:#745cfc;stop-opacity:0.05;" />
|
||||
style="stop-color:#a8e52c;stop-opacity:0.05;" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
|
@ -111,6 +111,7 @@ export default class Home extends Vue {
|
|||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '@/vars.scss';
|
||||
$width: 100vw;
|
||||
$height: 100vh;
|
||||
|
||||
|
|
@ -257,7 +258,7 @@ export default class Home extends Vue {
|
|||
width: calc( 100% + 2*.2em );
|
||||
height: 30%;
|
||||
|
||||
background: #6553d0;
|
||||
background: darken($primary-color, 30%);
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -268,7 +269,7 @@ export default class Home extends Vue {
|
|||
&:before {
|
||||
content: '> ';
|
||||
|
||||
color: #6553d0;
|
||||
color: $primary-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -282,8 +283,8 @@ export default class Home extends Vue {
|
|||
}
|
||||
|
||||
@keyframes fadeLoop {
|
||||
from { opacity: 1.0; transform: translateY(-2%); }
|
||||
to { opacity: 0.8; transform: translateY(2%); }
|
||||
from { transform: translateY(-5%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.wave {
|
||||
|
|
@ -340,7 +341,7 @@ export default class Home extends Vue {
|
|||
img {
|
||||
width: #{.8*$scroll-btn-size};
|
||||
height: #{.8*$scroll-btn-size};
|
||||
animation: 1s ease-in-out fadeLoop infinite alternate-reverse;
|
||||
animation: .8s cubic-bezier(0.215, 0.610, 0.355, 1) fadeLoop infinite alternate-reverse;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -41,9 +41,9 @@ export default class LevelDisplay extends Vue {
|
|||
if ( els[i] == undefined ) {
|
||||
continue;
|
||||
}
|
||||
els[i].classList.remove("active");
|
||||
els[i].classList.remove('active');
|
||||
if ( i < level ) {
|
||||
els[i].classList.add("active");
|
||||
els[i].classList.add('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,6 +52,8 @@ export default class LevelDisplay extends Vue {
|
|||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '@/vars.scss';
|
||||
|
||||
.level {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -71,11 +73,11 @@ export default class LevelDisplay extends Vue {
|
|||
|
||||
}
|
||||
|
||||
.l1.active { background: darken(#6252c6, 8%); }
|
||||
.l2.active { background: darken(#6252c6, 6%); }
|
||||
.l3.active { background: darken(#6252c6, 4%); }
|
||||
.l4.active { background: darken(#6252c6, 2%); }
|
||||
.l5.active { background: darken(#6252c6, 0%); }
|
||||
.l1.active { background: darken($primary-color, 8%); }
|
||||
.l2.active { background: darken($primary-color, 6%); }
|
||||
.l3.active { background: darken($primary-color, 4%); }
|
||||
.l4.active { background: darken($primary-color, 2%); }
|
||||
.l5.active { background: darken($primary-color, 0%); }
|
||||
|
||||
.l1 { margin-left: 0; }
|
||||
.l5 { margin-right: 0; }
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export default class SkillCard extends Vue {
|
|||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '@/vars.scss';
|
||||
|
||||
$height: 2em;
|
||||
$active-border: .2em;
|
||||
|
|
@ -144,7 +145,7 @@ export default class SkillCard extends Vue {
|
|||
}
|
||||
|
||||
.name {
|
||||
border-color: #41b883;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,8 +73,8 @@ interface Details {
|
|||
title: string;
|
||||
projects: Project[];
|
||||
text: { [key in Locales]: string };
|
||||
interest: Level,
|
||||
mastery: Level,
|
||||
interest: Level;
|
||||
mastery: Level;
|
||||
}
|
||||
|
||||
const DEFAULT_TAG = tTag.All;
|
||||
|
|
@ -205,6 +205,7 @@ export default class SkillPicker extends Vue {
|
|||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '@/vars.scss';
|
||||
|
||||
$page-margin: 3rem;
|
||||
$bottom-spacer: 15vh;
|
||||
|
|
@ -229,7 +230,7 @@ export default class SkillPicker extends Vue {
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background: linear-gradient(0, #564ba4, #745cfc);
|
||||
background: linear-gradient(0, darken($primary-color, 10%), $primary-color);
|
||||
|
||||
padding: $page-margin;
|
||||
|
||||
|
|
@ -254,7 +255,7 @@ export default class SkillPicker extends Vue {
|
|||
width: 100vw;
|
||||
height: $bottom-margin;
|
||||
|
||||
background: linear-gradient(to bottom left, #564ba4 0%, #564ba4 49.5%, transparent 50%, transparent 100%);
|
||||
background: linear-gradient(to bottom left, darken($primary-color, 10%) 0%, darken($primary-color, 10%) 49.5%, transparent 50%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -191,6 +191,10 @@ export default class Timeline extends Vue {
|
|||
scroller.go('skill-picker', 0);
|
||||
}
|
||||
|
||||
protected sanitize(raw: string): string {
|
||||
return url.sanitize(raw);
|
||||
}
|
||||
|
||||
private sort_projects(a: Project, b: Project): number {
|
||||
if ( b.stopped_at == null && a.stopped_at == null ) {
|
||||
return b.started_at.getTime() - a.started_at.getTime();
|
||||
|
|
@ -229,15 +233,12 @@ export default class Timeline extends Vue {
|
|||
}
|
||||
}
|
||||
|
||||
protected sanitize(raw: string): string {
|
||||
return url.sanitize(raw);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '@/vars.scss';
|
||||
|
||||
$icon-size: 2.7rem;
|
||||
$space-width: 1rem;
|
||||
|
|
@ -329,7 +330,7 @@ export default class Timeline extends Vue {
|
|||
color: #fff;
|
||||
font-size: 1.4rem;
|
||||
|
||||
background: linear-gradient(to top right, #564ba4, #745cfc);
|
||||
background: linear-gradient(to top right, darken($primary-color, 10%), $primary-color);
|
||||
border: none;
|
||||
border-radius: .5rem / .5rem;
|
||||
|
||||
|
|
@ -467,7 +468,7 @@ export default class Timeline extends Vue {
|
|||
justify-self: end;
|
||||
|
||||
font-size: .8em;
|
||||
color: #434d5d;
|
||||
color: $soft-color;
|
||||
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
|
@ -476,7 +477,7 @@ export default class Timeline extends Vue {
|
|||
|
||||
margin-left: 1rem;
|
||||
|
||||
color: #89919f;
|
||||
color: #97a3b9;
|
||||
}
|
||||
|
||||
// line 3
|
||||
|
|
@ -583,7 +584,7 @@ export default class Timeline extends Vue {
|
|||
}
|
||||
|
||||
.name b {
|
||||
color: #745cfc;
|
||||
color: $primary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -593,7 +594,7 @@ export default class Timeline extends Vue {
|
|||
position: relative;
|
||||
|
||||
font-size: .8em;
|
||||
color: #434d5d;
|
||||
color: $soft-color;
|
||||
|
||||
margin-left: .5em;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
$primary-color: #6553d0;
|
||||
$primary-color: #a8e52c;
|
||||
$soft-color: #7b7f86;
|
||||
Loading…
Reference in New Issue