feat: add skill card title and skill picker media queries
This commit is contained in:
parent
f8f3b0e282
commit
e6179034e9
GPG Key ID:
D75243CA236D825E
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class='skill-card' ref='root' :data-active='active ? "1" : "0"' @click='onClick()'>
|
||||
<div class='skill-card' ref='root' :data-active='active ? "1" : "0"' @click='onClick()' :title='name()'>
|
||||
<img class='icon' :src='icon()' />
|
||||
<span class='name'>
|
||||
<span v-html='name()'></span>
|
||||
|
|
@ -17,10 +17,6 @@
|
|||
// id of the skill to display (string representation)
|
||||
@Prop(Number) readonly id: tID|undefined;
|
||||
|
||||
// undefined -> automatic size
|
||||
// value -> fixed size applied (valid css value with unit)
|
||||
@Prop(String) readonly width: string|undefined;
|
||||
|
||||
// whether it has the active style
|
||||
@Prop(Boolean) active: boolean|undefined;
|
||||
|
||||
|
|
@ -29,13 +25,7 @@
|
|||
// empty -> this.id is used to fetch the skill
|
||||
@Prop(String) folder: string|undefined;
|
||||
|
||||
protected mounted() {
|
||||
if( this.width == undefined ){
|
||||
return;
|
||||
}
|
||||
const el = this.$refs.root as HTMLElement;
|
||||
el.style.width = this.width;
|
||||
}
|
||||
protected mounted() {}
|
||||
|
||||
protected icon(): string {
|
||||
const unknown = () => require('../assets/skills/unknown.svg');
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
:key='t'
|
||||
:active='t == tag'
|
||||
:folder='t'
|
||||
width='18rem'
|
||||
@pick='onTag(t, $event)'/>
|
||||
</section>
|
||||
|
||||
|
|
@ -18,8 +17,7 @@
|
|||
v-show='filtered.indexOf(id) >= 0'
|
||||
:id='id'
|
||||
:active='id == sel'
|
||||
width='18rem'
|
||||
@pick='onPick(id, $event)' />
|
||||
@pick='onPick(id, $event)'/>
|
||||
</section>
|
||||
|
||||
<section class='details' v-if='details != null'>
|
||||
|
|
@ -199,6 +197,8 @@
|
|||
|
||||
background: linear-gradient(0, #564ba4, #745cfc);
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -231,6 +231,7 @@
|
|||
|
||||
.skill-card {
|
||||
margin: .3em 0;
|
||||
width: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -249,6 +250,7 @@
|
|||
|
||||
.skill-card {
|
||||
margin: .3em 0;
|
||||
width: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -310,6 +312,7 @@
|
|||
|
||||
font-size: 1.7em;
|
||||
font-weight: 500;
|
||||
text-align: justify;
|
||||
color: #c1c1c1;
|
||||
padding: 1em;
|
||||
|
||||
|
|
@ -359,4 +362,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
// width > 1800px : center the container
|
||||
@media screen and (min-width: 1800px) {
|
||||
.container {
|
||||
left: calc( 100vw/2 - 1800px/2 );
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
// screen less than 1400 p
|
||||
@media screen and (max-width: 1400px) {
|
||||
#skill-picker {
|
||||
font-size: 1vw;
|
||||
|
||||
.skill-card {
|
||||
width: 18vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -62,21 +62,21 @@ export const Skills: tSkills = {
|
|||
link: 'https://mariadb.org',
|
||||
icon: 'skills/mariadb.svg',
|
||||
tags: ['web', 'storage'],
|
||||
info: "",
|
||||
info: "I started using mysql then MariaDB as my first introduction to SQL, mostly when I started learning web with PHP. I now prefer using postgreSQL instead as it tends to be more robust and performant overall.",
|
||||
},
|
||||
[tID.Postgres]: {
|
||||
name: 'PostgreSQL',
|
||||
link: 'https://postgresql.org',
|
||||
icon: 'skills/postgres.svg',
|
||||
tags: ['web', 'storage'],
|
||||
info: "",
|
||||
info: "My main choice of dbms when using sql orfor relational databases. Had some experience with it mainly with go services with docker.",
|
||||
},
|
||||
[tID.Mongo]: {
|
||||
name: 'MongoDB',
|
||||
link: 'https://mongodb.com',
|
||||
icon: 'skills/mongo.svg',
|
||||
tags: ['web', 'storage'],
|
||||
info: "",
|
||||
info: "I learned it during my Master's degree. I used advanced Mongo with schema validation and complex filter requests. I find this technology really interesting over SQL, but I find classical relational databases are easier to comprehend and I am more used to it.",
|
||||
},
|
||||
|
||||
[tID.Vue]: {
|
||||
|
|
@ -91,28 +91,28 @@ export const Skills: tSkills = {
|
|||
link: 'https://angular.io',
|
||||
icon: 'skills/angular.svg',
|
||||
tags: ['web', 'UI'],
|
||||
info: "",
|
||||
info: "I used it only once to break it apart in a R&D project. I had to \"hack\" it in order to inject services and components on-the-fly.<br><br>You had a kind of App store where you could install modules. The Angular-powered website would inject new navigation menus, pages and services according to the modules you had installed.<br><br>I do not like Angular, as I think Vue.js does a better job achieving the same goal with a cleaner API, and does not force you to embrace the Angular/Google way of coding and organizing things."
|
||||
},
|
||||
[tID.Parcel]: {
|
||||
name: 'Parcel',
|
||||
link: 'https://parceljs.org/',
|
||||
icon: 'skills/parcel.svg',
|
||||
tags: ['web'],
|
||||
info: "",
|
||||
info: "I used it often back in my Master's Degree period along with PHP backends. It allows to get away from webpack which I find overly complicated and a major point of failure for most frontends.<br><br>I haven't used it in a while but would highly consider it as it has no real prerequisite.",
|
||||
},
|
||||
[tID.Cordova]: {
|
||||
name: 'Apache Cordova',
|
||||
link: 'https://cordova.apache.org/',
|
||||
icon: 'skills/cordova.svg',
|
||||
tags: ['system', 'web', 'mobile'],
|
||||
info: "",
|
||||
info: "I used it often to transform single-page applications into android, iOS or desktop apps at low cost. I haven't needed this kind of software for a while, it might now be favorable to use Capacitor or other \"alternatives\".",
|
||||
},
|
||||
[tID.Webpack]: {
|
||||
name: 'Webpack',
|
||||
link: 'https://webpack.js.org/',
|
||||
icon: 'skills/webpack.svg',
|
||||
tags: ['web'],
|
||||
info: "",
|
||||
info: "... I used it a lot because it is often required. But I hate that it is so complex that most users use it without understanding what is really does. I avoid it whenever possible, the issue can be transposed to node_modules and the whole node ecosystem.",
|
||||
},
|
||||
|
||||
[tID.WebGL]: {
|
||||
|
|
@ -120,21 +120,21 @@ export const Skills: tSkills = {
|
|||
link: 'https://www.khronos.org/webgl/',
|
||||
icon: null,
|
||||
tags: ['web'],
|
||||
info: "",
|
||||
info: "I used it during my graduation years, the potential is great but I need to find a time to explore what's new.",
|
||||
},
|
||||
[tID.AudioAPI]: {
|
||||
name: 'Audio API',
|
||||
link: 'https://webaudio.github.io/web-audio-api/',
|
||||
icon: null,
|
||||
tags: ['web'],
|
||||
info: "",
|
||||
info: "I used it mainly to build a discord clone (audio and video full-duplex streaming) as a school project. I also tried the Fourier transform to build nice graphics (c.f. Soundcloud) but have not succeeded at the time.",
|
||||
},
|
||||
[tID.Websocket]: {
|
||||
name: 'Websocket',
|
||||
link: 'https://tools.ietf.org/html/rfc6455',
|
||||
icon: null,
|
||||
tags: ['web', 'networking', 'IoT'],
|
||||
info: "",
|
||||
info: "I use them whenever possible to avoid the classical expensive polling.<br><br>I also created my own websocket client & server implementation in Go following nothing but the RFC for learning purposes.<br><br>I've used, designed and implemented websocket communications among personal and professional projects.",
|
||||
},
|
||||
|
||||
[tID.Docker]: {
|
||||
|
|
@ -142,21 +142,21 @@ export const Skills: tSkills = {
|
|||
link: 'https://docker.com',
|
||||
icon: 'skills/docker.svg',
|
||||
tags: ['web', 'system'],
|
||||
info: "",
|
||||
info: "I am using it for a while now. Most of my go projects use it as it costs no memory for your executable (multi-stage build from scratch) and allows for isolation and a better control over the running environment. I am learning docker a bit more every time I use it. It is often coupled with docker-compose in my projects.",
|
||||
},
|
||||
[tID.Bash]: {
|
||||
name: 'bash',
|
||||
link: 'https://www.gnu.org/software/bash/',
|
||||
icon: null,
|
||||
tags: ['system'],
|
||||
info: "",
|
||||
info: "Felt in love with GNU/linux and its ecosystem a while back (was 14yo back then) and I've never stopped. I'm often the linux/bash guy of the team.<br><br>I use it extensively to automate anything a human can do as it avoids a lot of mistakes in most workflows.",
|
||||
},
|
||||
[tID.Linux]: {
|
||||
name: 'GNU/Linux',
|
||||
link: 'https://www.linux.org',
|
||||
icon: 'skills/linux.svg',
|
||||
tags: ['system'],
|
||||
info: "",
|
||||
info: "Felt in love with GNU/linux and its ecosystem a while back (was 14yo back then) and I've never stopped. <br><br>Linux has been my main OS choice since then. I stepped through Ubuntu, Debian, Manjaro, Elementary, Tails (live), and I am now on Solus for a few years.",
|
||||
},
|
||||
[tID.Systemd]: {
|
||||
name: 'systemd',
|
||||
|
|
|
|||
Loading…
Reference in New Issue