Resume Page Template for Astro

---
import Resume from '@templates/Resume.astro'

const layout = {
    seo: { ... } // Your SEO configuration
    menu: { ... } // Menu configuration
    footer: { ... } // Footer configuration
}

const avatar = { ... } // Avatar shown at the top of the sidebar
const cta = { ... } // An optional CTA button shown next to your name
const skills = { ... } // List of your core skills
const experiences = { ... } // List of your professional experience
const education = { ... } // List of your education
const contact = { ... } // Contact form information
---

<Resume
    layout={layout}
    avatar={avatar}
    name="Alex Morgan"
    role="Astro & Frontend Developer"
    cta={cta}
    skillsTitle="Core Skills"
    skills={skills}
    experienceTitle="Professional Experience"
    experiences={experiences}
    education={education}
    contact={contact}
>
    <h2>About Me</h2>
    <p>Additional content</p>
</Resume>

---
import Resume from '@templates/Resume.astro'

// Your layout with SEO, including menu and footer
const layout: ResumeProps['layout'] = {
    seo: {
        title: 'Resume Template - Webcore',
        url: 'https://webcoreui.dev/',
        description: 'A customizable and easy to use template for professional resumes.',
        faviconUrl: '/logo.svg',
        canonical: 'https://webcoreui.dev/',
        prefetchGTAG: true,
        prefetchGA: true,
        meta: [
            { name: 'keywords', content: 'cv' }
        ]
    },
    menu: {
        logo: {
            html: logo
        },
        items: [
            { name: 'Templates', href: '/templates' }
        ]
    },
    footer: {
        logo: {
            html: logo
        },
        columns: [
            {
                title: 'Sitemap',
                items: [
                    { name: 'Home', href: '/' }
                ]
            }
        ],
        subText: `© ${new Date().getFullYear()} Webcore. All Rights Reserved.`
    }
}

// Avatar shown at the top of the sidebar
const avatar: ResumeProps['avatar'] = {
    img: '/img/alex-morgan.png',
    alt: 'Astro Developer Profile Photo',
    size: 120,
    borderless: true
}

// Your name and role
const name: ResumeProps['name'] = 'Alex Morgan'
const role: ResumeProps['role'] = 'Astro & Frontend Developer'

// An optional CTA button shown next to your name
const cta: ResumeProps['cta'] = {
    text: 'Download CV',
    icon: downloadIcon,
    href: '#',
    target: '_blank'
}

// Title of the section showing your core skills in the sidebar
const skillsTitle: ResumeProps['skillsTitle'] = 'Core Skills'

// List of your core skills
const skills: ResumeProps['skills'] = [{
    title: 'Frameworks & Libraries',
    items: [
        { text: 'Astro' },
        { text: 'React' },
        { text: 'Svelte' }
    ]
}]

// Title of the section showing your professional experience
const experienceTitle: ResumeProps['experienceTitle'] = 'Professional Experience'

// List of your professional experience
const experiences: ResumeProps['experiences'] = [{
    img: {
        src: '/img/placeholder9.png',
        alt: 'Frontend logo',
        width: 50,
        height: 50
    },
    title: 'Frontend Engineer',
    subText: 'Digital Agency · 2019 – 2022',
    list: [
        'Implemented scalable UI systems',
        'Focused on accessibility',
        'Worked closely with backend teams'
    ],
    theme: 'info'
}]

// List of your education
const education: ResumeProps['education'] = [{
    items: [{
        label: 'B.Sc. in Computer Science',
        subText: 'University of Technology · 2015 – 2019',
        badge: {
            text: 'Honors',
            theme: 'secondary'
        }
    }]
}]

// Contact form information
const contact: ResumeProps['contact'] = {
    show: true,
    title: 'Get in Touch'
}
---

<Resume
    layout={layout}
    avatar={avatar}
    name={name}
    role={role}
    cta={cta}
    skillsTitle={skillsTitle}
    skills={skills}
    experienceTitle={experienceTitle}
    experiences={experiences}
    education={education}
    contact={contact}
>
    <h2>About Me</h2>
    <p>Astro-focused frontend developer</p>
</Resume>

type ResumeProps = {
    layout: LayoutProps
    avatar?: AvatarProps
    skillsTitle?: string
    skills: {
        title: string
        items: BadgeProps[]
    }[]
    name: string
    role?: string
    cta?: ({
        text: string
        icon?: IconProps['type'] | string
    } & ButtonProps)
    experienceTitle?: string
    experiences: CardWithListProps[]
    educationTitle?: string
    education?: TilesProps[]
    contact?: {
        show?: boolean
        title?: string
        form?: FormField[]
    }
}