Improve home page

app/Livewire/Blog/PostCell.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Livewire\Blog;
+
+use App\Models\Post;
+use Livewire\Component;
+
+class PostCell extends Component
+{
+    public Post $post;
+}

app/Livewire/Home.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Post;
+use App\Models\Project;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.public.page', ['title' => 'Harley O\'Connor'])]
+class Home extends Component
+{
+
+    public $projects, $posts;
+
+    public function mount(): void
+    {
+        $this->projects = Project::where('standout', '1')->get();
+        $this->posts = Post::latest()->take(3)->get();
+    }
+
+}

app/Livewire/Portfolio/ProjectCell.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Livewire\Portfolio;
+
+use App\Models\Project;
+use Livewire\Component;
+
+class ProjectCell extends Component
+{
+    public Project $project;
+}

resources/css/app.css

@@ -92,6 +92,11 @@ select:focus[data-flux-control] {
     width: calc(var(--spacing) * 128);
 }
 
+.text-link {
+    color: var(--color-accent);
+    text-decoration: underline;
+}
+
 #blog-body-container {
     overflow: hidden;
 

resources/views/livewire/blog/blog-index.blade.php

@@ -19,11 +19,7 @@ function hideAdminPanel() {
         @endisAdmin
         <flux:heading size="xl" class="pb-4">Blog</flux:heading>
         @foreach($posts as $post)
-            <article class="px-2 py-3 border-b border-b-divider">
-                <flux:heading class="text-xl mb-0.5!"><a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a></flux:heading>
-                <flux:subheading size="sm">Published on {{ $post->created_at->format('j F Y') }}</flux:subheading>
-                <flux:subheading size="md" class="mt-1.5 text-zinc-700 dark:text-zinc-50">{{ $post->summary }}</flux:subheading>
-            </article>
+            <livewire:blog.post-cell :post="$post" wire:key="post-cell-{{ $post->id }}"/>
         @endforeach
     </div>
 </div>

resources/views/livewire/blog/post-cell.blade.php

@@ -0,0 +1,6 @@
+<article class="py-3 border-b border-b-divider">
+    <flux:heading class="text-xl mb-0.5!"><a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a></flux:heading>
+    <flux:subheading size="sm">Published on {{ $post->created_at->format('j F Y') }}</flux:subheading>
+    <flux:subheading size="md" class="mt-1.5 text-zinc-700 dark:text-zinc-50">{{ $post->summary }}</flux:subheading>
+</article>
+

resources/views/livewire/home.blade.php

@@ -0,0 +1,44 @@
+<div class="flex justify-center h-full">
+    <div class="mt-10 mx-5 py-6 md:py-8 lg:py-12 lg:mx-10 xl:mx-auto w-full max-w-6xl
+                relative rounded-md border bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-600">
+        <div class="px-5 md:px-10 lg:px-15 border-b border-divider h-auto md:h-120 lg:h-116">
+            <img src="/images/profile-cutout.png" alt="Cutout of Harley O'Connor" class="hidden md:block float-right md:h-120 lg:h-116" style="shape-margin: 4rem; shape-outside: url({{ '"' . asset('/images/profile-cutout-shape.png') . '"' }});" />
+            <flux:heading level="1" size="xl" class="font-mono font-bold! text-4xl md:text-6xl lg:text-7xl">Harley <span
+                    class="font-light tracking-tighter">O'Connor</span></flux:heading>
+            <flux:text class="mt-4 lg:mt-6 text-base lg:text-lg! text-zinc-600 dark:text-zinc-300">
+                I am a Software Engineer and recent graduate of the <a href="https://www.manchester.ac.uk" class="text-link" target="_blank">University of Manchester</a>
+                in which I undertook a Computer Science BSc.
+            </flux:text>
+            <div class="flex gap-3 mt-4 items-center">
+                <a href="https://github.com/Harleyoc1" target="_blank">
+                    <img src="/images/brands/github-mark.png" alt="GitHub Icon" class="h-6 dark:hidden" />
+                    <img src="/images/brands/github-mark-white.png" alt="GitHub Icon" class="h-6 hidden dark:block" />
+                </a>
+                <a href="https://linkedin.com/in/harleyoconnor/" target="_blank"><img src="/images/brands/LI-In-Bug.png" alt="LinkedIn Icon" class="h-6" /></a>
+            </div>
+            <div class="flex justify-center items-end h-full md:hidden">
+                <img src="/images/profile-cutout.png" alt="Cutout of Harley O'Connor" class="w-64" />
+            </div>
+        </div>
+        <div class="px-5 md:px-10 lg:px-15 border-b border-b-divider">
+            <flux:heading level="2" size="xl" class="mt-8 md:text-3xl lg:text-4xl">Portfolio standouts</flux:heading>
+            <flux:text class="text-sm lg:text-base text-zinc-500 dark:text-zinc-400">
+                A couple of the standout projects I have worked on. For more view my <a href="{{ route('portfolio.index') }}" class="text-link">portfolio page</a>.
+            </flux:text>
+            <div class="my-4 space-y-4! [&>*]:mx-0! md:[&>*]:m-0! md:flex md:gap-4 md:[&>*]:w-[50%]">
+                @foreach($projects as $project)
+                    <livewire:portfolio.project-cell :project="$project"/>
+                @endforeach
+            </div>
+        </div>
+        <div class="px-5 md:px-10 lg:px-15">
+            <flux:heading level="2" size="xl" class="mt-8 md:text-3xl lg:text-4xl">Latest blog posts</flux:heading>
+            <flux:text class="text-sm lg:text-base text-zinc-500 dark:text-zinc-400">
+                My most recent blog posts. For more view my <a href="{{ route('blog.index') }}" class="text-link">blog page</a>.
+            </flux:text>
+            @foreach($posts as $post)
+                <livewire:blog.post-cell :post="$post" wire:key="post-cell-{{ $post->id }}"/>
+            @endforeach
+        </div>
+    </div>
+</div>

resources/views/livewire/portfolio/portfolio-index.blade.php

@@ -22,24 +22,7 @@ function hideAdminPanel() {
             <div class="masonry-sizer w-[50%]! md:w-[33.3333%]!"></div>
             @foreach($projects as $project)
                 <div @class(['project', 'w-[50%]! md:w-[33.3333%]!' => !$project->standout, 'w-full! md:w-[66.6666%]!' => $project->standout])>
-                    <article class="m-1 px-5 py-6 border border-divider rounded-lg">
-                        <div class="flex justify-between items-center gap-2">
-                            <flux:heading class="text-xl mb-0.5!">{{ $project->title }}</flux:heading>
-                            @if($project->repo_link != null)
-                                <a href="{{ $project->repo_link }}" target="_blank">
-                                    <img src="/images/brands/github-mark.png" alt="GitHub Icon" class="h-6 dark:hidden" />
-                                    <img src="/images/brands/github-mark-white.png" alt="GitHub Icon" class="h-6 hidden dark:block" />
-                                </a>
-                            @else
-                                <flux:text size="sm" class="uppercase text-zinc-500">Closed source</flux:text>
-                            @endif
-                        </div>
-                        <flux:subheading size="md" class="mt-1.5 text-zinc-700 dark:text-zinc-50">{{ $project->summary }}</flux:subheading>
-                        <img src="{{ $project->getCoverImagePath() }}" alt="Cover image" class="my-3 w-full"/>
-                        <flux:subheading size="md" class="mt-1.5 uppercase text-zinc-400">
-                            {{ str_replace(', ', ' | ', $project->tools) }}
-                        </flux:subheading>
-                    </article>
+                    <livewire:portfolio.project-cell :project="$project"/>
                 </div>
             @endforeach
         </div>

resources/views/livewire/portfolio/project-cell.blade.php

@@ -0,0 +1,18 @@
+<article class="m-1 px-5 py-6 border border-divider rounded-lg">
+    <div class="flex justify-between items-center gap-2">
+        <flux:heading class="text-xl mb-0.5!">{{ $project->title }}</flux:heading>
+        @if($project->repo_link != null)
+            <a href="{{ $project->repo_link }}" target="_blank">
+                <img src="/images/brands/github-mark.png" alt="GitHub Icon" class="h-6 dark:hidden" />
+                <img src="/images/brands/github-mark-white.png" alt="GitHub Icon" class="h-6 hidden dark:block" />
+            </a>
+        @else
+            <flux:text size="sm" class="uppercase text-zinc-500">Closed source</flux:text>
+        @endif
+    </div>
+    <flux:subheading size="md" class="mt-1.5 text-zinc-700 dark:text-zinc-50">{{ $project->summary }}</flux:subheading>
+    <img src="{{ $project->getCoverImagePath() }}" alt="Cover image" class="my-3 w-full"/>
+    <flux:subheading size="md" class="mt-1.5 uppercase text-zinc-400">
+        {{ str_replace(', ', ' | ', $project->tools) }}
+    </flux:subheading>
+</article>

routes/web.php

@@ -3,6 +3,7 @@
 use App\Http\Middleware\IsAdminMiddleware;
 use App\Livewire\Blog\BlogIndex;
 use App\Livewire\Blog\ShowPost;
+use App\Livewire\Home;
 use App\Livewire\Portfolio\PortfolioIndex;
 use App\Livewire\Posts\CreatePost;
 use App\Livewire\Posts\EditPost;
@@ -17,9 +18,7 @@
 use App\Mail\Registration;
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', function () {
-    return view('home');
-})->name('home');
+Route::get('/', Home::class)->name('home');
 
 Route::get('blog', BlogIndex::class)->name('blog.index');
 Route::get('blog/{slug}', ShowPost::class)->name('blog.show');

tests/Feature/WelcomeTest.php → tests/Feature/HomeTest.php

@@ -2,15 +2,21 @@
 
 namespace Tests\Feature;
 
+use App\Livewire\Home;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Tests\TestCase;
 
-class WelcomeTest extends TestCase
+class HomeTest extends TestCase
 {
     use RefreshDatabase;
 
     public function test_returns_a_successful_response(): void
     {
         $this->get('/')->assertStatus(200);
     }
+
+    public function test_contains_livewire_component(): void
+    {
+        $this->get('/')->assertSeeLivewire(Home::class);
+    }
 }