hero, about, recent works
This commit is contained in:
parent
dfbbcb2ce4
commit
8c91a5e22b
|
|
@ -6,7 +6,9 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"require": {
|
"require": {
|
||||||
"php": "^8.1",
|
"php": "^8.1",
|
||||||
|
"blade-ui-kit/blade-heroicons": "^2.3",
|
||||||
"codeat3/blade-emblemicons": "^1.3",
|
"codeat3/blade-emblemicons": "^1.3",
|
||||||
|
"codeat3/blade-phosphor-icons": "^2.0",
|
||||||
"guzzlehttp/guzzle": "^7.2",
|
"guzzlehttp/guzzle": "^7.2",
|
||||||
"laravel/framework": "^10.10",
|
"laravel/framework": "^10.10",
|
||||||
"laravel/sanctum": "^3.3",
|
"laravel/sanctum": "^3.3",
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,77 @@
|
||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "e12e95bc1d05edb292b72a15931f3304",
|
"content-hash": "a550a2de1d7a4894ef77e60c531fd978",
|
||||||
"packages": [
|
"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",
|
"name": "blade-ui-kit/blade-icons",
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
|
|
@ -283,6 +352,77 @@
|
||||||
],
|
],
|
||||||
"time": "2023-03-10T15:05:08+00:00"
|
"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",
|
"name": "dflydev/dot-access-data",
|
||||||
"version": "v3.0.2",
|
"version": "v3.0.2",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[ZoneTransfer]
|
||||||
|
ZoneId=3
|
||||||
|
HostUrl=https://www.figma.com/
|
||||||
|
|
@ -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 |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
[ZoneTransfer]
|
||||||
|
ZoneId=3
|
||||||
|
HostUrl=https://www.figma.com/
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
[ZoneTransfer]
|
||||||
|
ZoneId=3
|
||||||
|
HostUrl=https://www.figma.com/
|
||||||
|
|
@ -3,5 +3,5 @@
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-gray-400;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
@extends('layout')
|
||||||
|
|
||||||
|
@section("title", "about")
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<p>TEst</p>
|
||||||
|
@endsection
|
||||||
|
|
@ -1,8 +1,95 @@
|
||||||
@extends('layout')
|
@extends('layout')
|
||||||
|
|
||||||
@section("title", "homepage")
|
@section('title', 'homepage')
|
||||||
|
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<x-emblem-heart />
|
{{-- 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
|
@endsection
|
||||||
|
|
@ -10,5 +10,6 @@
|
||||||
<body>
|
<body>
|
||||||
@include('partials.navbar')
|
@include('partials.navbar')
|
||||||
@yield('content')
|
@yield('content')
|
||||||
|
@include('partials.footer')
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -1,42 +1,20 @@
|
||||||
<header class="bg-gray-50">
|
<nav class="top-0 absolute z-10 flex justify-between w-full pl-[80px] pr-[80px] pt-[26px]">
|
||||||
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
|
<div>
|
||||||
<div class="sm:flex sm:items-center sm:justify-between">
|
<a href="https://www.google.com" target="_blank">
|
||||||
<div class="text-center sm:text-left">
|
<p class="text-black text-para-medium">
|
||||||
<h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Welcome Back, Barry!</h1>
|
@Ivacsony Szilard
|
||||||
|
</p>
|
||||||
<p class="mt-1.5 text-sm text-gray-500">Let's write a new blog post! 🎉</p>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex justify-between gap-[40px]">
|
||||||
<div class="mt-4 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
|
<a href="">
|
||||||
<button
|
<p class="text-para-medium">About</p>
|
||||||
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"
|
</a>
|
||||||
type="button"
|
<a href="">
|
||||||
>
|
<p class="text-para-medium]">Work</p>
|
||||||
<span class="text-sm font-medium"> View Website </span>
|
</a>
|
||||||
|
<a href="">
|
||||||
<svg
|
<p class="text-para-medium">Contact</p>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</a>
|
||||||
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>
|
||||||
</div>
|
</nav>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
|
||||||
|
|
@ -16,3 +16,7 @@ use Illuminate\Support\Facades\Route;
|
||||||
Route::get('/', function () {
|
Route::get('/', function () {
|
||||||
return view('homepage');
|
return view('homepage');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Route::get('/about', function () {
|
||||||
|
return view('about');
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,25 @@ export default {
|
||||||
"./resources/**/*.vue",
|
"./resources/**/*.vue",
|
||||||
],
|
],
|
||||||
theme: {
|
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: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue