Squashed commit of the following:

commit 913b03d Author: Daniel Clark <danieldclark@outlook.com> Date: Fri Nov 3 20:55:21 2023 -0700 Finish adding About page commit ddbc311 Author: Dan Clark <danieldclark@outlook.com> Date: Fri Nov 3 18:44:26 2023 -0700 workin on adding about page
dandclark · Nov 4, 2023 · 51b5bc6 · 51b5bc6
1 parent 7564aaf
commit 51b5bc6
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 33 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<head>
+ <title>About Dan</title>
+ <link rel="icon" href="img/favicon.ico" type="image/x-icon">
+ <link rel="stylesheet" href="./main.css">
+</head>
+<body>
+ <header class="titlebar content-box">
+ <div class="main-link-container">
+ <a class="main-link" href="/">
+ <div id="main-title">Dan Clark</div>
+ <div id="secondary-title">Web Platform Engineer</div>
+ </a>
+ </div>
+ <div id="img-container" role="img" alt="Profile image of Dan" title="Photo Credit: Julie Clark :)"></div>
+ <nav>
+ <div><a href="/">Home</a></div>
+ <div class="current"><a href="/about.html">About</a></div>
+ </nav>
+ </header>
+ <div class="titlebar-divider"></div>
+ <div id="main" class="content-box">
+ <div>
+ Hi!
+ </div>
+ <div>
+ I'm Dan, an engineer at Microsoft Edge working on web standards and the web platform.
+ </div>
+ <div>
+ The web is the most important, exciting, and quickly-evolving development platform
+ that exists today, and I'm exploring ways to make it better for users and developers.
+ </div>
+ <div>
+ I've worked to help bring a number of web standards to life including
+ <a href="https://w3c.github.io/edit-context/">Edit Context</a>, the
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API">CSS Custom Highlight API</a>,
+ <a href="https://github.com/tc39/proposal-import-attributes">import attributes</a>,
+ <a href="https://web.dev/articles/css-module-scripts">CSS module scripts</a>, and
+ <a href="https://github.com/tc39/proposal-json-modules">JSON module scripts</a>.
+ </div>
+ <div>
+ This journey has involved contributions in several web standards organizations: the
+ <a href="https://wiki.csswg.org/">CSS Working Group</a>,
+ the <a href="https://www.w3.org/groups/wg/webediting/">Web Editing Working Group</a>, the
+ <a href="https://open-ui.org/">OpenUI Community Group</a>, <a href="https://tc39.es/">TC39</a>,
+ and the <a href="https://whatwg.org/">WHATWG</a>.
+ </div>
+ <div>
+ During this time I've been an active contributor to the <a href="https://www.chromium.org/Home/">Chromium Project</a>,
+ with <a href="https://chromium-review.googlesource.com/q/owner:daniec+status:merged">commits</a> spanning
+ DOM, accessibility, CSS, JS, and editing.
+ </div>
+ <div>
+ Prior to my involvement in standards, I helped to complete a
+ <a href="https://blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/">massive re-architecting</a>
+ of the core of the EdgeHTML rendering engine to enable it to meet the performance demands of the modern web.
+ </div>
+ <div>
+ I'm excited to continue pushing the capabilities of the web forward. Please don't hesitate to
+ <a href="/">contact me</a> if you'd like to get involved!
+ </div>
+ </div>
+</body>
diff --git a/index.html b/index.html
@@ -7,35 +7,33 @@
  <meta http-equiv="origin-trial" content="AiiliSKxDewhTEzZYxa9nhwsa/luV6QDHO5QvfNh8fpA7b+iIa8kJTxToIAecNoldj45QG7zC6B3dPpvTGlKVDYAAABmeyJvcmlnaW4iOiJodHRwczovL2RhbmRjbGFyay5kZXY6NDQzIiwiaXNTdWJkb21haW4iOmZhbHNlLCJmZWF0dXJlIjoiRWRpdENvbnRleHQiLCJleHBpcnkiOjE2OTg2MjQwMDB9">
 </head>
 <body>
- <div class="titlebar content-box">
- <div>
- <div id="main-title">Dan Clark</div>
- <div id="secondary-title">Web Platform Engineer</div>
+ <header class="titlebar content-box">
+ <div class="main-link-container">
+ <a class="main-link" href="/">
+ <div id="main-title">Dan Clark</div>
+ <div id="secondary-title">Web Platform Engineer</div>
+ </a>
  </div>
  <div id="img-container" role="img" alt="Profile image of Dan" title="Photo Credit: Julie Clark :)"></div>
- </div>
+ <nav>
+ <div class="current"><a href="/">Home</a></div>
+ <div><a href="/about.html">About</a></div>
+ </nav>
+ </header>
  <div class="titlebar-divider"></div>
- <div id="main" class="content-box">
+ <div class="content-box">
+ I'm a Principal Software Engineer on the Microsoft Edge Web Platform team, working
+ on web standards and browser engine development.
+ </div>
+ <div class="content-box">
  <div>
- I'm a Principal Software Engineer on the Microsoft Edge Web Platform team, interested
- in web standards and browser engine development.
+ Learn more about me
+ <a href="/about.html">here</a>, or come find me at one of these places:
  </div>
- <div>Some things I've been working on:</div>
  <ul>
- <li><a href="https://w3c.github.io/edit-context/">The EditContext API</a></li>
- <li><a href="https://open-ui.org/components/selectmenu/" target="_blank">&lt;selectmenu&gt;: a customizable web-platform-native listbox control</a></li>
- <li><a href="https://web.dev/css-module-scripts/" target="_blank">CSS module scripts</a></li>
- <li><a href="https://v8.dev/features/import-assertions" target="_blank">JSON module scripts and import assertions</a></li>
+ <li><span id="sneaky">@</span></li>
+ <li><a href="https://github.com/dandclark/" target="_blank">GitHub</a></li>
+ <li><a href="https://twitter.com/dandclark1" target="_blank">Twitter</a></li>
  </ul>
  </div>
-
- <div class="content-box">
- <div>Someday I might put something here. Until then, find me at the links below.</div>
- <ul>
- <li><a href="https://github.com/dandclark/" target="_blank">GitHub (@dandclark)</a></li>
- <li><a href="https://chromium-review.googlesource.com/q/owner:daniec%2540microsoft.com" target="_blank">Chromium Commits</a></li>
- <li><a href="https://twitter.com/dandclark1" target="_blank">Twitter (@dandclark1)</a></li>
- <li><a href="https://www.chess.com/member/gutentag" target="_blank">Chess.com</a></li>
- </ul>
- </div>
 </body>
diff --git a/main.css b/main.css
@@ -1,12 +1,18 @@
+:root {
+ --main-text-color: #cac7c7;
+ --bg-color: #202020;
+ --content-box-bg-color: #414141;
+}
+
 body {
- background-color: #202020;
- color: #cac7c7;
+ background-color: var(--bg-color);
+ color: var(--main-text-color);
  font-family: helvetica;
  font-size: 1.2em;
 }
 
 .content-box {
- background-color: #414141;
+ background-color: var(--content-box-bg-color);
  padding: 1em;
  margin: 1em;
  border-radius: 0.5em;
@@ -25,27 +31,27 @@ body {
  margin-bottom: 0em;
 }
 
-div.titlebar-divider {
+.titlebar-divider {
  border-bottom: 0.1em solid white;
 }
 
-div.titlebar {
+.titlebar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3em;
 }
 
-div.titlebar #main-title {
+.titlebar #main-title {
  font-size: 3.5em;
  padding-bottom: 0.1em;
 }
 
-div.titlebar #secondary-title {
+.titlebar #secondary-title {
  font-size: 1.8em;
 }
 
-div.titlebar #img-container {
+.titlebar #img-container {
  width: 8em;
  height: 8em;
  flex-shrink: 0; /* TODO Do something better at high zoom */
@@ -55,6 +61,45 @@ div.titlebar #img-container {
  border-radius: 0.5em;
 }
 
+.titlebar > .main-link-container {
+ padding: 0.5em 1em 0.5em 1em;
+ border-radius: 0.5em;
+}
+
+.titlebar.content-box > .main-link-container:hover {
+ outline: 0.1em solid var(--main-text-color);
+}
+
+.titlebar.content-box a {
+ color: var(--main-text-color);
+}
+
+.titlebar.content-box a:hover {
+ text-shadow: none;
+ text-decoration: none;
+}
+
+nav {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 1.5em;
+ font-size: 1.4em;
+}
+
+nav div {
+ padding: 0.35em;
+ border-radius: 0.3em;
+}
+
+nav div.current {
+ outline: 0.1em solid var(--main-text-color);
+}
+
+nav div:not(.current):hover {
+ outline: 0.05em solid var(--main-text-color);
+}
+
 .content-box a {
  color: rgb(155, 155, 255);
  text-decoration: none;
@@ -63,7 +108,8 @@ div.titlebar #img-container {
 }
 
 .content-box a:hover {
- text-shadow: #dadada 0.02em -0.05em 0.4em;
+ text-shadow: rgb(155, 155, 255) 0em 0em 0.1em;
+ text-decoration: underline;
 }
 
 .content-box ul {
@@ -82,4 +128,12 @@ div.titlebar #img-container {
 
 .content-box li:last-child {
  margin-bottom: 0em;
-}
+}
+
+#sneaky::after {
+ content: "microsoft.com";
+}
+
+#sneaky::before {
+ content: "daniec";
+}