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

PC styles nearly done

Browse source
This commit is contained in:
Schmelczer András 2019-12-26 10:36:46 +01:00
parent da9d0a1136
commit 79f7c4c16f
25 changed files with 221 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

40
.idea/workspace.xml generated
View file

@ -2,21 +2,31 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/static/cv/andras_schmelczer_cv_2020_01.pdf" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/static/icons/at.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/content/en.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/content/hu.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/custom.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/custom.d.ts" afterDir="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/page-event.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.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.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.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/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/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.ts" 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/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" 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/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/elements.scss" beforeDir="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/page.scss" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/test.html" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
@ -49,23 +59,24 @@
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="ignore_missing_gitignore" value="true" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/src/static/icons" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/src/static" />
<property name="nodejs_package_manager_path" value="npm" />
<property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
<property name="settings.editor.selected.configurable" value="watcher.settings" />
<property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="C:\Projects\portfolio\CompiledCV\src" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\timeline" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page" />
<recent name="C:\Projects\portfolio\CompiledCV\src\page\main" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
</component>
<component name="RunDashboard">
@ -104,7 +115,8 @@
<workItem from="1577040021962" duration="1657000" />
<workItem from="1577088438195" duration="19038000" />
<workItem from="1577271824791" duration="7691000" />
<workItem from="1577282613892" duration="10464000" />
<workItem from="1577282613892" duration="11050000" />
<workItem from="1577348003642" duration="4876000" />
</task>
<servers />
</component>

5
custom.d.ts vendored
View file

@ -27,3 +27,8 @@ declare module "*.mp4" {
const content: string;
export default content;
}
declare module "*.pdf" {
const content: string;
export default content;
}

10
src/framework/page-element.ts
View file

@ -13,16 +13,16 @@ export abstract class PageElement {
this.element = value;
}
protected eventGenerator: PageElement;
protected eventBroadcaster: PageElement;
protected constructor(private children: Array<PageElement> = []) {}
public giveEvent(event: PageEvent, parent: PageElement = null) {
if (event.type === PageEventType.eventGeneratorChanged) {
this.eventGenerator = event.data;
public broadcastEvent(event: PageEvent, parent: PageElement = null) {
if (event.type === PageEventType.eventBroadcasterChanged) {
this.eventBroadcaster = event.data;
}
this.handleEvent(event, parent);
this.children.forEach(c => c.giveEvent(event, this));
this.children.forEach(c => c.broadcastEvent(event, this));
}
protected query(query: string): HTMLElement | null {

2
src/framework/page-event.ts
View file

@ -6,5 +6,5 @@ export class PageEvent {
export enum PageEventType {
onLoad,
onBodyDimensionsChanged,
eventGeneratorChanged
eventBroadcasterChanged
}

6
src/framework/page.ts
View file

@ -8,11 +8,11 @@ export class Page extends PageElement {
) {
super(children);
this.setElement(rootElement);
this.giveEvent(
{ type: PageEventType.eventGeneratorChanged, data: this },
this.broadcastEvent(
{ type: PageEventType.eventBroadcasterChanged, data: this },
this
);
rootElement.append(...children.map(e => e.getElement()).filter(e => e));
this.giveEvent({ type: PageEventType.onLoad }, this);
this.broadcastEvent({ type: PageEventType.onLoad }, this);
}
}

8
src/model/portfolio.ts
View file

@ -12,8 +12,6 @@ export interface Config {
showMore: string;
showLess: string;
aPictureOf: string;
cvName: string;
lastEdit: Date;
}
export interface Header {
@ -32,6 +30,12 @@ export interface TimelineElement {
}
export interface Footer {
title: string;
email: string;
cv: url;
cvName: string;
githubLinkName: string;
githubLink: url;
lastEditName: string;
lastEdit: Date;
}

3
src/page/about/about.scss
View file

@ -2,7 +2,8 @@
@import "../../style/vars";
#about {
margin-top: $normal-margin;
margin-top: $normal-margin - $small-margin;
padding: $small-margin;
header {
@include center-children();

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

@ -14,6 +14,6 @@
position: absolute;
left: 0;
top: 0;
width: 100px;
width: 160px;
}
}

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

@ -62,9 +62,9 @@ export class PageBackground extends PageElement {
generate(
count,
() => choose(this.colors, random),
() => randomInInterval(150, 750, random),
() => randomInInterval(160, 750, random),
() => {
const z = randomInInterval(-5, -15, random);
const z = randomInInterval(-12, -25, random);
return `
translateX(${randomWithKnownZ(-z, width)}px)
translateY(${randomWithKnownZ(-z, height)}px)

34
src/page/footer/footer.html.ts
View file

@ -1,10 +1,34 @@
import { Footer } from "../../model/portfolio";
import { html } from "../../model/misc";
import "./footer.scss";
import { html, url } from "../../model/misc";
export const generate = ({ email, cv }: Footer, cvName: string): html => `
import "./footer.scss";
import cvIcon from "../../static/icons/cv.svg";
import emailIcon from "../../static/icons/at.svg";
export const generate = ({
title,
email,
cv,
cvName,
lastEditName,
lastEdit,
githubLinkName,
githubLink
}: Footer): html => `
<footer id="page-footer">
<a id="email" href="mailto:${email}">${email}</a>
<a id="cv" href="mailto:${cv}">${cvName}</a>
<h2>${title}</h2>
<ul>
<li>
<img src="${cvIcon}" alt="CV" />
<a id="cv" target="_blank">${cvName}</a>
</li>
<li>
<img src="${emailIcon}" alt="email" />
<a id="email" href="mailto:${email}">${email}</a>
</li>
</ul>
<aside class="other">
<h6>${lastEditName} ${lastEdit.toLocaleDateString()}</h6>
</aside>
</footer>
`;

49
src/page/footer/footer.scss
View file

@ -2,7 +2,50 @@
@import "../../style/vars";
footer#page-footer {
@include card();
@include center-children();
margin: $normal-margin auto;
text-align: center;
margin: $small-margin auto 0 auto;
padding: $normal-margin $normal-margin $line-height $normal-margin;
width: 100%;
backdrop-filter: blur(5px);
h2 {
@include title-font();
}
ul {
list-style: none;
display: inline-block;
margin-top: $normal-margin;
text-align: left;
li {
@include center-children();
justify-content: flex-start;
&:not(:first-child) {
padding-top: $line-height;
}
img {
@include max-square($icon-size);
margin-right: $small-margin;
}
a {
font-size: 1.4rem;
}
}
}
aside.other {
@include center-children();
margin: $normal-margin auto 0 auto;
width: $body-width;
h6 {
@include insignificant-font();
opacity: 0.4;
}
}
}

4
src/page/footer/footer.ts
View file

@ -5,8 +5,8 @@ import { generate } from "./footer.html";
import { createElement } from "../../framework/helper";
export class PageFooter extends PageElement {
constructor(footer: Footer, cvName: string) {
constructor(footer: Footer) {
super();
this.setElement(createElement(generate(footer, cvName)));
this.setElement(createElement(generate(footer)));
}
}

2
src/page/image-viewer/image-viewer.html.ts
View file

@ -3,7 +3,7 @@ import cancel from "../../static/icons/cancel.svg";
import "./image-viewer.scss";
export const generate = (): html => `
<section class="photo-viewer">
<section id="image-viewer">
<img id="photo" alt="currently opened photo"/>
<img id="cancel" src="${cancel}" alt="cancel"/>
</section>

2
src/page/image-viewer/image-viewer.scss
View file

@ -1,7 +1,7 @@
@import "../../style/vars";
@import "../../style/mixins";
.photo-viewer {
#image-viewer {
@include center-children();
display: none;

2
src/page/index.ts
View file

@ -14,7 +14,7 @@ export const create = ({ config, header, timeline, footer }: Portfolio) => {
new PageBackground(),
new PageHeader(header, config.aPictureOf),
new PageTimeline(timeline, config.showMore, config.showLess),
new PageFooter(footer, config.cvName),
new PageFooter(footer),
new PageImageViewer()
],
document.body.querySelector("main")

2
src/page/timeline/timeline-element/timeline-element.ts
View file

@ -44,7 +44,7 @@ export class PageTimelineElement extends PageElement {
}
this.isOpen = !this.isOpen;
this.eventGenerator?.giveEvent({
this.eventBroadcaster?.broadcastEvent({
type: PageEventType.onBodyDimensionsChanged
});
}

15
src/portfolio.ts
View file

@ -10,15 +10,14 @@ 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 cv from "./static/cv/andras_schmelczer_cv_2020_01.pdf";
import ledVideo from "./static/media/led720.mp4";
export const portfolio: Portfolio = {
config: {
showMore: `Show details`,
showLess: `Show less`,
aPictureOf: `a picture of`,
cvName: `Curriculum vitae`,
lastEdit: new Date(2019, 12, 22)
aPictureOf: `a picture of`
},
header: {
name: `András Schmelczer`,
@ -160,7 +159,13 @@ export const portfolio: Portfolio = {
}
],
footer: {
email: `andras.schmelczer@schdesign.hu`,
cv: `/static/media/andras_schmelczer_cv.pdf`
title: `Learn more`,
cv,
email: `andras@schmelczer.dev`,
cvName: `Curriculum vitae`,
githubLinkName: `view source`,
githubLink: `https://github.com/schmelczerandras/timeline`,
lastEditName: `Last modified on `,
lastEdit: new Date(2019, 11, 27) // months are 0 indexed
}
};

BIN
src/static/cv/andras_schmelczer_cv_2020_01.pdf Normal file
View file

Binary file not shown.

3
src/static/icons/at.svg Normal file
View file

@ -0,0 +1,3 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00018 512" width="512px"><g><path d="m401.738281 442.710938c6.046875 9.242187 3.453125 21.636718-5.792969 27.683593-41.585937 27.195313-89.9375 41.582031-139.824218 41.605469-.039063 0-.082032 0-.121094 0-68.097656.003906-132.101562-26.234375-180.253906-73.890625-48.183594-47.683594-75.078125-111.46875-75.7343752-179.597656-.6601568-68.558594 25.4453122-133.210938 73.5039062-182.054688 48.066406-48.851562 112.265625-76 180.773437-76.45312475.5625 0 1.136719-.00390625 1.699219-.00390625 53.46875 0 104.816407 16.546875 148.613281 47.90625 43.277344 30.988281 75.519532 73.652344 93.238282 123.378906 3.707031 10.40625-1.722656 21.847656-12.125 25.554688-10.40625 3.707031-21.84375-1.722656-25.554688-12.125-30.898437-86.707032-112.84375-144.714844-204.195312-144.714844-.476563 0-.9375 0-1.414063.003906-57.796875.378906-111.964843 23.289063-152.523437 64.507813-40.546875 41.210937-62.570313 95.765625-62.015625 153.613281 1.132812 117.949219 98.019531 213.875 215.992187 213.875h.097656c42.097657-.019531 82.886719-12.148438 117.953126-35.082031 9.242187-6.046875 21.636718-3.453125 27.683593 5.792969zm110.261719-165.710938c0 50.179688-40.820312 91-91 91-32.0625 0-60.304688-16.667969-76.519531-41.796875-20.71875 26.058594-52.679688 42.796875-88.480469 42.796875-62.308594 0-113-50.691406-113-113s50.691406-113 113-113c28.277344 0 54.160156 10.441406 74 27.667969v-3.535157c0-11.042968 8.953125-20 20-20s20 8.957032 20 20v109.867188c0 28.121094 22.878906 51 51 51s51-22.878906 51-51c0-11.046875 8.953125-20 20-20s20 8.953125 20 20zm-183-21c0-40.25-32.746094-73-73-73-40.25 0-73 32.75-73 73 0 40.253906 32.75 73 73 73 40.253906 0 73-32.746094 73-73zm0 0" class="active-path" fill="#31343F"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

48
src/style/a.scss Normal file
View file

@ -0,0 +1,48 @@
@import "vars";
@import "mixins";
a {
@include insignificant-font();
text-decoration: none;
position: relative;
cursor: pointer;
color: $accent-color;
display: inline-block;
overflow: hidden;
$border-shift: 10px;
transition: transform $slow-transition-time;
&:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: $line-width;
bottom: 0;
z-index: 1;
background: linear-gradient(
90deg,
$card-color 0,
transparentize($card-color, 1) 4px,
transparentize($card-color, 1) calc(100% - 4px),
$card-color 100%
);
}
&:after {
content: "";
display: block;
width: calc(100% + #{$border-shift});
z-index: 0;
border-bottom: $line-width dotted $accent-color;
transition: transform $slow-transition-time;
}
&:hover {
&:after {
transform: translateX(-$border-shift);
}
}
}

18
src/style/elements.scss
View file

@ -1,18 +0,0 @@
#photo-viewer {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: var(--photo-viewer-color);
z-index: -3;
opacity: 0;
transition: opacity var(--transition-time);
}
/* #photo */
#photo-viewer > img {
max-width: 80vw;
max-height: 80vh;
}
/**/

5
src/style/mixins.scss
View file

@ -29,6 +29,11 @@
height: $size;
}
@mixin max-square($size) {
max-width: $size;
max-height: $size;
}
@mixin title-font() {
font: 400 3.33rem "Raleway", serif;
}

84
src/style/page.scss
View file

@ -1,84 +0,0 @@
header,
footer,
#timeline,
#about > p:first-of-type,
#timeline > section:not(:first-of-type) > .card {
margin-top: var(--margin);
}
#about > p {
}
#timeline > section {
display: flex;
}
.card {
flex: 1;
}
#about > p,
.card > *:not(:first-child):not(:last-child),
.collapsed > *:not(:first-child) {
margin-top: var(--line-height);
}
img {
user-select: none;
border-radius: var(--border-radius);
cursor: pointer;
}
.description {
font-style: italic;
margin-bottom: var(--smaller-margin);
}
.collapsed > p {
text-align: left;
}
.collapsed {
height: 0;
overflow: hidden;
transition: height var(--transition-time);
}
.collapsed > *:last-child {
margin-bottom: var(--smaller-margin);
}
footer {
margin-bottom: var(--margin);
}
@media (max-width: 900px) {
body {
font-size: 0.85em;
}
#photo {
max-width: 94vw;
}
.card {
font-size: 0.9em;
}
header {
flex-direction: column;
}
h1,
#header-pic {
font-size: 3em;
}
#header-pic {
height: 5.5ch;
margin: 0.75ex 0 0.5ex 0;
}
#about > p {
text-align: left;
}
}

71
src/styles.scss
View file

@ -1,8 +1,10 @@
@import "style/vars";
@import "style/mixins";
@import "style/a";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: $normal-text-color;
hyphens: auto;
@ -32,23 +34,23 @@ body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
perspective: 5px;
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
&::-webkit-scrollbar-thumb {
background-color: $accent-color;
border-radius: $border-radius;
}
& > * {
width: $body-width;
margin: auto;
}
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
&::-webkit-scrollbar-thumb {
background-color: $accent-color;
border-radius: $border-radius;
}
}
img,
@ -58,50 +60,3 @@ video {
object-fit: contain;
border-radius: $border-radius;
}
a {
@include insignificant-font();
text-decoration: none;
position: relative;
cursor: pointer;
color: $accent-color;
display: inline-block;
overflow: hidden;
$border-shift: 10px;
transition: transform $slow-transition-time;
&:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: $line-width;
bottom: 0;
z-index: 1;
background: linear-gradient(
90deg,
$card-color 0,
transparentize($card-color, 1) 4px,
transparentize($card-color, 1) calc(100% - 4px),
$card-color 100%
);
}
&:after {
content: "";
display: block;
width: calc(100% + #{$border-shift});
height: 100%;
z-index: 0;
border-bottom: $line-width dotted $accent-color;
transition: transform $slow-transition-time;
}
&:hover {
&:after {
transform: translateX(-$border-shift);
}
}
}

10
webpack.config.js
View file

@ -28,6 +28,16 @@ module.exports = {
}
}
},
{
test: /\.(pdf)$/i,
use: {
loader: "file-loader",
query: {
outputPath: "static/",
name: "[name].[ext]"
}
}
},
{
test: /\.ico$/i,
use: {