andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Kind of works

Browse source
This commit is contained in:
Schmelczer András 2020-01-11 09:14:52 +01:00
parent 0429ea7f72
commit 65c0e3469e
6 changed files with 64 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

69
.idea/workspace.xml generated
View file

@ -2,70 +2,12 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment=""> <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/framework/framework.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/styles/dark-mode/dark-mode.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/styles/index.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/styles/wrapper.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/static/media/my-notes.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/style/_id.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/style/configured-responsive.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/style/include.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/custom.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/custom.d.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/container-page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/container-page.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/event-broadcaster.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/events/event-broadcaster.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/animations/animations.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/styles/animations/animations.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/animations/animations.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/styles/animations/animations.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/create-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/create-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/dark-mode.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/styles/dark-mode/dark-mode.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/index.scss" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page-event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/events/page-event.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/image.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/image.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/text.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/text.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/video.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/video.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/primitive.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/primitive.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/primitives.scss" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/misc.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/model/misc.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/static/media/my-notes.jpg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/fonts.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -183,7 +125,8 @@
<workItem from="1578472848376" duration="13670000" /> <workItem from="1578472848376" duration="13670000" />
<workItem from="1578556192921" duration="3098000" /> <workItem from="1578556192921" duration="3098000" />
<workItem from="1578559306201" duration="8231000" /> <workItem from="1578559306201" duration="8231000" />
<workItem from="1578641947739" duration="23098000" /> <workItem from="1578641947739" duration="28021000" />
<workItem from="1578727663054" duration="2241000" />
</task> </task>
<servers /> <servers />
</component> </component>
@ -223,10 +166,14 @@
<screen x="0" y="27" width="2560" height="1053" /> <screen x="0" y="27" width="2560" height="1053" />
</state> </state>
<state x="1664" y="411" width="502" height="292" key="ANALYSIS_DLG_com.intellij.analysis.BaseAnalysisAction$1/0.27.2560.1053@0.27.2560.1053" timestamp="1578563647005" /> <state x="1664" y="411" width="502" height="292" key="ANALYSIS_DLG_com.intellij.analysis.BaseAnalysisAction$1/0.27.2560.1053@0.27.2560.1053" timestamp="1578563647005" />
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1578659707248"> <state x="1380" y="127" width="1080" height="853" key="DiffContextDialog" timestamp="1578686003357">
<screen x="0" y="27" width="2560" height="1053" /> <screen x="0" y="27" width="2560" height="1053" />
</state> </state>
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.27.2560.1053@0.27.2560.1053" timestamp="1578659707248" /> <state x="1380" y="127" width="1080" height="853" key="DiffContextDialog/0.27.2560.1053@0.27.2560.1053" timestamp="1578686003357" />
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1578687009013">
<screen x="0" y="27" width="2560" height="1053" />
</state>
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.27.2560.1053@0.27.2560.1053" timestamp="1578687009013" />
<state x="1603" y="289" width="774" height="677" key="find.popup" timestamp="1578682206106"> <state x="1603" y="289" width="774" height="677" key="find.popup" timestamp="1578682206106">
<screen x="0" y="27" width="2560" height="1053" /> <screen x="0" y="27" width="2560" height="1053" />
</state> </state>

4
src/index.html
View file

@ -17,8 +17,6 @@
<title>Portfolio - András Schmelczer</title> <title>Portfolio - András Schmelczer</title>
</head> </head>
<body> <body>
<div class="main"> <!-- for IE11 --> <noscript><h1>Javascript is required for this website.</h1></noscript>
<noscript><h1>Javascript is required for this website.</h1></noscript>
</div>
</body> </body>
</html> </html>

8
src/page/background/background.scss
View file

@ -3,8 +3,8 @@
@include responsive() using ($vars) { @include responsive() using ($vars) {
div.background-element { div.background-element {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
border-radius: 100px; border-radius: 100px;
width: 140px; width: 140px;
@ -16,12 +16,6 @@
} }
} }
@media print {
& {
display: none;
}
}
transition: transform map_get($vars, $transition-time), transition: transform map_get($vars, $transition-time),
opacity map_get($vars, $transition-time), opacity map_get($vars, $transition-time),
background-color map_get($vars, $transition-time); background-color map_get($vars, $transition-time);

14
src/page/background/background.ts
View file

@ -9,7 +9,11 @@ export class PageBackground extends PageElement {
private readonly blobs: Array<Blob> = []; private readonly blobs: Array<Blob> = [];
private readonly blobSpacing = 350; private readonly blobSpacing = 350;
public constructor(private start: PageElement, private end: PageElement) { public constructor(
private readonly start: PageElement,
private readonly inBetween: Array<PageElement>,
private readonly end: PageElement
) {
super(); super();
Blob.initialize(10, 30, 5); Blob.initialize(10, 30, 5);
} }
@ -35,7 +39,7 @@ export class PageBackground extends PageElement {
} }
private resize(parent: PageElement, heightChange?: number) { private resize(parent: PageElement, heightChange?: number) {
const siblings: Array<HTMLElement> = PageBackground.getSiblings(parent); const siblings: Array<HTMLElement> = this.getSiblings();
const width = document.body.clientWidth; const width = document.body.clientWidth;
let height = sum(siblings.map(getHeight)); let height = sum(siblings.map(getHeight));
@ -72,9 +76,7 @@ export class PageBackground extends PageElement {
}); });
} }
private static getSiblings(parent: PageElement): Array<HTMLElement> { private getSiblings(): Array<HTMLElement> {
return Array.prototype.slice return [this.start, ...this.inBetween, this.end].map(e => e.element);
.call(parent.element.children)
.filter((e: HTMLElement) => !e.classList.contains('background-element'));
} }
} }

11
src/page/index.ts
View file

@ -8,16 +8,15 @@ import { ContainerPage } from '../framework/container-page';
export const create = ({ header, timeline, footer }: Portfolio) => { export const create = ({ header, timeline, footer }: Portfolio) => {
const pageHeader = new PageHeader(header); const pageHeader = new PageHeader(header);
const pageTimeline = new PageTimeline(timeline);
const pageFooter = new PageFooter(footer); const pageFooter = new PageFooter(footer);
new ContainerPage(document.body, [ new ContainerPage(document.body, [
new PageImageViewer(), new PageImageViewer(),
new ContainerPage(document.body.querySelector('.main'), [ pageHeader,
pageHeader, pageTimeline,
new PageTimeline(timeline), pageFooter,
pageFooter, new PageBackground(pageHeader, [pageTimeline], pageFooter),
new PageBackground(pageHeader, pageFooter),
]),
]).setAsMain(); ]).setAsMain();
addSupportForTabNavigation(); addSupportForTabNavigation();

71
src/styles.scss
View file

@ -5,6 +5,9 @@
@include responsive() using ($vars) { @include responsive() using ($vars) {
& { & {
height: 100%; height: 100%;
overflow: hidden;
transform-style: preserve-3d;
background-color: map_get($vars, $background); background-color: map_get($vars, $background);
transition: background-color map_get($vars, $transition-time); transition: background-color map_get($vars, $transition-time);
@ -12,7 +15,13 @@
touch-action: manipulation; touch-action: manipulation;
@include on-small-screen { @include on-small-screen {
font-size: 0.8em; font-size: 0.8rem;
}
@media print {
& {
font-size: 0.75rem;
}
} }
} }
@ -39,6 +48,8 @@
*::after { *::after {
@include main-font($vars); @include main-font($vars);
transform-style: preserve-3d;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
@ -82,39 +93,39 @@
} }
body { body {
height: 100%;
overflow: hidden;
//noinspection CssInvalidFunction //noinspection CssInvalidFunction
padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); env(safe-area-inset-bottom) env(safe-area-inset-left);
.main { @media print {
height: 100vh; // to take mobile nav-bar into account & {
overflow-y: scroll; height: auto;
overflow-x: hidden;
will-change: transform;
perspective: 5px;
perspective-origin: center center;
noscript {
@include square(100%);
@include center-children();
} }
}
@include on-large-screen { max-height: 100%; // to take mobile nav-bar into account
&::-webkit-scrollbar-track, overflow-x: hidden;
&::-webkit-scrollbar { overflow-y: scroll;
background-color: transparent;
width: 12px; //will-change: transform;
}
&::-webkit-scrollbar-thumb { perspective: 5px;
background-color: map_get($vars, $accent-color); perspective-origin: center center;
border-radius: map_get($vars, $border-radius);
} noscript {
@include square(100%);
@include center-children();
}
@include on-large-screen {
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
&::-webkit-scrollbar-thumb {
background-color: map_get($vars, $accent-color);
border-radius: map_get($vars, $border-radius);
} }
} }
} }