devscard/src/pages/index.astro

55 lines
2.2 KiB
Text

---
import SidebarItem from '@/atoms/sidebar-item';
import Sidebar from '@/organisms/sidebar.astro';
import ExperienceSection from '@/sections/experience-section.astro';
import FavoritesSection from '@/sections/favorites-section.astro';
import MainSection from '@/sections/main-section.astro';
import PortfolioSection from '@/sections/portfolio-section.astro';
import SkillsSection from '@/sections/skills-section.astro';
import TestimonialsSection from '@/sections/testimonials-section.astro';
import getObjectKeys from '@/utils/getObjectKeys';
import data from '../data';
const { seo, ...dataWithoutSeo } = data;
---
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{seo.title}</title>
<meta name="description" content={seo.description} />
</head>
<body class="flex justify-center bg-gray-50">
<div class="flex relative transform-none gap-8 w-full max-w-5xl px-2 py-3 sm:px-8 sm:py-12 lg:py-20">
<div class="absolute -right-2">
<Sidebar className="hidden xl:flex fixed">
{
getObjectKeys(dataWithoutSeo).map((key) => {
const sectionData = dataWithoutSeo[key];
return sectionData && <SidebarItem client:only="react" icon={sectionData.config.icon} section={key} />;
})
}
</Sidebar>
</div>
<main class="w-full relative space-y-4 sm:space-y-6 lg:space-y-8">
<MainSection {...data.main} />
{data.skills && <SkillsSection {...data.skills} />}
{data.experience && <ExperienceSection {...data.experience} />}
{data.portfolio && <PortfolioSection {...data.portfolio} />}
{data.testimonials && <TestimonialsSection {...data.testimonials} />}
{data.favorites && <FavoritesSection {...data.favorites} />}
</main>
</div>
</body>
<script>
import updateHash from '../scripts/updateHash';
import data from '../data';
document.addEventListener('scroll', () => updateHash(data));
</script>
</html>