Refine purpose statement and other pages

src/consts.ts

@@ -1,5 +1,6 @@
-export const SITE_TITLE = 'Chris Basham';
-export const SITE_DESCRIPTION = 'Chris Basham is a user experience designer and front-end developer in southern Indiana.';
+const NAME = 'Chris Basham';
+export const SITE_TITLE = NAME;
+export const SITE_DESCRIPTION = `${NAME} designs and develops for the web in southern Indiana. He believes every word, byte, and pixel can improve how we care for each other and the earth.`;
 
 const firstYearOfExperience = 2011;
 const firstMonthOfExperience = 6;

src/pages/index.mdx

@@ -7,26 +7,24 @@ config: "ignoreTitle"
 import Writings from '@components/Writings.astro';
 import { SITE_DESCRIPTION, YEARS_OF_EXPERIENCE } from '@src/consts.ts';
 
-{SITE_DESCRIPTION} He believes every word, byte, and pixel is an opportunity to improve the experience of a digital product or system.
+<p>{SITE_DESCRIPTION}</p>
 
 ## Writings
 
 <Writings />
 
 ## About
 
-I have over {YEARS_OF_EXPERIENCE} years of [experience](/resume) in:
+I have over [{YEARS_OF_EXPERIENCE} years of experience](/resume) in:
 
-- web software
-- accessibility
-- [reactive programming](/reactive-programming)
+- [web apps](/web-apps)
 - [design systems](/design-systems)
 - [mentoring](/mentoring)
 - [public speaking](/talks)
 
 Outside of work, I play [board games](/board-games), listen to [audiobooks](/books) and [podcasts](/podcasts), and run trails in sandals.
 
-Learn more [about this website](/colophon).
+Learn more about my [purpose statement](/purpose) and [this website](/colophon).
 
 ## Contact
 

src/pages/mentoring.mdx

@@ -3,10 +3,20 @@ layout: "@layouts/Layout.astro"
 title: "Mentoring"
 ---
 
-Since working at Indiana University in 2012, I have mentored interns and graduate assistants in user experience design, and I have taught backend developers to program in front-end development. Each of these types of relationships are treated differently.
+I have mentored developers, interns, graduate assistants, designers, and developers. Each relationship is approached differently.
 
-For programmers, teaching is handled mostly through paired programming. We solve problems as they emerge from team projects. Staff developers already have a technical foundation, so they need to learn how to translate syntax to another language and how to work with different toolsets.
+## Interns
+
+Interns need ongoing support, as they may not have much prior experience in the field. At the start of the internship, you should establish some goals. Impact maps are useful for framing goals, documenting accomplishments, and prioritizing work. Collaborate with the intern about establishing a pace for their learning and practice.
+
+## Graduate assistants
 
 Graduate assistants tend to have an academic foundation in their field. Work projects put into practice what they've learned in the classroom. Critique and exposure to other full-time staff in their field help them refine their craft.
 
-Interns need more ongoing support, as they may not have much prior experience in the field. Establish goals for both the intern and the organization at the beginning of an internship. [Impact maps](https://github.com/basham/swit-workshop-impact) can define successful outcomes, who can contribute toward those outcomes (the intern, the mentor, other staff, stakeholders), and what those people can do to lead to those outcomes. As the internship progresses, the impact map can be updated to reflect what has been done and what still needs to be done. This approach allows the internship to be a guided, evolving, and well-documented collaboration. It results in skills that can be learned and put into practice, at a pace that is agreeable to everyone involved.
+## Designers
+
+Weekly meetings with a group of designers can provide diverse feedback for members. One-on-one meetings with another designer can produce a safe space for richer feedback.
+
+## Developers
+
+Backend developers must learn new syntaxes, tools, and methods for the front-end. Paired programming is a great way to teach while solving practical problems.

src/pages/purpose.mdx

@@ -0,0 +1,33 @@
+---
+layout: "@layouts/Layout.astro"
+title: "Purpose"
+---
+
+import { SITE_DESCRIPTION } from '@src/consts.ts';
+
+My purpose statement introduces this site, saying:
+
+> <p>{SITE_DESCRIPTION}</p>
+
+I break down this statement, explaining what it means to me:
+
+<dl>
+	<dt>Chris Basham designs and develops</dt>
+	<dd>I am a user experience designer and front-end developer. I am a generalist, skilled in both building the right thing and building it in the right way.</dd>
+	<dt>for the web</dt>
+	<dd>At its best, the web platform invites everyone to connect to people and ideas.</dd>
+	<dt>in southern Indiana.</dt>
+	<dd>I grew up and live in the hills southern Indiana.</dd>
+	<dt>He believes</dt>
+	<dd>I want my work to be impactful.</dd>
+	<dt>every word, byte, and pixel</dt>
+	<dd>The content, data, and visuals we use and how we use them matter, even at the smallest scale.</dd>
+	<dt>can improve</dt>
+	<dd>We have the choice to understand needs, balance tradeoffs, and solve problems.</dd>
+	<dt>how we care</dt>
+	<dd>All people should take responsibility and serve in love as they are able.</dd>
+	<dt>for each other</dt>
+	<dd>We should embrace our diversity and work together to raise the human condition.</dd>
+	<dt>and the earth.</dt>
+	<dd>Our legacy should be to leave our one planetary home better than we found it.</dd>
+</dl>

src/pages/reactive-programming.mdx → src/pages/web-apps.mdx

@@ -1,6 +1,6 @@
 ---
 layout: "@layouts/Layout.astro"
-title: "Reactive programming"
+title: "Web apps"
 ---
 
 Web applications tend to use dynamic user interfaces. Rather than only using links (navigation) and buttons (form submissions) to drive a website, JavaScript can facilitate more complex feedback loops between the user and the system. This back-and-forth takes time. Sometimes it feels immediate. Sometimes it takes noticeably longer. Reactive programming tools and techniques are designed for asynchronous interactions, meaning that it can handle both immediate and delayed responses.

src/styles/global.css

@@ -103,11 +103,22 @@ pre {
 	tab-size: 2;
 }
 
+dd {
+	margin: 0;
+}
+
+dt {
+	color: var(--color-code);
+	font-weight: bold;
+	margin-top: 0.5em;
+}
+
 footer,
 main {
 	margin-top: 2em;
 }
 
+dl,
 figure,
 ol,
 p,