From 01f9c84ee819b9a643355dcd21ebf6c6164fe7bf Mon Sep 17 00:00:00 2001 From: Thomas Neil James Shadwell Date: Fri, 4 Aug 2023 15:38:14 -0700 Subject: [PATCH] Project zemn.me: continue work on site. --- package.json | 1 + pnpm-lock.yaml | 8 +++ project/zemn.me/next/components/BUILD.bazel | 3 + .../next/components/header/header.module.css | 52 +++++++++++++++ .../zemn.me/next/components/header/header.tsx | 63 +++++++++++++++++++ .../zemn.me/next/components/header/index.ts | 2 + .../next/components/timeline/timeline.tsx | 1 + project/zemn.me/next/pages/base.css | 12 ++++ project/zemn.me/next/pages/index.module.css | 20 ++++++ project/zemn.me/next/pages/index.tsx | 48 +++----------- 10 files changed, 169 insertions(+), 41 deletions(-) create mode 100644 project/zemn.me/next/components/header/header.module.css create mode 100644 project/zemn.me/next/components/header/header.tsx create mode 100644 project/zemn.me/next/components/header/index.ts diff --git a/package.json b/package.json index a353ba3519..f89c30fa67 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "@pulumi/command": "4.5.0", "@react-spring/rafz": "^9.7.3", "@types/bcryptjs": "2.4.2", + "clsx": "^1.2.1", "csstype": "^3.1.1", "devtools-protocol": "^0.0.1179426", "eslint-mdx": "^2.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7bc12e067..a604794b26 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,9 @@ dependencies: '@types/bcryptjs': specifier: 2.4.2 version: 2.4.2 + clsx: + specifier: ^1.2.1 + version: 1.2.1 csstype: specifier: ^3.1.1 version: 3.1.2 @@ -7242,6 +7245,11 @@ packages: engines: {node: '>=0.8'} dev: true + /clsx@1.2.1: + resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} + engines: {node: '>=6'} + dev: false + /cluster-key-slot@1.1.2: resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==} engines: {node: '>=0.10.0'} diff --git a/project/zemn.me/next/components/BUILD.bazel b/project/zemn.me/next/components/BUILD.bazel index cb32614095..961999fbd8 100644 --- a/project/zemn.me/next/components/BUILD.bazel +++ b/project/zemn.me/next/components/BUILD.bazel @@ -12,8 +12,11 @@ ts_project( deps = [ "//:base_defs", "//:node_modules/@types/react", + "//:node_modules/clsx", "//:node_modules/immutable", "//:node_modules/react", "//project/zemn.me/bio", + "//project/zemn.me/elements/TimeEye", + "//ts/react/lang", ], ) diff --git a/project/zemn.me/next/components/header/header.module.css b/project/zemn.me/next/components/header/header.module.css new file mode 100644 index 0000000000..b534108cc0 --- /dev/null +++ b/project/zemn.me/next/components/header/header.module.css @@ -0,0 +1,52 @@ +.header { + display: grid; + grid: + " .... name ....." + " .... .... ....." 1em + " .... logo ....." 4em + " .... .... ....." 1em + " .... links ...." + " .... ..... ...." 1em + " .... text ...." + / 2em 1fr 2em; +} + +.header > * { + /* ensure the elements fill the grid we give them */ + margin: auto; + width: 100%; + height: 100%; +} + +.name { + grid-area: name; + text-align: center; + /* this is because it's currently in an h1 and i dont want it to be big. */ + font-size: initial; + /* this would be a subgrid one day! but alas!! the time has not yet come!!!! */ + display: grid; + grid: + "real-name" + "........." 1em + "handle "; +} + +.realName { grid-area: real-name } +.handle { grid-area:handle } + + +.links { + grid-area: links; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + + +.desc { + grid-area: text; +} + +.logo { + grid-area: logo; +} diff --git a/project/zemn.me/next/components/header/header.tsx b/project/zemn.me/next/components/header/header.tsx new file mode 100644 index 0000000000..cd5082e100 --- /dev/null +++ b/project/zemn.me/next/components/header/header.tsx @@ -0,0 +1,63 @@ +/** + * @fileoverview on zemn.me this is the top part in 'content' with the eye logo, some links + * my name etc. + */ + +import clsx from 'clsx'; +import * as bio from 'project/zemn.me/bio'; +import { TimeEye } from 'project/zemn.me/elements/TimeEye'; +import style from 'project/zemn.me/next/components/header/header.module.css'; +import * as lang from 'ts/react/lang'; + +export interface HeaderProps { + className?: string; +} + +export default function Header(props: HeaderProps) { + return ( +
+ +

+
+ {lang.text(bio.Bio.who.fullName)} +
+
+ {lang.text(bio.Bio.who.handle)} +
+

+ +
+

+ I am an internationally recognised international expert on + computer security, with specialisms in web security, + security program construction, and automated security + analysis. +

+

+ I am interested in consulting on legal cases. For business, + email me at{' '} + thomas@shadwell.im. +

+
+ {bio.Bio.links !== undefined ? ( + + ) : null} +
+ ); +} diff --git a/project/zemn.me/next/components/header/index.ts b/project/zemn.me/next/components/header/index.ts new file mode 100644 index 0000000000..2eb9d2b2b7 --- /dev/null +++ b/project/zemn.me/next/components/header/index.ts @@ -0,0 +1,2 @@ +export * from 'project/zemn.me/next/components/header/header'; +export { default } from 'project/zemn.me/next/components/header/header'; diff --git a/project/zemn.me/next/components/timeline/timeline.tsx b/project/zemn.me/next/components/timeline/timeline.tsx index 845183cf89..128b8d7bf9 100644 --- a/project/zemn.me/next/components/timeline/timeline.tsx +++ b/project/zemn.me/next/components/timeline/timeline.tsx @@ -4,6 +4,7 @@ import style from 'project/zemn.me/next/components/timeline/timeline.module.css' import React from 'react'; import * as lang from 'ts/react/lang'; + const numerals = [ [3000, 'MMM'], [2000, 'MM'], diff --git a/project/zemn.me/next/pages/base.css b/project/zemn.me/next/pages/base.css index e8aa49eb26..69c5226497 100644 --- a/project/zemn.me/next/pages/base.css +++ b/project/zemn.me/next/pages/base.css @@ -1,3 +1,7 @@ +:root { + hyphens: auto; +} + html, body, :root { margin: 0; padding: 0; @@ -10,4 +14,12 @@ body { a { font-style: italic; color: currentColor; +} + +h1, h2, h3, h4, h5 { + font-weight: normal; +} + +p { + text-align: justify } \ No newline at end of file diff --git a/project/zemn.me/next/pages/index.module.css b/project/zemn.me/next/pages/index.module.css index cb01d7f0df..0f93bbed54 100644 --- a/project/zemn.me/next/pages/index.module.css +++ b/project/zemn.me/next/pages/index.module.css @@ -11,6 +11,8 @@ } .headerBgv { + width: 100%; + height: 100%; z-index: -1; object-fit: cover; grid-area: banner; @@ -39,3 +41,21 @@ /1fr ; } } + + +/* + css styles for laying out the content panel +*/ + +.content { + display: grid; + grid: + " .... ...... ...." 2em + " .... header ...." + " .... timeline ...." + " .... ........ ...." 2em + / 2em 1fr 2em ; +} + +.header{ grid-area: header } +.timeline{ grid-area: timeline } \ No newline at end of file diff --git a/project/zemn.me/next/pages/index.tsx b/project/zemn.me/next/pages/index.tsx index 083dad617f..97bac339e5 100644 --- a/project/zemn.me/next/pages/index.tsx +++ b/project/zemn.me/next/pages/index.tsx @@ -1,6 +1,6 @@ import Head from 'next/head'; +import Header from 'project/zemn.me/next/components/header'; import * as bio from 'project/zemn.me/bio'; -import { TimeEye } from 'project/zemn.me/elements/TimeEye'; import * as kenwood from 'project/zemn.me/next/assets/kenwood'; import Timeline from 'project/zemn.me/next/components/timeline'; import style from 'project/zemn.me/next/pages/index.module.css'; @@ -30,48 +30,14 @@ export default function Main() {
-

- {lang.text(bio.Bio.who.handle)} -

-
-
-

- {lang.text(bio.Bio.who.fullName)} -

- -

- I am an internationally recognised international expert - on computer security, with specialisms in web security, - security program construction, and automated security - analysis. -

-

- I am interested in consulting on legal cases. For - business, email me at{' '} - - thomas@shadwell.im - - . -

-
- {bio.Bio.links !== undefined ? ( - - ) : null} -
- +
+
+
+ +
); -} +} \ No newline at end of file