xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: xdrm-brackets:fc6f8cb2579150e2d5a744ed5287a01f85f9cafd
Branches Tags
xdrm-brackets:master
xdrm-brackets:search-engine
xdrm-brackets:feature/yellow
...
compare: xdrm-brackets:a0e77f816d6089364b5a5862e7a19e032f844478
Branches Tags
xdrm-brackets:search-engine
xdrm-brackets:feature/yellow
xdrm-brackets:master

5 Commits
fc6f8cb257 ... a0e77f816d

Author SHA1 Message Date
xdrm a0e77f816d
feat: change theme to yellow-green 2024-09-24 22:59:57 +02:00
xdrm e1aa5b948a
feat: preload google fonts 2024-09-24 22:58:48 +02:00
xdrm e5856c39ec
feat: update google fonts 2024-09-24 22:50:26 +02:00
xdrm fa71f5c909
feat: set initial scale to 1 
- otherwise 300ms delay for being zoomable on smartphones
 2024-09-24 22:42:49 +02:00
xdrm ccf518f30e
chore: yarn upgrade 2024-09-23 19:02:55 +02:00
14 changed files with 1454 additions and 1189 deletions
Show Stats Expand all files Collapse all files

5
public/index.html
View File

@ -3,13 +3,14 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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="icon" href="<%= BASE_URL %>favicon.ico">
<link rel='stylesheet' href='styles.css'> <link rel='stylesheet' href='styles.css'>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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> <title>xdrm()</title>
</head> </head>

6
src/App.vue
View File

@ -58,6 +58,8 @@ export default class App extends Vue {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/vars.scss';
#app { #app {
display: flex; display: flex;
position: absolute; position: absolute;
@ -95,7 +97,7 @@ export default class App extends Vue {
width: 100%; width: 100%;
height: .1em; height: .1em;
background: #5f50bf; background: $primary-color;
transition: width .2s ease-in-out, margin-left .2s ease-in-out; transition: width .2s ease-in-out, margin-left .2s ease-in-out;
@ -106,7 +108,7 @@ export default class App extends Vue {
color: #fff; color: #fff;
&:after { &:after {
width: 90%; width: 104%;
} }
} }
} }

11
src/assets/home/logo.svg
View File

@ -3,12 +3,17 @@
<defs> <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="a" x1="122.52" x2="130.49" y1="39.199" y2="31.302" gradientTransform="translate(.09658)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
<linearGradient id="b"> <linearGradient id="b">
<stop stop-color="#745cfc" offset="0"/> <stop stop-color="#a8e52c" offset="0"/>
<stop stop-color="#564ba4" offset="1"/> <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> </linearGradient>
</defs> </defs>
<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)"> <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)"> <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="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"/> <path d="m130.48 39.199-2.4404-3.8335 2.538-4.0637h-2.0122l-1.7173 3.1108v1.9246l1.5038 2.8618z"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

4
src/assets/timeline/logo.svg
View File

@ -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"> <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> <defs>
<linearGradient id="a" x1="122.52" x2="130.49" y1="39.199" y2="31.302" gradientTransform="translate(.09658)" gradientUnits="userSpaceOnUse"> <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="#a8e52c" offset="0"/>
<stop stop-color="#564ba4" offset="1"/> <stop stop-color="#8fc427" offset="1"/>
</linearGradient> </linearGradient>
</defs> </defs>
<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)"> <g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

2
src/assets/timeline/project.svg
View File

@ -44,7 +44,7 @@
cy="865.03" cy="865.03"
r="4.9253" r="4.9253"
fill="#2c55cf" 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" /> id="circle26094" />
<path <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" 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"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

6
src/assets/wave.1.svg
View File

@ -45,18 +45,18 @@
stop-opacity=".97647" stop-opacity=".97647"
offset="0" offset="0"
id="stop4971" id="stop4971"
style="stop-color:#745cfc;stop-opacity:0.98000002;" /> style="stop-color:#a8e52c;stop-opacity:0.98000002;" />
<stop <stop
stop-color="#fff" stop-color="#fff"
stop-opacity=".89804" stop-opacity=".89804"
offset="0.59202999" offset="0.59202999"
id="stop4973" id="stop4973"
style="stop-color:#745cfc;stop-opacity:0.89999998;" /> style="stop-color:#a8e52c;stop-opacity:0.89999998;" />
<stop <stop
stop-color="#fff" stop-color="#fff"
offset="1" offset="1"
id="stop4975" id="stop4975"
style="stop-color:#745cfc;stop-opacity:1;" /> style="stop-color:#a8e52c;stop-opacity:1;" />
</linearGradient> </linearGradient>
</defs> </defs>
<g <g

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

6
src/assets/wave.2.svg
View File

@ -45,19 +45,19 @@
stop-opacity=".25098" stop-opacity=".25098"
offset="0" offset="0"
id="stop7387" id="stop7387"
style="stop-color:#745cfc;stop-opacity:0.25;" /> style="stop-color:#a8e52c;stop-opacity:0.25;" />
<stop <stop
stop-color="#fff" stop-color="#fff"
stop-opacity=".14902" stop-opacity=".14902"
offset="0.22879" offset="0.22879"
id="stop7389" id="stop7389"
style="stop-color:#745cfc;stop-opacity:0.15000001;" /> style="stop-color:#a8e52c;stop-opacity:0.15000001;" />
<stop <stop
stop-color="#fff" stop-color="#fff"
stop-opacity=".05098" stop-opacity=".05098"
offset="1" offset="1"
id="stop7391" id="stop7391"
style="stop-color:#745cfc;stop-opacity:0.05;" /> style="stop-color:#a8e52c;stop-opacity:0.05;" />
</linearGradient> </linearGradient>
</defs> </defs>
<g <g

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

11
src/components/Home.vue
View File

@ -111,6 +111,7 @@ export default class Home extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/vars.scss';
$width: 100vw; $width: 100vw;
$height: 100vh; $height: 100vh;
@ -257,7 +258,7 @@ export default class Home extends Vue {
width: calc( 100% + 2*.2em ); width: calc( 100% + 2*.2em );
height: 30%; height: 30%;
background: #6553d0; background: darken($primary-color, 30%);
z-index: -1; z-index: -1;
} }
@ -268,7 +269,7 @@ export default class Home extends Vue {
&:before { &:before {
content: '> '; content: '> ';
color: #6553d0; color: $primary-color;
font-weight: 700; font-weight: 700;
} }
} }
@ -282,8 +283,8 @@ export default class Home extends Vue {
} }
@keyframes fadeLoop { @keyframes fadeLoop {
from { opacity: 1.0; transform: translateY(-2%); } from { transform: translateY(-5%); }
to { opacity: 0.8; transform: translateY(2%); } to { transform: translateY(0); }
} }
.wave { .wave {
@ -340,7 +341,7 @@ export default class Home extends Vue {
img { img {
width: #{.8*$scroll-btn-size}; width: #{.8*$scroll-btn-size};
height: #{.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 { &:hover {

28
src/components/LevelDisplay.vue
View File

@ -16,7 +16,7 @@ export default class LevelDisplay extends Vue {
// id of the skill to display (number representation) // id of the skill to display (number representation)
@Prop(Number) private level: number|undefined; @Prop(Number) private level: number|undefined;
protected mounted(){ protected mounted() {
this.update(this.level); this.update(this.level);
} }
@ -26,24 +26,24 @@ export default class LevelDisplay extends Vue {
} }
private update(level: number|undefined) { private update(level: number|undefined) {
if( level == undefined ){ if ( level == undefined ) {
return; return;
} }
const els : HTMLElement[] = [ const els: HTMLElement[] = [
this.$refs.l1 as HTMLElement, this.$refs.l1 as HTMLElement,
this.$refs.l2 as HTMLElement, this.$refs.l2 as HTMLElement,
this.$refs.l3 as HTMLElement, this.$refs.l3 as HTMLElement,
this.$refs.l4 as HTMLElement, this.$refs.l4 as HTMLElement,
this.$refs.l5 as HTMLElement, this.$refs.l5 as HTMLElement,
]; ];
for( let i = 0 ; i < els.length ; i++ ){ for ( let i = 0 ; i < els.length ; i++ ) {
if( els[i] == undefined ){ if ( els[i] == undefined ) {
continue; continue;
} }
els[i].classList.remove("active"); els[i].classList.remove('active');
if( i < level ){ 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 --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/vars.scss';
.level { .level {
display: flex; display: flex;
@ -71,11 +73,11 @@ export default class LevelDisplay extends Vue {
} }
.l1.active { background: darken(#6252c6, 8%); } .l1.active { background: darken($primary-color, 8%); }
.l2.active { background: darken(#6252c6, 6%); } .l2.active { background: darken($primary-color, 6%); }
.l3.active { background: darken(#6252c6, 4%); } .l3.active { background: darken($primary-color, 4%); }
.l4.active { background: darken(#6252c6, 2%); } .l4.active { background: darken($primary-color, 2%); }
.l5.active { background: darken(#6252c6, 0%); } .l5.active { background: darken($primary-color, 0%); }
.l1 { margin-left: 0; } .l1 { margin-left: 0; }
.l5 { margin-right: 0; } .l5 { margin-right: 0; }

3
src/components/SkillCard.vue
View File

@ -70,6 +70,7 @@ export default class SkillCard extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/vars.scss';
$height: 2em; $height: 2em;
$active-border: .2em; $active-border: .2em;
@ -144,7 +145,7 @@ export default class SkillCard extends Vue {
} }
.name { .name {
border-color: #41b883; border-color: $primary-color;
} }
} }
} }

9
src/components/SkillPicker.vue
View File

@ -73,8 +73,8 @@ interface Details {
title: string; title: string;
projects: Project[]; projects: Project[];
text: { [key in Locales]: string }; text: { [key in Locales]: string };
interest: Level, interest: Level;
mastery: Level, mastery: Level;
} }
const DEFAULT_TAG = tTag.All; 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 --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/vars.scss';
$page-margin: 3rem; $page-margin: 3rem;
$bottom-spacer: 15vh; $bottom-spacer: 15vh;
@ -229,7 +230,7 @@ export default class SkillPicker extends Vue {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: linear-gradient(0, #564ba4, #745cfc); background: linear-gradient(0, darken($primary-color, 10%), $primary-color);
padding: $page-margin; padding: $page-margin;
@ -254,7 +255,7 @@ export default class SkillPicker extends Vue {
width: 100vw; width: 100vw;
height: $bottom-margin; 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%);
} }
} }

19
src/components/Timeline.vue
View File

@ -191,6 +191,10 @@ export default class Timeline extends Vue {
scroller.go('skill-picker', 0); scroller.go('skill-picker', 0);
} }
protected sanitize(raw: string): string {
return url.sanitize(raw);
}
private sort_projects(a: Project, b: Project): number { private sort_projects(a: Project, b: Project): number {
if ( b.stopped_at == null && a.stopped_at == null ) { if ( b.stopped_at == null && a.stopped_at == null ) {
return b.started_at.getTime() - a.started_at.getTime(); 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> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/vars.scss';
$icon-size: 2.7rem; $icon-size: 2.7rem;
$space-width: 1rem; $space-width: 1rem;
@ -329,7 +330,7 @@ export default class Timeline extends Vue {
color: #fff; color: #fff;
font-size: 1.4rem; 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: none;
border-radius: .5rem / .5rem; border-radius: .5rem / .5rem;
@ -467,7 +468,7 @@ export default class Timeline extends Vue {
justify-self: end; justify-self: end;
font-size: .8em; font-size: .8em;
color: #434d5d; color: $soft-color;
margin-right: 1rem; margin-right: 1rem;
} }
@ -476,7 +477,7 @@ export default class Timeline extends Vue {
margin-left: 1rem; margin-left: 1rem;
color: #89919f; color: #97a3b9;
} }
// line 3 // line 3
@ -583,7 +584,7 @@ export default class Timeline extends Vue {
} }
.name b { .name b {
color: #745cfc; color: $primary-color;
font-weight: 500; font-weight: 500;
} }
@ -593,7 +594,7 @@ export default class Timeline extends Vue {
position: relative; position: relative;
font-size: .8em; font-size: .8em;
color: #434d5d; color: $soft-color;
margin-left: .5em; margin-left: .5em;

3
src/vars.scss Normal file
View File

@ -0,0 +1,3 @@
$primary-color: #6553d0;
$primary-color: #a8e52c;
$soft-color: #7b7f86;

2530
yarn.lock
View File

File diff suppressed because it is too large Load Diff