suyono
/
blog-ts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upper body finished

This commit is contained in:
Suyono 2023-09-25 22:17:46 +10:00
parent bfed20c1c1
commit 2dbf116ddf
6 changed files with 62 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.idea/prettier.xml Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PrettierConfiguration">
<option name="myConfigurationMode" value="MANUAL" />
<option name="myRunOnReformat" value="true" />
</component>
</project>

4
app/globals.css
View File

@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.cover {
background-image: url("../public/assets/placeholder.webp");
}

64
app/page.tsx
View File

@ -2,30 +2,46 @@ import Image from "next/image";
export default function Home() {
return (
<div className="flex flex-col bg-white">
<div className="ml-20 py-10">
<p>SUYONO</p>
</div>
<div className="bg-gray-100">
<div className="flex flex-row ml-20">
<div>one</div>
<div>two</div>
</div>
</div>
<div className="bg-cover bg-center h-screen flex flex-col-reverse cover">
<div className="bg-neutral-100 bg-opacity-40 flex flex-col py-10">
<p className="text-white text-center">SUYONO</p>
<p className="text-white text-center">A Tech Archive</p>
</div>
</div>
<div className="flex flex-row justify-center">
<div className="border">
<Image src="/assets/pthumb.webp" alt="post thumbnail" width={454} height={341} />
<div className="flex flex-col">
</div>
</div>
<div className="flex flex-col bg-white">
<div className="ml-20 py-8">
<p className="font-sans text-2xl font-extralight">SUYONO</p>
</div>
<div className="bg-gray-100">
<div className="flex flex-row ml-20">
<a href="#" className="m-2 font-extralight text-sm">
Home
</a>
<a href="#" className="m-2 font-extralight text-sm">
About
</a>
<a href="#" className="m-2 font-extralight text-sm">
Blog
</a>
</div>
</div>
)
<div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover">
<div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10">
<p className="text-white text-center text-7xl font-extralight font-sans mb-6">
SUYONO
</p>
<p className="text-white text-center font-sans font-extralight text-xl mb-10">
A Tech Archive
</p>
</div>
<div className="h-64"></div> {/* spacer */}
<div className="h-64"></div> {/* spacer */}
</div>
<div className="flex flex-row justify-center">
<div className="border">
<Image
src="/assets/pthumb.webp"
alt="post thumbnail"
width={454}
height={341}
/>
<div className="flex flex-col"></div>
</div>
</div>
</div>
);
}

3
package.json
View File

@ -21,5 +21,8 @@
"react-dom": "18.2.0",
"tailwindcss": "3.3.3",
"typescript": "5.2.2"
},
"devDependencies": {
"prettier": "3.0.3"
}
}

11
pnpm-lock.yaml
View File

@ -42,6 +42,11 @@ dependencies:
specifier: 5.2.2
version: 5.2.2
devDependencies:
prettier:
specifier: 3.0.3
version: 3.0.3
packages:
/@aashutoshrathi/word-wrap@1.2.6:
@ -2060,6 +2065,12 @@ packages:
engines: {node: '>= 0.8.0'}
dev: false
/prettier@3.0.3:
resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
engines: {node: '>=14'}
hasBin: true
dev: true
/prop-types@15.8.1:
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
dependencies:

1
tailwind.config.ts
View File

@ -12,6 +12,7 @@ const config: Config = {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'blog-cover': "url('/assets/placeholder.webp')"
},
},
},