Disclaimer

Only some functionality has been configured for this page!
Think of implementing Next/Previous (Pagination for index and article page).

This is the final chapter and you have now learned how to setup a project from scratch

  • Set up the Astro framework.
  • Install dependencies with NPM.
  • Navigate VS Code and Git.
  • Create a simple HyGraph project.
  • Refactor code effectively.
  • Design your Astro blog/portfolio layout.
  • Import components seamlessly.
  • Fetch data from the HyGraph API.
  • Basic understanding on how to use Tailwind CSS.

If you’ve been following the project, you should now feel at ease using the Astro framework, considering the topics we’ve covered.

However, there’s still plenty more to explore. This project has intentionally been kept straightforward, so if you’re interested in diving deeper, I encourage you to visit the following link: https://astro.build

still much to do, but I will leave it up to you

play with colours, choose the colours that reflects you!

change fonts, layouts and components

explore funtionalities

This is how data is fetched

Product Landing Page Space: A near-perfect vacuum, almost void of matter, where sound doesn’t carry. Stars, galaxies, and mysteries abound. Space could be a whole lot bigger! https://codepen.io/search/pens?q=product+landing+page <p><strong>The Tiny Gardener</strong> 🌱🐞 Timmy, no taller than a daisy, tended the enchanted garden. His watering can dripped dew, and ladybugs were his helpers. One day, a grumpy gnome stomped in. “Too small!” he scoffed. But Timmy smiled. He planted kindness seeds. Soon, the garden bloomed with friendship. The gnome? He became the tallest sunflower, reaching for the sky.</p><pre><code>&lt;ProjectLayout title={project.name}&gt; &lt;TextArticle /&gt; &lt;section class=&quot;my-24&quot;&gt; &lt;div class=&quot;flex text-xs md:text-xl font-Futurewave&quot;&gt; &lt;a href=&quot;/&quot;&gt;home&lt;/a&gt; &lt;a href=&quot;/portfolio&quot;&gt;/portfolio&lt;/a&gt; &lt;a href={`/portfolio/${project.slug}`}&gt;/{project.slug}&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;font-Futurewave&quot;&gt; &lt;a href=&quot;/portfolio&quot;&gt;go back to index&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;prose dark:prose-invert prose-h1:font-bold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl prose-headings:underline prose-headings:font-Futurewave&quot; &gt; &lt;h1&gt;{project.name}&lt;/h1&gt; &lt;h4 class=&quot;text-lg&quot;&gt;Key Take-Away&lt;/h4&gt;{project.description} &lt;img class=&quot;h-64 w-auto&quot; src={project.image[0].url} alt={`${project.image[0].url}`} /&gt; &lt;div set:html={project.content.html} /&gt; &lt;h3&gt;Credits | sourceCode&lt;/h3&gt; &lt;div class=&quot;text-sm&quot;&gt; &lt;a href={project.sourceCode} target=&quot;_blank&quot;&gt;{project.sourceCode}&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/ProjectLayout&gt;</code></pre><p></p>
home /portfolio /product-landing-page
go back go to blog

Product Landing Page

Key Take-Away

Space: A near-perfect vacuum, almost void of matter, where sound doesn’t carry. Stars, galaxies, and mysteries abound. Space could be a whole lot bigger! https://media.graphassets.com/zFS0oC0yRrKVveJQfWqw

The Tiny Gardener 🌱🐞 Timmy, no taller than a daisy, tended the enchanted garden. His watering can dripped dew, and ladybugs were his helpers. One day, a grumpy gnome stomped in. “Too small!” he scoffed. But Timmy smiled. He planted kindness seeds. Soon, the garden bloomed with friendship. The gnome? He became the tallest sunflower, reaching for the sky.

<ProjectLayout title={project.name}>
  <TextArticle />
  <section class="my-24">
    <div class="flex text-xs md:text-xl font-Futurewave">
      <a href="/">home</a>
      <a href="/portfolio">/portfolio</a>
      <a href={`/portfolio/${project.slug}`}>/{project.slug}</a>
    </div>
    <div class="font-Futurewave">
      <a href="/portfolio">go back to index</a>
    </div>
    <div
      class="prose dark:prose-invert prose-h1:font-bold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl prose-headings:underline prose-headings:font-Futurewave"
    >
      <h1>{project.name}</h1>
      <h4 class="text-lg">Key Take-Away</h4>{project.description}
      <img
        class="h-64 w-auto"
        src={project.image[0].url}
        alt={`${project.image[0].url}`}
      />
      <div set:html={project.content.html} />
      <h3>Credits | sourceCode</h3>
      <div class="text-sm">
        <a href={project.sourceCode} target="_blank">{project.sourceCode}</a>
      </div>
    </div>
  </section>
</ProjectLayout>

Credits | sourceCode

https://codepen.io/search/pens?q=product+landing+page