{"size": 1617, "ext": "js", "max_stars_repo_path": "src/components/bio.js", "max_stars_repo_name": "starptr/www", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/bio.js", "max_issues_repo_name": "starptr/www", "max_issues_repo_issues_event_min_datetime": "2021-06-28T20:25:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T09:39:21.000Z", "max_forks_repo_path": "src/components/bio.js", "max_forks_repo_name": "starptr/www", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 19.7195121951, "max_line_length": 81, "alphanum_fraction": 0.5714285714}
/**
 * Bio component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Image from "gatsby-image";

import NowPlaying from "./NowPlaying";
import { rhythm } from "../utils/typography";

const Bio = props => {
	const data = useStaticQuery(graphql`
		query BioQuery {
			avatar: file(absolutePath: { regex: "/profile-pic-4.jpg/" }) {
				childImageSharp {
					fixed(width: 50, height: 50, quality: 100) {
						...GatsbyImageSharpFixed
					}
				}
			}
			site {
				siteMetadata {
					author {
						name
					}
					social {
						twitter
						instagram
						linkedin
					}
				}
			}
		}
	`);

	const { author, social } = data.site.siteMetadata;
	return (
		<div>
			<div
				style={{
					display: `flex`,
					alignItems: `center`,
					...props.style,
				}}
			>
				<Image
					fixed={data.avatar.childImageSharp.fixed}
					alt={author.name}
					style={{
						marginRight: rhythm(1 / 2),
						marginBottom: 0,
						minWidth: 50,
						borderRadius: `30%`,
					}}
					imgStyle={{
						borderRadius: `30%`,
						marginBottom: 0,
					}}
				/>
				<p
					style={{
						marginBottom: 0,
					}}
				>
					Streaming direct thought dumps from <strong>{author.name}</strong>.
					<br />
					Connect with me on{" "}
					<a href={`https://www.linkedin.com/in/${social.linkedin}`}>LinkedIn</a>! I'm
					currently listening to:
				</p>
			</div>
			<NowPlaying style={{ marginBottom: rhythm(1) }} />
		</div>
	);
};

export default Bio;
