react-icons/hi#HiOutlineLocationMarker TypeScript Examples

export default function Index(props: Props) {
	const {data: projects = props.pinnedRepos} = useGitHubPinnedRepos('alii');

	const {data: lanyard} = useLanyard(DISCORD_ID, {
		fallbackData: props.lanyard,
	});

	const boostedActivity = lanyard?.activities.find(
		activity => activity.application_id === '932730208820265011',
	);

	return (
		<>
			<div className="space-y-4">
				<div className="flex items-center space-x-3">
					<a
						href="https://github.com/alii/website"
						target="_blank"
						rel="noreferrer"
						aria-label="GitHub Profile"
					>
						<SiGithub className="w-7 h-7" />
						<span className="sr-only">GitHub Profile</span>
					</a>

					<a
						href="https://twitter.com/alistaiiiir"
						target="_blank"
						rel="noreferrer"
						aria-label="Twitter Profile"
					>
						<SiTwitter className="w-7 h-7" />
						<span className="sr-only">Twitter Profile</span>
					</a>

					{lanyard && (
						<p className="inline-flex items-center space-x-2">
							<a
								target="_blank"
								href={`https://search.alistair.sh/?q=!maps+${lanyard.kv.location}`}
								rel="noreferrer"
								className="flex items-center px-2 pr-3 text-neutral-600 dark:text-white no-underline bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-800 rounded-full transition-colors dark:text-opacity-50"
							>
								<span>
									<HiOutlineLocationMarker className="inline dark:text-white" />
									&nbsp;
								</span>

								<span className="-mb-0.5">
									{lanyard.kv.location}
									&nbsp;
								</span>

								<span className="block -mb-0.5 ml-1 w-[6px] h-[6px] bg-gray-600 dark:bg-white rounded-full animate-pulse" />
							</a>

							{boostedActivity?.timestamps && (
								<p className="flex items-center px-2 pr-3 text-neutral-600 dark:text-white no-underline bg-gray-200 dark:bg-gray-700 rounded-full transition-colors dark:text-opacity-50">
									<span>
										<GiSkateboard className="inline dark:text-white" />
										&nbsp;
									</span>

									<span className="-mb-0.5">
										Boosted boarding for{' '}
										{dayjs(boostedActivity.timestamps.start).fromNow(true)}
										&nbsp;
									</span>

									<span className="block -mb-0.5 ml-1 w-[6px] h-[6px] bg-gray-600 dark:bg-white rounded-full animate-pulse" />
								</p>
							)}
						</p>
					)}
				</div>

				<h1 className="text-3xl font-bold sm:text-4xl md:text-6xl">
					Hey, I'm{' '}
					<span className="text-blue-700 dark:text-white">Alistair</span> ✌️
				</h1>

				<p className="opacity-80">
					I'm a ~{age.toPrecision(7)} year old software engineer from the United
					Kingdom. I'm interested in full stack web development including large
					scale frontend applications and performant serverside code.
				</p>
			</div>

			<div className="space-y-4">
				<h1 className="text-2xl font-bold sm:text-3xl">What do I do? ?</h1>
				<p className="opacity-80">
					Honestly, a few too many things to count on one hand... I'm currently
					having a fantastic time working with{' '}
					<a href="https://hop.io" target="_blank" rel="noreferrer">
						Hop
					</a>{' '}
					- we're building an e2e realtime engine for video. Below are some of
					the more popular open source projects I've worked on. In total, the
					following repos have earnt me{' '}
					{projects.reduce(
						(acc, project) => acc + parseInt(project.stars, 10),
						0,
					)}{' '}
					stars! Thank you! ?
				</p>

				<div className="grid grid-cols-1 auto-cols-max gap-1 sm:grid-cols-2 sm:gap-3">
					{projects.map(project => (
						<ProjectCard key={project.repo} repo={project} />
					))}
				</div>
			</div>

			<div className="space-y-4">
				<h1 className="text-2xl font-bold sm:text-3xl">Technologies ?</h1>

				<p className="opacity-80">
					I use a wide range of tools to tackle each hurdle in the most
					efficient manner possible. I really love working with containersation,
					especially Docker; it's proven to be a reliable bit of kit for both
					production and development environments.
				</p>

				<ul className="grid grid-cols-3 gap-4 sm:grid-cols-4">
					<ListItem icon={SiDocker} text="Docker" />
					<ListItem icon={SiRedis} text="Redis" />
					<ListItem icon={SiPostgresql} text="Postgres" />
					<ListItem icon={SiReact} text="React.js" />
					<ListItem icon={SiNodeDotJs} text="Node.js" />
					<ListItem icon={SiTypescript} text="TypeScript" />
					<ListItem icon={SiGo} text="Golang" />
					<ListItem icon={SiJava} text="Java" />
					<ListItem icon={SiAmazonaws} text="AWS" />
					<ListItem icon={SiWebstorm} text="WebStorm" />
					<ListItem icon={SiNextDotJs} text="Next.js" />
					<ListItem icon={SiWebpack} text="Webpack" />
					<ListItem icon={SiBabel} text="Babel" />
					<ListItem icon={SiYarn} text="Yarn" />
					<ListItem icon={SiTailwindcss} text="TailwindCSS" />
					<ListItem icon={SiGit} text="Git" />
					<ListItem icon={SiStyledComponents} text="styled-components" />
					<ListItem icon={SiMongodb} text="Mongo" />
				</ul>
			</div>
		</>
	);
}