About This Site

---
import Layout from '@layouts/Layout.astro';
import styles from '@styles/index.module.css';
import { Content as AboutMe } from '@components/about-me.md';
import { getCollection } from 'astro:content';
import ContentCard from '@components/ContentCard.astro';

const projects = await getCollection('projects');
---

<Layout title="Welcome" hidenavbar>
  <div class={ styles.title }>
    <h1>Hi, I'm Grady!</h1>
    <span>Scroll to view more!</span>
  </div>
  <div class={ styles.content }>
    <div class={ styles.section }>
      <h2>About Me</h2>
      <AboutMe /> 
    </div>
    <div class={ styles.section }>
      <h2>Projects</h2>
      <div class={ styles.projects }>
        { projects.map(project => (
        <ContentCard img={ project.data.img.url } title={ project.data.title } date={ project.data.date } alt={ project.data.img.alt } url={`/project/${project.slug}/`} desc={ project.data.desc } fit={ project.data.img.fit } />
        )) }
      </div>
    </div>
  </div>
</Layout>

<script>
import styles from '@styles/index.module.css';
import navStyles from '@styles/NavBar.module.css';
import { animate, scroll } from 'motion';

window.scrollTo(0, 0);

const navbar = document.querySelector('.' + navStyles.nav) as HTMLElement;
const title = document.querySelector('.' + styles.title) as HTMLElement;

scroll(animate(title.children[0], { fontSize: '32px' }));
scroll(animate(navbar, { x: navbar.clientWidth }));
scroll(animate(title.children[1], { fontSize: 0 }));
scroll(animate(navbar.clientHeight / 2, 104, { onUpdate: top => title.style.top = top + 'px' }));
scroll(animate(window.innerWidth / 2, window.innerWidth > 1500 ? 386 : window.innerWidth / 2 + navbar.clientWidth / 2, { onUpdate: left => title.style.left = left + 'px' }));
</script>

I originally started developing this site around when I turned 12. It uses Astro v5 to generate the site. The animations are done with motion.dev and just plain css. This site is hosted by CloudFlare pages and currently has 11,073 lines of Astro code within the src folder.