diff --git a/.idea/dictionaries/Schme.xml b/.idea/dictionaries/Schme.xml
new file mode 100644
index 0000000..7256af4
--- /dev/null
+++ b/.idea/dictionaries/Schme.xml
@@ -0,0 +1,7 @@
+
+
+
+ raleway
+
+
+
\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index b5e959a..aaea7ba 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -41,5 +41,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index fec098c..47a5585 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,30 +2,64 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -38,6 +72,7 @@
+
@@ -54,7 +89,7 @@
-
+
@@ -62,11 +97,14 @@
-
-
-
+
+
+
+
+
+
@@ -97,7 +135,11 @@
-
+
+
+
+
+
diff --git a/custom.d.ts b/custom.d.ts
index d623c6f..f527fb3 100644
--- a/custom.d.ts
+++ b/custom.d.ts
@@ -1,24 +1,29 @@
declare module "*.svg" {
- const content: string;
- export default content;
+ const content: string;
+ export default content;
}
declare module "*.png" {
- const content: string;
- export default content;
+ const content: string;
+ export default content;
}
declare module "*.jpg" {
- const content: string;
- export default content;
+ const content: string;
+ export default content;
}
declare module "*.jpeg" {
- const content: string;
- export default content;
+ const content: string;
+ export default content;
}
declare module "*.gif" {
- const content: string;
- export default content;
+ const content: string;
+ export default content;
+}
+
+declare module "*.mp4" {
+ const content: string;
+ export default content;
}
diff --git a/package.json b/package.json
index e0460a0..79101c3 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "start": "webpack-dev-server --mode development",
"build": "webpack"
},
"repository": {
@@ -25,11 +26,13 @@
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"prettier": "^1.19.1",
+ "resolve-url-loader": "^3.1.1",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.2",
"ts-loader": "^6.2.1",
"typescript": "^3.7.3",
"webpack": "^4.41.4",
- "webpack-cli": "^3.3.10"
+ "webpack-cli": "^3.3.10",
+ "webpack-dev-server": "^3.10.1"
}
}
diff --git a/src/content/en.ts b/src/content/en.ts
index cafb688..fa9c46c 100644
--- a/src/content/en.ts
+++ b/src/content/en.ts
@@ -1,34 +1,41 @@
-import me from "../static/me.jpg";
-import forex from "../static/forex.gif";
-import myNotes from "../static/my-notes.jpg";
-import processSimulator from "../static/process-simulator.jpg";
-import processSimulatorInput from "../static/process-simulator-input.jpg";
-import citySimulation from "../static/simulation.jpg";
-import color from "../static/color.jpg";
-import platform from "../static/platform.png";
-import photos from "../static/photos.jpg";
-import led from "../static/led.jpg";
+import { Portfolio } from "../model/portfolio";
+import me from "../static/media/me.jpg";
+import forex from "../static/media/forex.gif";
+import myNotes from "../static/media/my-notes.jpg";
+import processSimulator from "../static/media/process-simulator.jpg";
+import processSimulatorInput from "../static/media/process-simulator-input.jpg";
+import citySimulation from "../static/media/simulation.jpg";
+import color from "../static/media/color.jpg";
+import platform from "../static/media/platform.png";
+import photos from "../static/media/photos.jpg";
+import led from "../static/media/led.jpg";
+import ledVideo from "../static/media/led720.mp4";
-export const content = {
+export const portfolio: Portfolio = {
config: {
showMore: "Show details",
- showLess: "Show less"
+ showLess: "Show less",
+ aPictureOf: "a picture of",
+ cvName: "Curriculum vitae"
},
header: {
name: "András Schmelczer",
picture: me,
about: [
- "I have always been fascinated by the engineering feats that surround us. When I realized that someday I might be able to contribute to these achievements, I knew that is what I need to aim for. As I am finishing my fifth semester at the Budapest University of Technology and Economics, I feel I am getting closer to it every day.",
- "You can see some of the more interesting projects I have worked on below."
+ `I have always been fascinated by the engineering feats that surround us.
+ When I realized that someday I might be able to contribute to these achievements,
+ I knew that is what I need to aim for. As I am finishing my fifth semester at the
+ Budapest University of Technology and Economics, I feel I am getting closer to it every day.`,
+ `You can see some of the more interesting projects I have worked on below.`
]
},
timeline: [
{
- date: "2019 Autumn",
title: "Predicting foreign exchange rates",
+ date: "2019 Autumn",
picture: forex,
- description:
- "From the animation we can see that my algorithm does a somewhat acceptable job at predicting (blue graph) the EUR/USD rates (green graph).",
+ description: `From the animation we can see that my algorithm does a somewhat acceptable job at
+ predicting (blue graph) the EUR/USD rates (green graph).`,
more: [
"In a nutshell, the algorithm (written with Python - NumPy, SciPy, Flask), extrapolates in the frequency domain. The steps are the following: smoothing the input values, differentiating, applying a short-time Fourier-transformation with overlapped (and Hanning-windowed) windows, extrapolating and then applying the inverse of these transformations to the extrapolated values.",
"Of course, there is still plenty of room for improvement, but even with this simple algorithm a mostly profitable trading strategy is viable. In my free time I may put more work into it."
@@ -127,12 +134,12 @@ export const content = {
"This was my first non-trivial project which got finished. Obviously, it is rather far from perfect, but I am still proud that I was able to build it on my own.",
"The backend logic is written in Python the FFT is provided by NumPy. A quite simple frontend for accessing the music player and changing the settings also got built using vanilla web development technologies.",
"Below is a video showing the system in work.",
- { type: "video", src: "static/led720.mp4" }
+ { type: "video", src: ledVideo }
]
}
],
footer: {
email: "andras.schmelczer@schdesign.hu",
- cv: "/static/andras_schmelczer_cv.pdf"
+ cv: "/static/media/andras_schmelczer_cv.pdf"
}
};
diff --git a/src/framework/element-factory.ts b/src/framework/element-factory.ts
new file mode 100644
index 0000000..d2b13c1
--- /dev/null
+++ b/src/framework/element-factory.ts
@@ -0,0 +1,7 @@
+import { html } from "../model/misc";
+
+export const createElement = (from: html): HTMLElement => {
+ const element: HTMLElement = document.createElement("div");
+ element.innerHTML = from;
+ return element.firstElementChild as HTMLElement;
+};
diff --git a/src/framework/helpers.ts b/src/framework/helpers.ts
new file mode 100644
index 0000000..68af962
--- /dev/null
+++ b/src/framework/helpers.ts
@@ -0,0 +1,2 @@
+export const show = (e: HTMLElement) => (e.style.display = "block");
+export const hide = (e: HTMLElement) => (e.style.display = "none");
diff --git a/src/framework/page-element.ts b/src/framework/page-element.ts
new file mode 100644
index 0000000..9880ea7
--- /dev/null
+++ b/src/framework/page-element.ts
@@ -0,0 +1,16 @@
+export abstract class PageElement {
+ // Getter and setter accessors would have to agree in visibility
+ public getElement(): HTMLElement {
+ return this._element;
+ }
+ private _element: HTMLElement;
+ protected setElement(value: HTMLElement) {
+ this._element = value;
+ }
+
+ protected constructor(private children: Array = []) {}
+
+ public onAfterLoad(parent: HTMLElement) {
+ this.children.forEach(c => c.onAfterLoad(this.getElement()));
+ }
+}
diff --git a/src/index.html b/src/index.html
index 3025e8b..6a78e90 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,20 +16,5 @@
Portfolio
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-