hero, about, recent works
This commit is contained in:
parent
dfbbcb2ce4
commit
8c91a5e22b
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
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')
|
||||
|
||||
@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
|
||||
|
|
|
|||
|
|
@ -10,5 +10,6 @@
|
|||
<body>
|
||||
@include('partials.navbar')
|
||||
@yield('content')
|
||||
@include('partials.footer')
|
||||
</body>
|
||||
</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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -16,3 +16,7 @@ use Illuminate\Support\Facades\Route;
|
|||
Route::get('/', function () {
|
||||
return view('homepage');
|
||||
});
|
||||
|
||||
Route::get('/about', function () {
|
||||
return view('about');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue