added links to nav buttons

master
Nisse Lommerde 1 year ago
parent 73809cb730
commit 29398c8ce2

@ -0,0 +1,3 @@
<x-app-layout>
</x-app-layout>

@ -1,20 +1,25 @@
@props(['active'])
@props(['active', 'route'])
@php
$classes = ($active ?? false)
? 'py-1 px-3 bg-zinc-700/75 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
: 'py-1 px-3 bg-zinc-800 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
// $classes = ($active ?? false)
// ? 'group-hover:underline text-lime-100 text-shadow-sm shadow-lime-950 font-bold'
// : 'group-hover:underline text-blue-100 text-shadow-sm shadow-blue-950'
@endphp
<button class=" filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black">
<form action="{{$route}}"
method="get">
<button class="filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black"
type="submit">
<div class="{{$classes}}">
<div class="flex flex-row">
<div class="text-neutral-200 mr-[3px] text-shadow-sm shadow-zinc-950">
<div class="flex flex-row {{isset($active) ? 'font-bold' : ''}}">
<div class="text-neutral-200 mr-[3px] text-shadow-sm shadow-zinc-950 ">
<
</div>
<div {{$attributes->merge(['class' => 'group-hover:underline text-shadow-sm'])}}>
<div {{$attributes->merge(['class' => 'text-shadow-sm'])}}>
{{ $slot }}
</div>
<div class="text-neutral-200 ml-[2px] text-shadow-sm shadow-zinc-950">
@ -22,4 +27,5 @@
</div>
</div>
</div>
</button>
</button>
</form>

@ -6,12 +6,17 @@
<x-outer-card class="md:col-span-2">
<x-inner-card class="h-full">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
<p>
Hi! My name is Nisse. I'm a 25-year-old software development student. I created this website to
serve as a small repository and showcase of what I'm up to in my digital life. It's also an excuse to
<span class="line-through">ramble</span> write about some of the (probably at least mildly obscure) things I think a lot about.
</p>
<br>
<p>
Things I care about include music technology (including - but not limited to - custom samplers and
sequencers) as well as music production, programming, electronics, digital minimalism, Linux,
retro things of all sorts, video production, self-improvement and much more.
</p>
</x-inner-card>
</x-outer-card>
@ -24,12 +29,15 @@
<x-outer-card class="md:col-span-2">
<x-inner-card>
<p>
This website was designed from scratch as an homage to 90's and early 00's web design, perhaps
reminiscent of spaces like GeoCities.
</p>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
into electronic typesetting, remaining essentially unchanged.
</x-inner-card>
</x-outer-card>

@ -18,7 +18,7 @@
</x-news-item>
</li>
<li>
<x-news-item class="text-green-300"
<x-news-item class="text-lime-300"
date="2023-06-07"
link="#"
link_name="blog"
@ -26,7 +26,7 @@
</x-news-item>
</li>
<li>
<x-news-item class="text-green-400"
<x-news-item class="text-lime-400"
date="2023-06-05"
link="#"
link_name="blog"
@ -34,7 +34,7 @@
</x-news-item>
</li>
<li>
<x-news-item class="text-green-500"
<x-news-item class="text-lime-500"
date="2023-06-02"
link="#"
link_name="blog"
@ -42,7 +42,7 @@
</x-news-item>
</li>
<li>
<x-news-item class="text-green-600"
<x-news-item class="text-lime-600"
date="2023-06-02"
link="#"
link_name="blog"

@ -1,8 +1,8 @@
<x-outer-card>
<x-outer-card class="select-none">
<x-inner-card>
<div class="filter drop-shadow-pixel-lg shadow-black/75">
<div class="filter drop-shadow-pixel-lg shadow-blue-400/80">
<h1 class="text-6xl uppercase text-center font-bold text-red-500/50 text-shadow-md shadow-yellow-600">
<div class="filter drop-shadow-pixel-lg shadow-blue-400/80 hover:shadow-blue-600/80">
<h1 class="text-6xl uppercase text-center font-bold text-red-400/70 text-shadow-md shadow-blue-300 hover:text-red-300/70">
<< niisse.net >>
</h1>
</div>

@ -4,14 +4,29 @@
<div class="flex flex-row gap-x-2 text-xl font-ibm whitespace-nowrap">
<x-nav-button class="text-red-400 shadow-red-950"
:route="route('dashboard')"
:active="request()->routeIs('dashboard')">Home
</x-nav-button>
<x-nav-button class="text-yellow-300 shadow-yellow-950">About Me</x-nav-button>
<x-nav-button class="text-green-300 shadow-green-950">Projects</x-nav-button>
<x-nav-button class="text-blue-400 shadow-blue-950">Blog</x-nav-button>
<x-nav-button class="text-yellow-400 shadow-yellow-950"
:route="route('about')"
:active="request()->routeIs('about')">About Me
</x-nav-button>
<x-nav-button class="text-lime-400 shadow-lime-950"
:route="route('dashboard')"
:active="request()->routeIs('projects')"
>Projects
</x-nav-button>
<x-nav-button class="text-blue-400 shadow-blue-950"
:route="route('dashboard')"
:active="request()->routeIs('blog')"
>Blog
</x-nav-button>
<div class="ml-auto hidden md:flex">
<x-nav-button class="text-zinc-200 text-shadow-sm shadow-zinc-950">niisse.net</x-nav-button>
<x-nav-button class="text-zinc-200 shadow-zinc-950"
:route="route('dashboard')"
>niisse.net
</x-nav-button>
</div>
</div>
</div>

@ -21,6 +21,11 @@ use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('dashboard');
})->name('dashboard');
Route::get('/about', function () {
return view('about');
})->name('about');
// ->middleware(['auth', 'verified'])->name('dashboard');
//Route::middleware('auth')->group(function () {

Loading…
Cancel
Save