---
import "../styles/index.css"
import { Image } from "astro:assets"
import Layout from "../layouts/Layout.astro"
import logoLong from "../images/logoLong.svg"
import ai900 from "../images/certificates/ai900.png"
import az900 from "../images/certificates/az900.png"
import dp900 from "../images/certificates/dp900.png"
import quantarcSite from "../images/projects/quantarcSite.png"
import jobProcessor from "../images/projects/jobProcessor.jpg"
import helpdesk from "../images/projects/helpdesk.jpg"
import googleCS from "../images/certificates/googleCS.png"
import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
import ButtonLink from "../components/ButtonLink.astro"
---

<Layout>
    <header id="home">
        <Image src={logoLong} alt="Henry Hiles" />
        <span>Multiplatform Flutter Developer and Front-End Web Developer</span>
    </header>
    <mdui-card variant="outlined">
        <section id="about">
            <h2>About Me</h2>
            <mdui-divider></mdui-divider>
            <article>
                <p>
                    Hello, my name is Henry Hiles, a developer specializing in
                    Flutter, Astro, TypeScript, and Node.js. I build
                    high-performance, intuitive applications with clean,
                    efficient code and modern design principles. Always eager to
                    learn, I’ve earned certifications from Microsoft, Google,
                    and Meta in cloud computing, AI, and cybersecurity. Whether
                    I'm optimizing mobile apps or designing websites, I’m
                    passionate about delivering innovative digital solutions.
                </p>
            </article>

            <a
                href="https://github.com/Henry-Hiles"
                target="_blank"
                rel="noreferrer"
                id="stats"
            >
                <div>
                    <img
                        src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
                        alt="My Github Stats"
                    />
                    <img
                        src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/languages.svg${
                            false ? "#gh-light-mode-only" : "#gh-dark-mode-only"
                        }`}
                        alt="My Github Stats"
                    />
                </div>
            </a>
        </section>
    </mdui-card>
    <mdui-card variant="outlined">
        <section id="projects">
            <h2>My Projects</h2>
            <mdui-divider></mdui-divider>
            <div>
                {
                    [
                        <section>
                            <article>
                                <h3>The new Quantarc website</h3>
                                <p>
                                    I developed the new website for Quantarc, a
                                    UK firm that specializes in providing
                                    management solutions to both private and
                                    public entities.
                                </p>
                            </article>
                            <aside>
                                <Image
                                    src={quantarcSite}
                                    alt="The new quantarc.co.uk website"
                                />
                            </aside>
                        </section>,
                        <section>
                            <article>
                                <h3>Quantarc Mobile Apps</h3>
                                <p>
                                    I designed, and developed, and distributed
                                    two mobile apps for Quantarc, QHelpdesk and
                                    QJobProcessor. QHelpdesk streamlines
                                    customer support by enabling users to
                                    submit, track, and manage requests
                                    efficiently, while QJobProcessor allows
                                    contractors to see, complete, and update
                                    jobs. My responsibilities included UI/UX
                                    design, multiplatform support, and app
                                    development.
                                </p>
                            </article>
                            <aside>
                                <Image
                                    src={jobProcessor}
                                    alt="The QJobProcessor mobile app"
                                />
                                <Image
                                    src={helpdesk}
                                    alt="The QHelpdesk mobile app"
                                />
                            </aside>
                        </section>,
                    ].map((elem) => (
                        <mdui-card variant="outlined">{elem}</mdui-card>
                    ))
                }
            </div>
        </section>
    </mdui-card>
    <mdui-card variant="outlined">
        <section id="certificates">
            <h2>Certifications</h2>
            <mdui-divider></mdui-divider>

            <article>
                <p>
                    I have obtained certifications from renowned organizations
                    such as Google, Meta, and Microsoft, spanning various
                    fields, including cybersecurity, artificial intelligence,
                    Microsoft Azure cloud services, and front-end development:
                </p>
            </article>

            <mdui-card variant="outlined">
                <a
                    href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
                    target="_blank"
                    rel="noreferrer"
                >
                    <Image src={az900} alt="Azure Fundamentals Badge" />
                </a>
                <a
                    href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
                    target="_blank"
                    rel="noreferrer"
                >
                    <Image src={dp900} alt="Azure Data Fundamentals Badge" />
                </a>
                <a
                    href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
                    target="_blank"
                    rel="noreferrer"
                >
                    <Image src={ai900} alt="Azure AI Fundamentals Badge" />
                </a>
                <a
                    href="https://www.credly.com/badges/acbec46c-7304-4bb5-8784-53fdcdc5544d/public_url"
                    target="_blank"
                    rel="noreferrer"
                >
                    <Image
                        src={metaFrontEnd}
                        alt="Meta Front-End Developer Badge"
                    />
                </a>
                <a
                    href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
                    target="_blank"
                    rel="noreferrer"
                >
                    <Image src={googleCS} alt="Google Cybersecurity Badge" />
                </a>
            </mdui-card>
        </section>
    </mdui-card>
    <mdui-card variant="outlined">
        <section id="hire">
            <h2>Hire Me</h2>
            <mdui-divider></mdui-divider>

            <article>
                <p>
                    I am available for hire to design and develop
                    high-performance static websites and versatile multiplatform
                    applications. With a focus on clean, efficient code and
                    intuitive user experiences, I create solutions that are not
                    only visually appealing but also optimized for speed,
                    accessibility, and seamless functionality across all
                    devices.
                </p>
            </article>

            <ButtonLink
                href={"mai" + "lto:" + "henry@henr" + "yhiles." + "com"}
            >
                <mdui-icon>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        ><path
                            fill="none"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="m9.474 16l9.181 3.284a1.1 1.1 0 0 0 1.462-.887L21.99 4.239c.114-.862-.779-1.505-1.567-1.13L2.624 11.605c-.88.42-.814 1.69.106 2.017l2.44.868l1.33.467M13 17.26l-1.99 3.326c-.65.808-1.959.351-1.959-.683V17.24a2 2 0 0 1 .53-1.356l3.871-4.2"
                        ></path></svg
                    ></mdui-icon
                >
                Contact me to receive a quote
            </ButtonLink>
        </section>
    </mdui-card>
</Layout>
