const [project, setProject] = createSignal(0);
onMount(() => {
const interval = setInterval(() => {
setProject((value) => (projects.length - 1 === value ? 0 : value + 1));
}, 1000);
return () => clearInterval(interval);
});
return (
<section id='projects' class={styles.projects}>
<Title color='primary' size='large' element='h3'>
My Projects
</Title>
<div class={styles.list}>
<ArrowLeft />
<div class={styles.project_container}>
<img src={projects[project()].image} />
<div class={styles.hr}>
<hr />
</div>
<div class={styles.project_description}>
<Title color='primary' size='small' element='h4'>
{projects[project()].name}
</Title>
<p class={styles.paragraph}>{projects[project()].description}</p>
</div>
</div>
<ArrowRight />
</div>
</section>
);
const [project, setProject] = createSignal(0);
onMount(() => {
const interval = setInterval(() => {
setProject((value) => (projects.length - 1 === value ? 0 : value + 1));
}, 1000);
return () => clearInterval(interval);
});
return (
<section id='projects' class={styles.projects}>
<Title color='primary' size='large' element='h3'>
My Projects
</Title>
<div class={styles.list}>
<ArrowLeft />
<div class={styles.project_container}>
<img src={projects[project()].image} />
<div class={styles.hr}>
<hr />
</div>
<div class={styles.project_description}>
<Title color='primary' size='small' element='h4'>
{projects[project()].name}
</Title>
<p class={styles.paragraph}>{projects[project()].description}</p>
</div>
</div>
<ArrowRight />
</div>
</section>
);