diff --git a/src/App.vue b/src/App.vue index 92dc111..e545d22 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,19 @@ - - - diff --git a/src/components/Banner2.vue b/src/components/Banner2.vue deleted file mode 100644 index 58f37f1..0000000 --- a/src/components/Banner2.vue +++ /dev/null @@ -1,203 +0,0 @@ - - - - - - diff --git a/src/components/Home.vue b/src/components/Home.vue index 9e05070..f7278be 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -4,44 +4,6 @@
- - -
-

THEMES

- - -
- @@ -49,26 +11,13 @@ @@ -78,17 +27,6 @@ $wave-height: 6.3rem; - // horizontal spacing between theme chips - $theme-chip-spacing: 1rem; - // full size of a theme chip - $theme-chip-size: 1.8rem; - // empty space inside the chip (relative to the chip size) - $theme-chip-void: 1.2rem; - // size of the inner (checked) circle (relative to the chip void) - $theme-chip-inner: .6rem; - - - #home { position: relative; top: 0; @@ -96,7 +34,7 @@ width: $width; height: $height; - background: #ededed; + background: #07142d; } @keyframes wave-x { @@ -127,98 +65,4 @@ z-index: 900; } - .themes { - display: flex; - position: relative; - top: calc( #{$height} - #{$wave-height} ); - width: $width; - - flex-flow: row wrap; - justify-content: center; - align-items: center; - - transform: translateY(-100%); - - input[type=radio]{ - display: none; - } - - h2 { - flex: 100%; - text-align: center; - margin-bottom: 1rem; - } - - & > label { - display: flex; - position: relative; - width: $theme-chip-size; - height: $theme-chip-size; - - justify-content: center; - align-items: center; - - margin: 0 #{$theme-chip-spacing}; - - cursor: pointer; - - transition: transform .2s ease-in; - - svg { - width: 100%; - height: 100%; - } - - svg circle { - opacity: 0; - - transition: opacity .1s ease-in-out; - } - - } - - label:nth-child(2) { margin-left: 0; } - label:last-child { margin-right: 0; } - - input:checked + label svg circle { - opacity: 1; - } - - // define our custom svg gradients - #blue-gradient { - --color0: #3d4ba3; - --color1: #5768f8; - } - #orange-gradient { - --color0: #fcb67b; - --color1: #c54556; - } - #green-gradient { - --color0: #00d89f; - --color1: #00a2d8; - } - - input[value='black_white'] + label { - circle, path{ fill: #1a1a1a; } - } - input[value='blue'] + label { - circle, path{ fill: url(#blue-gradient); } - } - input[value='forest'] + label { - circle, path{ fill: url(#orange-gradient); } - } - input[value='glass'] + label { - circle, path{ fill: url(#green-gradient); } - } - - z-index: 1000; - } - - #banner-container { - position: absolute; - top: 0; - left: 0; - width: $width; - height: $height; - } diff --git a/src/components/Skills.vue b/src/components/Skills.vue deleted file mode 100644 index a49dac1..0000000 --- a/src/components/Skills.vue +++ /dev/null @@ -1,183 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue new file mode 100644 index 0000000..1620f5f --- /dev/null +++ b/src/components/Timeline.vue @@ -0,0 +1,317 @@ + + + + + + \ No newline at end of file diff --git a/src/model/projects.ts b/src/model/projects.ts new file mode 100644 index 0000000..bf5179a --- /dev/null +++ b/src/model/projects.ts @@ -0,0 +1,73 @@ +import { tID as s } from './skills'; + +export interface Link { + name: string; + link: string; +} + +export interface Project { + name: string; + skills: s[]; + client: string|null; + started_at: Date; + stopped_at: Date|null; + info: string; + source: Link|null; + doc: Link|null; + commits: number; +} + +export const Projects: Project[] = [ + { + name: 'Angular module system', + client: 'Marlink', + skills: [s.Angular, s.RnD, s.Concurrency, s.Html, s.Css, s.Inkscape, s.UIUX, s.Ts, s.Js, s.Ajax, s.Cordova, s.Bash, s.Git, s.Rest, s.Rpm, s.Vue, s.Web, s.Docker], + started_at: new Date(2019, 10, 26), + stopped_at: new Date(2021, 4, 11), + info: 'Prototype for a front-end Angular modular system. I technically and visually designed a kind of app store. Hacked angular to allow injecting custom pages and code on-the-go.', + source: null, doc: null, + commits: 0, // ??? + }, + { + name: 'EarthMap', + client: 'Collins Aerospace', + skills: [s.Qt, s.RnD, s.Cpp, s.Concurrency, s.Git, s.Css, s.Inkscape, s.UIUX], + started_at: new Date(2019, 10, 26), + stopped_at: new Date(2021, 4, 11), + info: 'TODO', + source: null, doc: null, + commits: 840, + }, + { + name: 'ADSBOnPED', + client: 'Collins Aerospace', + skills: [s.Qt, s.RnD, s.Cpp, s.Concurrency, s.Git, s.Css, s.Bash, s.Linux, s.Inkscape, s.UIUX], + started_at: new Date(2020, 7, 16), + stopped_at: null, + info: 'TODO', + source: null, doc: null, + commits: 1897 + 62, + }, + { + name: 'EasyCom', + client: 'Medwin | Vygon', + skills: [s.Go, s.Rest, s.Concurrency, s.Git, s.Bash, s.Linux, s.Docker, s.Crypto, s.Postgres, s.Opti, s.Websocket, s.Inkscape, s.UIUX], + started_at: new Date(2021, 1, 6), + stopped_at: new Date(2022, 11, 1), + info: 'TODO', + source: null, doc: null, + commits: 1260+90 + 41+1 + 12+1 + 14, + }, + + { + name: 'aicra', + client: null, + skills: [s.Go, s.Web, s.Rest, s.OpenSource, s.Git, s.Inkscape], + started_at: new Date(2018, 5, 19), + stopped_at: null, // still active + info: 'Started as a personal go library to ease REST API development. The main goal is to greatly enhance maintainability by providing a single configuration file that describes every endpoint of the API. Everything that can be automated is while staying idiomatic to go. Aicra automates routing, parameter validation and extraction, permission management, response output formatting. I then used it for a professional project in the medical field after corporate evaluation and audit.', + source: { name: 'github.com/xdrm-io/aicra', link: 'https://github.com/xdrm-io/aicra' }, + doc: { name: 'pkg.go.dev/github.com/xdrm-io/aicra', link: 'https://pkg.go.dev/github.com/xdrm-io/aicra' }, + commits: 535, + }, +]; diff --git a/src/model/skills.ts b/src/model/skills.ts index bc787b1..00d34ac 100644 --- a/src/model/skills.ts +++ b/src/model/skills.ts @@ -1,41 +1,290 @@ -export default [ - { - title: 'Web', - keywords: [ 'languages', 'technologies' ], - skills: [ - { label: 'MariaDB', link: 'https://mariadb.org/', level: 0.6 }, - { label: 'Postgres', link: 'https://postgresql.org/', level: 0.8 }, - { label: 'MongoDB', link: 'https://mongodb.com/', level: 0.5 }, - { label: 'Vue (.js)', link: 'https://vuejs.org/', level: 0.8 }, - { label: 'Angular (7+)', link: 'https://angular.io/', level: 0.3 }, - { label: 'WebGL', link: 'https://www.khronos.org/webgl/', level: 0.3 }, - { label: 'Audio API', link: 'https://webaudio.github.io/web-audio-api/', level: 0.5 }, - { label: 'Websocket', link: 'https://tools.ietf.org/html/rfc6455', level: 1 }, - ], +export enum tID { + MariaDB, + Postgres, + Mongo, + Vue, + Angular, + Parcel, + Cordova, + Webpack, + WebGL, + AudioAPI, + Websocket, + Docker, + Bash, + Linux, + Systemd, + Git, + Rpm, + RaspBerry, + Arduino, + Php, + Html, + Css, + Js, + Ajax, + Ts, + C, + Cpp, + Python, + Go, + Qt, + OpenSource, + Electronics, + Web, + Rest, + Crypto, + ImageProcessing, + AI, + DeepLearning, + NeuralNetwork, + Opti, + Sockets, + Concurrency, + UIUX, + Inkscape, + RnD, +} + +interface tSkill { + icon: string; + name: string; + link: string; +} + +export type tSkills = { [id in tID]: tSkill }; + +export const Skills: tSkills = { + [tID.MariaDB]: { + name: 'MariaDB', + link: 'https://mariadb.org', + icon: 'skills/mariadb.svg', }, - { - title: 'Sys', - keywords: ['languages', 'technologies'], - skills: [ - { label: 'Linux/bash', link: 'https://www.gnu.org/software/bash/', level: 1 }, - { label: 'docker', link: 'https://www.docker.com/', level: 0.8 }, - { label: 'systemd', link: 'https://freedesktop.org/wiki/Software/systemd/', level: 1 }, - { label: 'git', link: 'https://git-scm.com/', level: 0.8 }, - { label: 'raspberry', link: 'https://www.raspberrypi.org/', level: 0.8 }, - { label: 'arduino', link: 'https://www.arduino.cc/', level: 0.5 }, - { label: 'RPM packaging', link: 'https://rpm.org/', level: 0.7 }, - ], + [tID.Postgres]: { + name: 'PostgreSQL', + link: 'https://postgresql.org', + icon: 'skills/postgres.svg', }, - { - title: 'Misc', - keywords: ['frameworks', 'api', 'dependencies'], - skills: [ - { label: 'PHP', link: 'https://www.php.net/', level: 0.9 }, - { label: 'HTML/CSS', link: 'https://www.w3.org/standards/webdesign/htmlcss', level: 1 }, - { label: 'Typescript', link: 'https://www.typescriptlang.org/', level: 0.6 }, - { label: 'C/C++', link: 'https://isocpp.org/', level: 0.8 }, - { label: 'Python', link: 'https://www.python.org/', level: 0.3 }, - { label: 'go', link: 'https://golang.org/', level: 1 }, - ], + [tID.Mongo]: { + name: 'MongoDB', + link: 'https://mongodb.com', + icon: 'skills/mongo.svg', }, -]; + + [tID.Vue]: { + name: 'Vue (.js)', + link: 'https://vuejs.org', + icon: 'skills/vue.svg', + }, + [tID.Angular]: { + name: 'Angular (7+)', + link: 'https://angular.io', + icon: 'skills/angular.svg', + }, + [tID.Parcel]: { + name: 'Parcel', + link: 'https://parceljs.org/', + icon: 'skills/parcel.svg', + }, + [tID.Cordova]: { + name: 'Apache Cordova', + link: 'https://cordova.apache.org/', + icon: 'skills/cordova.svg', + }, + [tID.Webpack]: { + name: 'Webpack', + link: 'https://webpack.js.org/', + icon: 'skills/webpack.svg', + }, + + [tID.WebGL]: { + name: 'WebGL', + link: 'https://www.khronos.org/webgl/', + icon: 'skills/web-gl.svg', + }, + [tID.AudioAPI]: { + name: 'Audio API', + link: 'https://webaudio.github.io/web-audio-api/', + icon: 'skills/audio-api.svg', + }, + [tID.Websocket]: { + name: 'Websocket', + link: 'https://tools.ietf.org/html/rfc6455', + icon: 'skills/websocket.svg', + }, + + [tID.Docker]: { + name: 'Docker', + link: 'https://docker.com', + icon: 'skills/docker.svg', + }, + [tID.Bash]: { + name: 'bash', + link: 'https://www.gnu.org/software/bash/', + icon: 'skills/bash.svg', + }, + [tID.Linux]: { + name: 'GNU/Linux', + link: 'https://www.linux.org', + icon: 'skills/linux.svg', + }, + [tID.Systemd]: { + name: 'systemd', + link: 'https://freedesktop.org/wiki/Software/systemd/', + icon: 'skills/systemd.svg', + }, + [tID.Git]: { + name: 'Git', + link: 'https://git-scm.com/', + icon: 'skills/git.svg', + }, + [tID.Rpm]: { + name: 'RPM packaging', + link: 'https://rpm.org/', + icon: 'skills/rpm.svg', + }, + + [tID.RaspBerry]: { + name: 'Raspberry', + link: 'https://raspberrypi.org', + icon: 'skills/raspberry.svg', + }, + [tID.Arduino]: { + name: 'Arduino', + link: 'https://arduino.cc', + icon: 'skills/arduino.svg', + }, + + [tID.Php]: { + name: 'PHP', + link: 'https://www.php.net', + icon: 'skills/php.svg', + }, + [tID.Html]: { + name: 'HTML5', + link: 'https://www.w3.org/standards/webdesign/htmlcss', + icon: 'skills/html.svg', + }, + [tID.Css]: { + name: 'CSS3', + link: 'https://www.w3.org/standards/webdesign/htmlcss', + icon: 'skills/css.svg', + }, + [tID.Js]: { + name: 'Javascript', + link: 'http://www.ecma-international.org/publications-and-standards/standards/ecma-262/', + icon: 'skills/js.svg', + }, + [tID.Ajax]: { + name: 'AJAX', + link: 'https://www.w3schools.com/xml/ajax_intro.asp', + icon: 'skills/ajax.svg', + }, + [tID.Ts]: { + name: 'Typescript', + link: 'https://www.typescript.org/', + icon: 'skills/ts.svg', + }, + [tID.C]: { + name: 'C (lang)', + link: 'https://www.open-std.org/jtc1/sc22/wg14/', + icon: 'skills/c.svg', + }, + [tID.Cpp]: { + name: 'C++', + link: 'https://isocpp.org/', + icon: 'skills/cpp.svg', + }, + [tID.Python]: { + name: 'Python', + link: 'https://python.org/', + icon: 'skills/python.svg', + }, + [tID.Go]: { + name: 'Go (lang)', + link: 'https://go.dev', + icon: 'skills/go.svg', + }, + + [tID.Qt]: { + name: 'Qt', + link: 'https://qt.io', + icon: 'skills/qt.svg', + }, + + [tID.OpenSource]: { + name: 'Open-source', + link: 'https://opensource.org/', + icon: 'skills/open-source.svg', + }, + [tID.Electronics]: { + name: 'Electronics', + link: 'https://en.wikipedia.org/wiki/Electronics', + icon: 'skills/electronics.svg', + }, + [tID.Web]: { + name: 'Web', + link: 'https://en.wikipedia.org/wiki/World_Wide_Web', + icon: 'skills/web.svg', + }, + [tID.Rest]: { + name: 'REST', + link: 'https://en.wikipedia.org/wiki/Representational_state_transfer', + icon: 'skills/rest.svg', + }, + [tID.Crypto]: { + name: 'Cryptography', + link: 'https://en.wikipedia.org/wiki/Cryptography', + icon: 'skills/crypto.svg', + }, + [tID.ImageProcessing]: { + name: 'Image processing', + link: 'https://en.wikipedia.org/wiki/Digital_image_processing', + icon: 'skills/image-processing.svg', + }, + [tID.AI]: { + name: 'Artificial Intelligence', + link: 'https://en.wikipedia.org/wiki/Artificial_intelligence', + icon: 'skills/ai.svg', + }, + [tID.DeepLearning]: { + name: 'Deep Learning', + link: 'https://en.wikipedia.org/wiki/Deep_learning', + icon: 'skills/deep-learning.svg', + }, + [tID.NeuralNetwork]: { + name: 'Neural Networks', + link: 'https://en.wikipedia.org/wiki/Artificial_neural_network', + icon: 'skills/neural-network.svg', + }, + [tID.Opti]: { + name: 'Program optimization', + link: 'https://en.wikipedia.org/wiki/Program_optimization', + icon: 'skills/opti.svg', + }, + [tID.Sockets]: { + name: 'Sockets', + link: 'https://en.wikipedia.org/wiki/Computer_network_programming', + icon: 'skills/sockets.svg', + }, + [tID.Concurrency]: { + name: 'Concurrent programming', + link: 'https://en.wikipedia.org/wiki/Concurrent_computing', + icon: 'skills/concurrency.svg', + }, + [tID.UIUX]: { + name: 'UI/UX', + link: 'https://en.wikipedia.org/wiki/UX', + icon: 'skills/ux.svg', + }, + [tID.Inkscape]: { + name: 'Inkscape', + link: 'https://inkscape.org/', + icon: 'skills/inkscape.svg', + }, + [tID.RnD]: { + name: 'R&D', + link: 'https://en.wikipedia.org/wiki/R&D', + icon: 'skills/rnd.svg', + }, +};