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

feat: use skill cards in the timeline

This commit is contained in:
Adrien Marquès 2022-10-05 14:26:30 +02:00
parent 65b6c89357
commit 9179c7637d
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Timeline.vue
View File

@ -17,7 +17,7 @@
<img :key="'skill-icon-'+proj.name" class='skill-icon' src='../assets/timeline/skills.svg' /> <img :key="'skill-icon-'+proj.name" class='skill-icon' src='../assets/timeline/skills.svg' />
<div :key="'skillset-'+proj.name" class='skillset'> <div :key="'skillset-'+proj.name" class='skillset'>
<span v-for='(skill) of proj.skills' :key='skill' v-html='skills[skill].name'></span> <SkillCard v-for='(id) of proj.skills' :key='id' :id='id'/>
</div> </div>
<img :key="'desc-icon-'+proj.name" class='desc-icon' src='../assets/timeline/info.svg' /> <img :key="'desc-icon-'+proj.name" class='desc-icon' src='../assets/timeline/info.svg' />
@ -53,8 +53,10 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { Projects, Project } from '../model/projects'; import SkillCard from './SkillCard.vue';
import { Skills, tSkills } from '../model/skills'; import { Project } from '../model/projects';
import { tID } from '../model/skills';
import * as projects from '../service/projects';
function pluralize(n: number, s: string): string { function pluralize(n: number, s: string): string {
n = Math.floor(Math.abs(n)); n = Math.floor(Math.abs(n));
@ -76,6 +78,9 @@
} }
@Component({ @Component({
components: {
SkillCard,
},
filters: { filters: {
short_date: function(date: Date): string { short_date: function(date: Date): string {
return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }); return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
@ -114,11 +119,9 @@
} }
}) })
export default class Timeline extends Vue { export default class Timeline extends Vue {
private projects: Project[] = Projects; private projects: Project[] = [];
private skills: tSkills = Skills;
private mounted() { private mounted() {
document.body.addEventListener('scroll', this.onScroll, { passive: true }); document.body.addEventListener('scroll', this.onScroll, { passive: true });
} }
@ -278,17 +281,10 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
span { .skill-card {
font-size: .8em;
padding: .4em .6em;
margin-right: .4em; margin-right: .4em;
margin-bottom: .4em; margin-bottom: .4em;
color: #fff;
background: #34343b;
border-radius: .4em / .4em;
user-select: none; user-select: none;
} }
} }