diff --git a/workspaces/components/.storybook/preview.js b/workspaces/components/.storybook/preview.js index e0e935a..c9a7935 100644 --- a/workspaces/components/.storybook/preview.js +++ b/workspaces/components/.storybook/preview.js @@ -1,7 +1,12 @@ -import { setCustomElementsManifest } from '@storybook/web-components'; -import customElements from '../src/custom-elements.json'; +// import { setCustomElementsManifest } from '@storybook/web-components'; +// import customElements from '../src/custom-elements.json'; -setCustomElementsManifest(customElements); +global.attrGen = (args) => Object.entries(args) +.filter(([key, value]) => value) +.map(([key, value]) => `\n ${key}="${value}"`) +.join(' '); + +// setCustomElementsManifest(customElements); /** @type { import('@storybook/web-components').Preview } */ const preview = { parameters: { diff --git a/workspaces/components/src/custom-elements.json b/workspaces/components/src/custom-elements.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/workspaces/components/src/custom-elements.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/workspaces/components/src/dope-stripes/dope-stripes.stories.js b/workspaces/components/src/dope-stripes/dope-stripes.stories.js new file mode 100644 index 0000000..e65af2b --- /dev/null +++ b/workspaces/components/src/dope-stripes/dope-stripes.stories.js @@ -0,0 +1,39 @@ + +import './index.js'; + +export default { + title: 'Dope stripes', + component: 'dope-stripes', + tags: ['autodocs'], + render: (args) => { + + return ` + + + + `; + } +}; + +export const Stripes = { + args: { + stripes: [ + 'red', 'blue', 'yellow', 'green' + ], + }, +} + +export const ColorScheme = { + args: { + styles: `--left-width: 7em; + --angle-width: 73px; + --stripe-height: 16px; + --stripe-angle: 20deg; + `, + stripes: ['#ffd273', '#ffbf57', '#ffa43b', '#ff8920', '#ff6e05'], + } +} \ No newline at end of file diff --git a/workspaces/components/src/dope-stripes/html.js b/workspaces/components/src/dope-stripes/html.js new file mode 100644 index 0000000..5b13a6d --- /dev/null +++ b/workspaces/components/src/dope-stripes/html.js @@ -0,0 +1,22 @@ + +/** + * Creates one stripe + * @param {string} color - The color of the stripe + * @returns {string} - The HTML for the stripe + */ +export const stripe = (color) => { + return `
` +} + +/** + * Creates a set of stripes + * @param {string[]} stripes - An array of colors to use for the stripes + * @returns {string} - The HTML for the stripes + */ +const html = (stripes) => { + return `
+ ${Array.isArray(stripes) && stripes.length > 0 ? stripes.map(stripe).join('') : ''} +
`; +} + +export default html; \ No newline at end of file diff --git a/workspaces/components/src/dope-stripes/index.js b/workspaces/components/src/dope-stripes/index.js new file mode 100644 index 0000000..2455b9f --- /dev/null +++ b/workspaces/components/src/dope-stripes/index.js @@ -0,0 +1,39 @@ +import styles from './style.css?inline'; +import html from './html.js'; + +/** + * @element dope-stripes + * @attr {string[]} stripes - An array of colors to use for the stripes + */ +export class DopeStripes extends HTMLElement { + constructor() { + super(); + this.attrs = {}; + this.attachShadow({ mode: "open" }); + this._getAttributes(); + } + + /** + * Generate variables at `this.[attribute-name]` for each attribute on the element + * @ignore + */ + _getAttributes() { + for (let name of this.getAttributeNames()) { + if (this.getAttribute(name)) { + this.attrs[name] = this.getAttribute(name); + } + } + if (this.attrs.stripes && typeof this.attrs.stripes === 'string') { + this.attrs.stripes = this.attrs.stripes.split(','); + } + } + + async connectedCallback() { + this.setAttribute( 'exportparts', ['stripes'] ); + let view = ``; + view += html(this.attrs.stripes); + this.shadowRoot.innerHTML = view; + } +} + +customElements.define('dope-stripes', DopeStripes); diff --git a/workspaces/components/src/dope-stripes/style.css b/workspaces/components/src/dope-stripes/style.css new file mode 100644 index 0000000..d1546c9 --- /dev/null +++ b/workspaces/components/src/dope-stripes/style.css @@ -0,0 +1,55 @@ +.stripes { + width: 100%; + --left-width: 20%; + --angle-width: 50px; + --stripe-height: 20px; + --stripe-angle: 39deg; +} + +.stripe { + display: flex; + align-items: left; + margin: 0 0 -1px; + width: 100%; + --stripe-color: #ffe27a; + + & span, + &::before, + &::after { + content: " "; + height: var(--stripe-height); + display: block; + background-color: var(--stripe-color); + --rotated-height: calc(var(--angle-width) * tan(var(--stripe-angle))); + } +} + +.stripe span { + transform: skewY(var(--stripe-angle)); + transform-origin: 0% 0%; + flex: 0 0 auto; + width: calc(var(--angle-width)); + height: var(--stripe-height); +} +.stripe::before { + width: var(--left-width); + flex: 0 0 auto; +} +.stripe::after { + flex: 1 1 auto; + transform: translate(0, var(--rotated-height)); +} +.blue { + --stripe-color: rgb(0, 0, 255); +} +.yellow { + --stripe-color: #ffe27a; +} + +.orange { + --stripe-color: #ffa64d; +} + +.dark-orange { + --stripe-color: #ff7f1a; +} diff --git a/workspaces/website/public/scott-nath-profile-photo.jpg b/workspaces/website/public/scott-nath-profile-photo.jpg new file mode 100644 index 0000000..9fdf22c Binary files /dev/null and b/workspaces/website/public/scott-nath-profile-photo.jpg differ diff --git a/workspaces/website/src/assets/logos/dev.svg b/workspaces/website/src/assets/logos/dev.svg new file mode 100644 index 0000000..da355fe --- /dev/null +++ b/workspaces/website/src/assets/logos/dev.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/workspaces/website/src/assets/logos/linkedin.svg b/workspaces/website/src/assets/logos/linkedin.svg index 883fa9b..892b710 100644 --- a/workspaces/website/src/assets/logos/linkedin.svg +++ b/workspaces/website/src/assets/logos/linkedin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/workspaces/website/src/assets/scott-nath-profile-photo.jpeg b/workspaces/website/src/assets/scott-nath-profile-photo.jpeg new file mode 100644 index 0000000..70d8640 Binary files /dev/null and b/workspaces/website/src/assets/scott-nath-profile-photo.jpeg differ diff --git a/workspaces/website/src/assets/scott-nath-profile-photo.jpg b/workspaces/website/src/assets/scott-nath-profile-photo.jpg new file mode 100644 index 0000000..9fdf22c Binary files /dev/null and b/workspaces/website/src/assets/scott-nath-profile-photo.jpg differ diff --git a/workspaces/website/src/components/DevToUser.astro b/workspaces/website/src/components/DevToUser.astro index ea5d6cc..2a21099 100644 --- a/workspaces/website/src/components/DevToUser.astro +++ b/workspaces/website/src/components/DevToUser.astro @@ -3,17 +3,26 @@ // @see https://github.com/withastro/astro/issues/8660 // @future-feature: import { user } from 'profile-components/devto-utils'; import devto from 'profile-components/devto-utils'; +import profilePic from '~/assets/scott-nath-profile-photo.jpeg'; const user = devto.user; +const popularPost = { + "title": "Running a local multi-framework composition Storybook", + "url": "https://dev.to/scottnath/running-a-local-multi-framework-composition-storybook-506l", + "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--vyFzl9Ml--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv4luam96ya9sxsjotjx.png", + "social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--HJA-rw9l--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv4luam96ya9sxsjotjx.png", +} + const userContent = await user.generateContent({ username: 'scottnath', - profile_image: '/scott-nath-profile-pic.jpeg' + profile_image: profilePic.src, + popular_post: popularPost, },true); let userHTML = ''; userHTML += user.html(userContent); --- - + diff --git a/workspaces/website/src/components/GitHubUser.astro b/workspaces/website/src/components/GitHubUser.astro index e7210ad..a603d5c 100644 --- a/workspaces/website/src/components/GitHubUser.astro +++ b/workspaces/website/src/components/GitHubUser.astro @@ -3,12 +3,13 @@ // @see https://github.com/withastro/astro/issues/8660 // @future-feature: import { user } from 'profile-components/github-utils'; import github from 'profile-components/github-utils'; +import profilePic from '~/assets/scott-nath-profile-photo.jpeg'; const user = github.user; const repos = JSON.stringify(['scottnath/profile-components', 'storydocker/storydocker']); const userContent = await user.generateContent({ login: 'scottnath', - avatar_url: '/scott-nath-profile-pic.jpeg', + avatar_url: profilePic.src, repos },true); let userHTML = ''; diff --git a/workspaces/website/src/components/Header.astro b/workspaces/website/src/components/Header.astro index c4152a4..9d0a295 100644 --- a/workspaces/website/src/components/Header.astro +++ b/workspaces/website/src/components/Header.astro @@ -1,23 +1,156 @@ --- +import DopeStripesHTML from 'scottnath-components/src/dope-stripes/html.js'; +import DopeStripesStyles from 'scottnath-components/src/dope-stripes/style.css?inline'; import HeaderLink from './HeaderLink.astro'; -import { SITE_TITLE } from '../consts'; +import { SITE_TITLE, SITE_SUBTITLE } from '../consts'; +import profilePic from '~/assets/scott-nath-profile-photo.jpeg'; +import devLogo from '~/assets/logos/dev.svg'; +import githubLogo from '~/assets/logos/github-inverse.svg'; +import linkedinLogo from '~/assets/logos/linkedin.svg'; +import mastodonLogo from '~/assets/logos/Mastodon.svg'; + +let stripesHTML = ''; +stripesHTML += DopeStripesHTML(['#ffd273', '#ffbf57', '#ffa43b', '#ff8920', '#ff6e05']); ---
-

- {SITE_TITLE} -

- + + + +
+

+ {SITE_TITLE} +

+

{SITE_SUBTITLE}

+ Scott Nath picture + + +
+ DEV logoDEV + GitHub logoGitHub + LinkedIn logoLinkedIn + Mastodon logoMastodon +
+
diff --git a/workspaces/website/src/components/resume/styles/resume.css b/workspaces/website/src/components/resume/styles/resume.css index a76d24e..2c99414 100644 --- a/workspaces/website/src/components/resume/styles/resume.css +++ b/workspaces/website/src/components/resume/styles/resume.css @@ -1,25 +1,7 @@ -.with-conic-gradient { - --angle: 0deg; - border-style: solid; - border-width: 2px; - border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1; +.resume { padding: 1em; - - animation: 10s rotate linear infinite; -} - -@keyframes rotate { - to { - --angle: 360deg; - } -} - -@property --angle { - syntax: ''; - initial-value: 0deg; - inherits: false; } .print-show { @@ -79,13 +61,15 @@ } .resume__section { background-color: #fff; + color: var(--bg-color-normal); margin: 1em auto; padding: 1em; border-radius: .5em; - overflow: hidden + overflow: hidden; } .resume__section .title { font-weight: 300; + color: var(--bg-color-normal) } a.title-link svg, diff --git a/workspaces/website/src/consts.ts b/workspaces/website/src/consts.ts index 451d1ee..982dedf 100644 --- a/workspaces/website/src/consts.ts +++ b/workspaces/website/src/consts.ts @@ -2,8 +2,8 @@ // You can import this data from anywhere in your site by using the `import` keyword. export const SITE_TITLE = 'Scott Nath'; -export const SITE_SUBTITLE = 'Front-end UI DevOps architect, full-stack software engineer, and team lead.'; -export const SITE_DESCRIPTION = `${SITE_SUBTITLE} Extensive experience creating UI development systems with a focus on where developers and designers collaborate.`; +export const SITE_SUBTITLE = 'Front-end architect'; +export const SITE_DESCRIPTION = `${SITE_SUBTITLE}, full-stack software engineer, and developer advocate. Extensive experience creating UI development systems with a focus on where developers and designers collaborate.`; export const RESUME_DEFUALTS = { name: SITE_TITLE, diff --git a/workspaces/website/src/layouts/BlogPost.astro b/workspaces/website/src/layouts/BlogPost.astro index dbdd31e..c2a7342 100644 --- a/workspaces/website/src/layouts/BlogPost.astro +++ b/workspaces/website/src/layouts/BlogPost.astro @@ -10,7 +10,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
- {heroImage && } + {heroImage && }

{title}

{ diff --git a/workspaces/website/src/pages/index.astro b/workspaces/website/src/pages/index.astro index 566bb40..31662ef 100644 --- a/workspaces/website/src/pages/index.astro +++ b/workspaces/website/src/pages/index.astro @@ -17,16 +17,10 @@ import mastodonLogo from '~/assets/logos/Mastodon.svg';
-

Hi, I'm Scott Nath.

-

{SITE_DESCRIPTION}

- -

Find me here:

- - - +
+

{SITE_DESCRIPTION}

+ +