-
-
-
- 
-
-
+ ${name}
-${name}
`
+
`
)
@@ -26,3 +31,4 @@ export const generate = (
}
`;
+};
diff --git a/src/page/background/background.scss b/src/page/background/background.scss
index cfd25c5..3669d40 100644
--- a/src/page/background/background.scss
+++ b/src/page/background/background.scss
@@ -18,6 +18,8 @@
top: 0;
width: 160px;
+ transition: transform $slow-transition-time;
+
&.animated {
animation: fade-in 1s linear forwards;
@keyframes fade-in {
diff --git a/src/page/background/background.ts b/src/page/background/background.ts
index b3740cb..6d57072 100644
--- a/src/page/background/background.ts
+++ b/src/page/background/background.ts
@@ -2,94 +2,117 @@ import { PageElement } from "../../framework/page-element";
import { generate } from "./background.html";
import {
choose,
+ getHeight,
createElement,
randomFactory,
randomInInterval,
- sum
+ sum,
+ mixColors
} from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
export class PageBackground extends PageElement {
- private colors = ["#fff9e077", "#ffd6d677"];
- private blobSize = 150; // with margin
+ private colors = ["#fff9e0", "#ffd6d6"];
+ private blobSpacing = 200;
private perspective = 5;
private currentRealHeight = 0;
private currentRealWidth = 0;
private currentBlobCount = 0;
- public constructor() {
+ public constructor(private start: PageElement, private end: PageElement) {
super();
this.setElement(createElement(generate(0)));
}
protected handleEvent(event: PageEvent, parent: PageElement) {
if (event.type === PageEventType.onLoad) {
- window.addEventListener("resize", this.resize.bind(this, parent));
- window.addEventListener("load", this.resize.bind(this, parent));
+ this.bindListeners(parent);
} else if (event.type === PageEventType.onBodyDimensionsChanged) {
this.resize(parent);
}
}
+ private bindListeners(parent: PageElement) {
+ window.addEventListener("resize", this.resize.bind(this, parent));
+ window.addEventListener("load", this.resize.bind(this, parent));
+ }
+
private resize(parent: PageElement) {
const siblings: Array = Array.prototype.slice
.call(parent.getElement().children)
.filter(e => e !== this.getElement());
- const width = document.body.clientWidth;
-
- const height = sum(
- siblings.map(c => {
- const computedStyle = window.getComputedStyle(c);
- return (
- // ignores margin collapse
- c.clientHeight +
- parseInt(computedStyle.marginTop) +
- parseInt(computedStyle.marginBottom) +
- parseInt(computedStyle.borderTopWidth) +
- parseInt(computedStyle.borderBottomWidth)
- );
- })
- );
+ const width = parent.getElement().clientWidth;
+ const height = sum(siblings.map(getHeight));
if (height > this.currentRealHeight || width > this.currentRealWidth) {
this.currentRealHeight = height;
this.currentRealWidth = width;
- const random = randomFactory(44);
+ const random = randomFactory(46);
- const count = Math.round((width * height) / this.blobSize ** 2);
+ const zMin = 20;
+ const zMax = 40;
- const randomWithKnownZ = (z: number, bound: number): number => {
- const l = (bound * (this.perspective + z)) / this.perspective;
- return randomInInterval(
- -(l / 2 - bound / 2),
- l / 2 + bound / 2,
- random
- );
+ const count = Math.round((width * height) / this.blobSpacing ** 2);
+
+ const randomWithKnownZ = (
+ z: number,
+ viewportSize: number,
+ scrollSize: number,
+ startOffset = 0,
+ endOffset = 0
+ ): number => {
+ const m = 1 + z / this.perspective;
+
+ const variableOffset = (offset, q) =>
+ offset - ((z - zMin) / (zMax - zMin)) * (offset * q);
+
+ startOffset = variableOffset(startOffset, 0.6);
+ endOffset = variableOffset(endOffset, 0.2);
+
+ const lowerBound =
+ viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
+ const l =
+ scrollSize -
+ viewportSize +
+ (viewportSize - startOffset - endOffset) * m;
+
+ return randomInInterval(lowerBound, lowerBound + l, random);
};
this.setElement(
createElement(
generate(
count,
- () => choose(this.colors, random),
+ () => randomInInterval(zMin, zMax, random),
+ z =>
+ "#" +
+ mixColors(
+ "#ffffff",
+ choose(this.colors, random),
+ (z - zMin) / (zMax - zMin)
+ ),
() => randomInInterval(160, 750, random),
i => i >= this.currentBlobCount,
- () => {
- const z = randomInInterval(-12, -25, random);
- return `
- translateX(${randomWithKnownZ(-z, width)}px)
- translateY(${randomWithKnownZ(-z, height)}px)
- translateZ(${z}px)
+ z => `
+ translateX(${randomWithKnownZ(z, width, width)}px)
+ translateY(${randomWithKnownZ(
+ z,
+ parent.getElement().clientHeight,
+ height,
+ getHeight(this.start.getElement()),
+ getHeight(this.end.getElement())
+ )}px)
+ translateZ(${-z}px)
rotate(-20deg)
- `;
- }
+ `
)
)
);
this.currentBlobCount = count;
+ console.log(count);
}
this.getElement().style.width = `${width}px`;
this.getElement().style.height = `${height}px`;
diff --git a/src/page/content/content.scss b/src/page/content/content.scss
index 52ea1a3..a442235 100644
--- a/src/page/content/content.scss
+++ b/src/page/content/content.scss
@@ -1,10 +1,10 @@
-@use "../../style/vars";
+@import "../../style/vars";
.content {
- margin-top: vars.$small-margin;
+ margin-top: $small-margin;
* {
- margin-top: vars.$line-height;
+ margin-top: $line-height;
}
p {
diff --git a/src/page/footer/footer.scss b/src/page/footer/footer.scss
index a79d4f4..8982263 100644
--- a/src/page/footer/footer.scss
+++ b/src/page/footer/footer.scss
@@ -4,10 +4,10 @@
footer#page-footer {
text-align: center;
- margin: $small-margin auto 0 auto;
+ margin: $normal-margin auto 0 auto;
padding: $normal-margin $normal-margin $line-height $normal-margin;
width: 100%;
- backdrop-filter: blur($blur-radius);
+ // backdrop-filter: blur($blur-radius);
h2 {
@include title-font();
@@ -16,7 +16,7 @@ footer#page-footer {
ul {
list-style: none;
display: inline-block;
- margin-top: $normal-margin;
+ margin-top: calc(#{$small-margin} / 2 + #{$normal-margin} / 2);
text-align: left;
li {
@@ -40,7 +40,7 @@ footer#page-footer {
aside.other {
@include center-children();
- margin: $normal-margin auto 0 auto;
+ margin: calc(2 * #{$normal-margin}) auto 0 auto;
width: $body-width;
h6 {
diff --git a/src/page/image-viewer/image-viewer.ts b/src/page/image-viewer/image-viewer.ts
index 0991ba1..82e5e8a 100644
--- a/src/page/image-viewer/image-viewer.ts
+++ b/src/page/image-viewer/image-viewer.ts
@@ -9,7 +9,7 @@ export class PageImageViewer extends PageElement {
super();
const root = createElement(generate());
this.setElement(root);
- this.query("#cancel").onclick = () => PageImageViewer.hide(root);
+ root.onclick = () => PageImageViewer.hide(root);
}
protected handleEvent(event: PageEvent, parent: PageElement) {
diff --git a/src/page/index.ts b/src/page/index.ts
index 9a7df0d..1653af5 100644
--- a/src/page/index.ts
+++ b/src/page/index.ts
@@ -8,15 +8,19 @@ import { Page } from "../framework/page";
export const create = ({ config, header, timeline, footer }: Portfolio) => {
document.title = header.name;
+ const pageHeader = new PageHeader(header, config.aPictureOf);
+ const pageFooter = new PageFooter(footer);
+
+ const bg = new PageBackground(pageHeader, pageFooter);
new Page(
[
new PageImageViewer(),
new Page(
[
- new PageBackground(),
- new PageHeader(header, config.aPictureOf),
+ pageHeader,
new PageTimeline(timeline, config.showMore, config.showLess),
- new PageFooter(footer)
+ pageFooter,
+ bg
],
document.body.querySelector("main"),
false
diff --git a/src/portfolio.ts b/src/portfolio.ts
index 5b4febe..ad03244 100644
--- a/src/portfolio.ts
+++ b/src/portfolio.ts
@@ -1,6 +1,6 @@
import { Portfolio } from "./model/portfolio";
-import me from "./static/media/me-2.jpg";
+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";
diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index 40857ee..2805bb0 100644
--- a/src/style/mixins.scss
+++ b/src/style/mixins.scss
@@ -35,19 +35,20 @@
}
@mixin title-font() {
- font: 400 3.33rem "Raleway", serif;
+ font: 400 3.5rem "Montserrat", serif;
}
@mixin sub-title-font() {
- font: 400 2rem "Raleway", serif;
+ font: 400 1.9rem "Montserrat", serif;
}
@mixin main-font() {
- font: 400 18px "Open sans", sans-serif;
- line-height: 1.5;
+ font: 400 1.25rem "Lato", sans-serif;
+ line-height: 1.6;
+ text-align: justify;
}
@mixin insignificant-font() {
- font: 400 16px "Open sans", sans-serif;
+ font: 400 1rem "Lato", sans-serif;
font-style: italic;
}
diff --git a/src/style/vars.scss b/src/style/vars.scss
index 3b6aec6..1cedf77 100644
--- a/src/style/vars.scss
+++ b/src/style/vars.scss
@@ -2,6 +2,7 @@
$background-start: white;
$background-end: white;
$background: white;
+$background-gradient: linear-gradient(90deg, #fff9e0 0, #ffd6d6 100%);
$normal-text-color: #31343f;
$light-text-color: #7a7d8e;
@@ -21,7 +22,7 @@ $normal-margin: var(--normal-margin);
$small-margin: var(--small-margin);
$line-height: 2ch;
-$blur-radius: 6px;
+$blur-radius: 9px;
$icon-size: var(--icon-size);
$body-width: var(--body-width);
@@ -29,7 +30,7 @@ $body-width: var(--body-width);
--line-width: 3px;
--normal-margin: 45px;
--small-margin: 25px;
- --icon-size: 25px;
+ --icon-size: 35px;
--body-width: 765px;
@media (max-width: $breakpoint-width) {
diff --git a/src/styles.scss b/src/styles.scss
index 2d6b622..88bf30c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,9 @@
padding: 0;
box-sizing: border-box;
color: $normal-text-color;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
hyphens: auto;
}
@@ -20,7 +23,7 @@
}
html {
- background-color: $background;
+ background-color: white;
height: 100%;
}
@@ -34,16 +37,19 @@ body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
+ perspective-origin: center center;
perspective: 5px;
- &::-webkit-scrollbar-track,
- &::-webkit-scrollbar {
- background-color: transparent;
- width: 12px;
- }
- &::-webkit-scrollbar-thumb {
- background-color: $accent-color;
- border-radius: $border-radius;
+ @media (min-width: $breakpoint-width) {
+ &::-webkit-scrollbar-track,
+ &::-webkit-scrollbar {
+ background-color: transparent;
+ width: 12px;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: $accent-color;
+ border-radius: $border-radius;
+ }
}
& > * {
diff --git a/webpack.config.js b/webpack.config.js
index 1c3b3ae..bb72d6e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,18 +1,23 @@
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
watchOptions: {
ignored: /node_modules/
},
+ devServer: {
+ host: "0.0.0.0"
+ },
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: true,
xhtml: true,
template: "./src/index.html"
- })
+ }),
+ new MiniCssExtractPlugin()
],
entry: {
index: "./src/index.ts"
@@ -52,7 +57,7 @@ module.exports = {
test: /\.scss$/i,
use: [
{
- loader: "style-loader"
+ loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"