roryhealy
/
roryhealy.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create header, add colour palette to tailwind

This commit is contained in:
Rory Healy 2023-07-12 00:26:36 +10:00
parent 7f185165e0
commit f8c67ef92a
Signed by: roryhealy
GPG Key ID: 610ED1098B8F435B
8 changed files with 96 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.editorconfig Normal file
View File

@ -0,0 +1,10 @@
root=true
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
[{*.tsx,*.css}]
indent_size = 2

3
app/globals.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

18
app/layout.tsx Normal file
View File

@ -0,0 +1,18 @@
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: "Hello, I'm Rory",
description: 'The personal website of Rory Healy.',
icons: {
icon: 'favicon.svg'
}
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='en'>
<body>{children}</body>
</html>
);
}

11
app/page.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import Header from '@/components/header';
export default function Home() {
return (
<main className='h-screen w-screen bg-custom-grey'>
<Header />
</main>
);
}

14
components/header-button.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
interface IHeaderButton {
displayText: string;
}
export default function HeaderButton({ displayText }: IHeaderButton) {
return (
<div className='grid grid-rows-2 justify-center gap-y-1 justify-items-center'>
<p className='text-center text-4xl text-custom-white'>{displayText}</p>
<div className='bg-custom-blue-1 h-1 rounded w-full hover:w-1/2 transition-all duration-300 ease-in-out'></div>
</div>
);
}

15
components/header.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import HeaderButton from './header-button';
export default function Header() {
return (
<header className='grid grid-cols-10 px-14 pt-8'>
<p className='uppercase col-span-6 text-left text-4xl text-custom-white'>Rory Healy</p>
<HeaderButton displayText='Home'/>
<HeaderButton displayText='Projects'/>
<HeaderButton displayText='About'/>
<HeaderButton displayText='Contact'/>
</header>
);
}

15
public/favicon.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" version="1.1" viewBox="0 0 52.917 52.917" xmlns="http://www.w3.org/2000/svg">
<g>
<g fill="none">
<g stroke-width="6.2548">
<circle cx="52.917" cy="52.917" r="49.789" stroke="#ed8796"/>
<circle cx="57.326" cy="57.326" r="49.789" stroke="#f5a97f"/>
<circle cx="61.736" cy="61.736" r="49.789" stroke="#eed49f"/>
<circle cx="66.146" cy="66.146" r="49.789" stroke="#a6da95"/>
<circle cx="70.556" cy="70.556" r="49.789" stroke="#7dc4e4"/>
<circle cx="74.965" cy="74.965" r="49.789" stroke="#c6a0f6"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 623 B

18
tailwind.config.js
View File

@ -6,13 +6,15 @@ module.exports = {
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
colors: {
'custom-grey': '#252b2d',
'custom-blue-1': '#507dbc',
'custom-blue-2': '#a1c6ea',
'custom-blue-3': '#bbd1ea',
'custom-white': '#dae3e5'
},
},
plugins: [],
fontFamily: {
sans: ['IBM Plex Sans', 'sans']
}
}
}