---
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 & Front-End Web Developer</span>
    </header>
    <mdui-card variant="outlined">
        <section id="about">
            <h2>About Me</h2>
            <mdui-divider></mdui-divider>
            <article>
                <p>
                    Hello, I'm Henry Hiles, a developer specialising in Flutter
                    and Web development. I'm proficient with Dart, Astro,
                    Node.JS, and TypeScript.
                </p>
                <p>
                    I build high-performance, intuitive applications with clean,
                    efficient code and modern design principles.
                </p>
                <p>
                    Always eager to learn, I’ve earned certifications from
                    Microsoft, Google, and Meta in cloud computing, AI, and
                    cybersecurity.
                </p>
                <p>
                    Whether I'm optimising 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 specialises 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 class="double">
                                <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 organisations
                    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>
                    Hire me 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:" + "contact@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 for a quote
            </ButtonLink>
        </section>
    </mdui-card>
</Layout>
