hero, about, recent works

This commit is contained in:
Ivacsony Szilard 2024-02-16 23:36:28 +02:00
parent dfbbcb2ce4
commit 8c91a5e22b
18 changed files with 328 additions and 48 deletions

View File

@ -6,7 +6,9 @@
"license": "MIT",
"require": {
"php": "^8.1",
"blade-ui-kit/blade-heroicons": "^2.3",
"codeat3/blade-emblemicons": "^1.3",
"codeat3/blade-phosphor-icons": "^2.0",
"guzzlehttp/guzzle": "^7.2",
"laravel/framework": "^10.10",
"laravel/sanctum": "^3.3",

142
composer.lock generated
View File

@ -4,8 +4,77 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "e12e95bc1d05edb292b72a15931f3304",
"content-hash": "a550a2de1d7a4894ef77e60c531fd978",
"packages": [
{
"name": "blade-ui-kit/blade-heroicons",
"version": "2.3.0",
"source": {
"type": "git",
"url": "https://github.com/blade-ui-kit/blade-heroicons.git",
"reference": "a265dbcf2a098121aad05752d0bba9f59022e4ba"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/blade-ui-kit/blade-heroicons/zipball/a265dbcf2a098121aad05752d0bba9f59022e4ba",
"reference": "a265dbcf2a098121aad05752d0bba9f59022e4ba",
"shasum": ""
},
"require": {
"blade-ui-kit/blade-icons": "^1.6",
"illuminate/support": "^9.0|^10.0|^11.0",
"php": "^8.0"
},
"require-dev": {
"orchestra/testbench": "^7.0|^8.0|^9.0",
"phpunit/phpunit": "^9.0|^10.5|^11.0"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"BladeUI\\Heroicons\\BladeHeroiconsServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"BladeUI\\Heroicons\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Dries Vints",
"homepage": "https://driesvints.com"
}
],
"description": "A package to easily make use of Heroicons in your Laravel Blade views.",
"homepage": "https://github.com/blade-ui-kit/blade-heroicons",
"keywords": [
"Heroicons",
"blade",
"laravel"
],
"support": {
"issues": "https://github.com/blade-ui-kit/blade-heroicons/issues",
"source": "https://github.com/blade-ui-kit/blade-heroicons/tree/2.3.0"
},
"funding": [
{
"url": "https://github.com/sponsors/driesvints",
"type": "github"
},
{
"url": "https://www.paypal.com/paypalme/driesvints",
"type": "paypal"
}
],
"time": "2024-02-07T16:33:46+00:00"
},
{
"name": "blade-ui-kit/blade-icons",
"version": "1.6.0",
@ -283,6 +352,77 @@
],
"time": "2023-03-10T15:05:08+00:00"
},
{
"name": "codeat3/blade-phosphor-icons",
"version": "2.0.2",
"source": {
"type": "git",
"url": "https://github.com/codeat3/blade-phosphor-icons.git",
"reference": "5881aeb0c782c1a41283bd12739dcbf2cd57c077"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/codeat3/blade-phosphor-icons/zipball/5881aeb0c782c1a41283bd12739dcbf2cd57c077",
"reference": "5881aeb0c782c1a41283bd12739dcbf2cd57c077",
"shasum": ""
},
"require": {
"blade-ui-kit/blade-icons": "^1.1",
"illuminate/support": "^8.0|^9.0|^10.0",
"php": "^7.4|^8.0"
},
"require-dev": {
"codeat3/blade-icon-generation-helpers": "^0.3",
"codeat3/phpcs-styles": "^1.0",
"orchestra/testbench": "^6.0|^7.0|^8.0",
"phpunit/phpunit": "^9.0"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"Codeat3\\BladePhosphorIcons\\BladePhosphorIconsServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"Codeat3\\BladePhosphorIcons\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Swapnil Sarwe",
"homepage": "https://swapnilsarwe.com"
},
{
"name": "Dries Vints",
"homepage": "https://driesvints.com"
}
],
"description": "A package to easily make use of \"Phosphor Icons\" in your Laravel Blade views.",
"homepage": "https://github.com/codeat3/blade-phosphor-icons",
"keywords": [
"blade",
"laravel",
"phosphor-icons"
],
"support": {
"issues": "https://github.com/codeat3/blade-phosphor-icons/issues",
"source": "https://github.com/codeat3/blade-phosphor-icons/tree/2.0.2"
},
"funding": [
{
"url": "https://github.com/swapnilsarwe",
"type": "github"
}
],
"time": "2023-07-05T07:52:12+00:00"
},
{
"name": "dflydev/dot-access-data",
"version": "v3.0.2",

View File

@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/

View File

@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

BIN
public/assets/up_arrow.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/

View File

@ -3,5 +3,5 @@
@tailwind utilities;
body {
@apply bg-gray-400;
overflow-x: hidden;
}

View File

@ -0,0 +1,7 @@
@extends('layout')
@section("title", "about")
@section('content')
<p>TEst</p>
@endsection

View File

@ -1,8 +1,95 @@
@extends('layout')
@section("title", "homepage")
@section('title', 'homepage')
@section('content')
<x-emblem-heart />
@endsection
{{-- Hero section --}}
<section class="w-full h-[700px] bg-light-gray">
<div class="flex h-full items-end justify-center">
<img src="assets/hero_image.jpg" alt="" class="mix-blend-multiply w-[501px] h-[655px] ">
</div>
<div
class="flex justify-start items-center min-w-[358px] h-[95px] bg-black rounded-l-full top-[278px] right-[-280px] absolute hover:-translate-x-[280px] duration-200">
<img src="assets/waving_hand.png" alt="" class="w-[45px] h-[45px] ml-[33px] mr-[28px]">
<p class="text-white text-heading3 font-medium pr-[27px]">Hi, I'm Szilard</p>
</div>
</section>
{{-- About section --}}
<section class="w-full bg-off-white">
<div class="flex justify-between pl-[80px] pr-[80px] pt-[160px]">
<p class="text-heading3">About</p>
<div class="max-w-[840px] text-para-large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</div>
</div>
</section>
{{-- Recent works section --}}
<section class="w-full bg-off-white">
<div class="flex justify-between pl-[80px] pr-[80px] pt-[160px]">
<p class="text-heading3">
Recent Work
</p>
<div class="flex flex-col w-full max-w-[840px] gap-y-[33px]">
<div class="flex justify-between items-center">
<div class="flex flex-col gap-y-[18px]">
<p class="text-heading2">Decodable.co</p>
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
</div>
<a href="" class="">
<div
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
<x-heroicon-o-arrow-up-right
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
</div>
</a>
</div>
<span class="w-full h-[1px] bg-black"></span>
<div class="flex justify-between items-center">
<div class="flex flex-col gap-y-[18px]">
<p class="text-heading2">Gofirefly.io</p>
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
</div>
<a href="" class="">
<div
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
<x-heroicon-o-arrow-up-right
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
</div>
</a>
</div>
<span class="w-full h-[1px] bg-black"></span>
<div class="flex justify-between items-center">
<div class="flex flex-col gap-y-[18px]">
<p class="text-heading2">Blinkops.com</p>
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
</div>
<a href="" class="">
<div
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
<x-heroicon-o-arrow-up-right
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
</div>
</a>
</div>
<span class="w-full h-[1px] bg-black"></span>
<div class="flex justify-between items-center">
<div class="flex flex-col gap-y-[18px]">
<p class="text-heading2">Withkanvas.com</p>
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
</div>
<a href="" class="">
<div
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
<x-heroicon-o-arrow-up-right
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
</div>
</a>
</div>
</div>
</div>
</section>
@endsection

View File

@ -10,5 +10,6 @@
<body>
@include('partials.navbar')
@yield('content')
@include('partials.footer')
</body>
</html>

View File

@ -0,0 +1,31 @@
<footer class="pl-[80px] pr-[80px] pt-[80px] pb-[33px] bg-black flex flex-col gap-y-[138px]">
<div class="flex flex-col">
<div class="flex justify-between items-center w-full">
<p class="text-off-white text-heading2">Have something in mid? <br> <img src="/assets/footer_image.jpg"
alt="" class="w-[80px] h-[80px] inline bg-transparent rounded-full"> let's build it together
</p>
<a href="/contact" class="w-[190px] h-[70px] rounded-full bg-off-white flex justify-center items-center text-para-m font-medium">
<div>
Get in touch
</div>
</a>
</div>
</div>
<div class="flex justify-between w-full">
<p class="text-off-white text-para-medium">Built with {{ '<3' }} by Ivacsony Szilard </p>
<div class="flex justify-between gap-x-[32px] text-off-white text-para-medium">
<a href="">
<p>Linkedin</p>
</a>
<a href="">
<p>Twitter</p>
</a>
<a href="">
<p>Instagram</p>
</a>
<a href="">
<p>Webflow</p>
</a>
</div>
</div>
</footer>

View File

@ -1,42 +1,20 @@
<header class="bg-gray-50">
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="text-center sm:text-left">
<h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Welcome Back, Barry!</h1>
<p class="mt-1.5 text-sm text-gray-500">Let's write a new blog post! 🎉</p>
</div>
<div class="mt-4 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
<button
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-200 bg-white px-5 py-3 text-gray-500 transition hover:text-gray-700 focus:outline-none focus:ring"
type="button"
>
<span class="text-sm font-medium"> View Website </span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</button>
<button
class="block rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-indigo-700 focus:outline-none focus:ring"
type="button"
>
Create Post
</button>
</div>
</div>
<nav class="top-0 absolute z-10 flex justify-between w-full pl-[80px] pr-[80px] pt-[26px]">
<div>
<a href="https://www.google.com" target="_blank">
<p class="text-black text-para-medium">
@Ivacsony Szilard
</p>
</a>
</div>
</header>
<div class="flex justify-between gap-[40px]">
<a href="">
<p class="text-para-medium">About</p>
</a>
<a href="">
<p class="text-para-medium]">Work</p>
</a>
<a href="">
<p class="text-para-medium">Contact</p>
</a>
</div>
</nav>

View File

@ -16,3 +16,7 @@ use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('homepage');
});
Route::get('/about', function () {
return view('about');
});

View File

@ -6,7 +6,25 @@ export default {
"./resources/**/*.vue",
],
theme: {
extend: {},
extend: {
colors: {
'black' : '#0B0C0E',
'dark-gray' : '#3C3D3E',
'light-gray' : '#C7D0D9',
'off-white' : '#F4F7FA',
},
//in general we should use rem instead of pixels for sizes
fontSize: {
'heading-display' : '150px',
'heading1' : '91px',
'heading2' : '60px',
'heading3' : '40px',
'heading4' : '27px',
'para-large' : '27px',
'para-medium' : '18px',
'para-small' : '14px',
},
},
},
plugins: [],
}