alexlam184/personal-web

v2

This is a Next.js project with TailwindCSS

My persoanl website is designed for showing personal background and sharing my personal thought in blog

Features

• About
• Blog

Installation

Install personal-web with yarn

  yarn install
  cd personal-web

Linting

ESLint

  yarn lint

Formatting

  yarn format

Running in development mode

Start the server

  yarn dev

Open http://localhost:3000 with your browser to see the result.

Tech Stack

Client: React, Next, TailwindCSS

Server:

Project: ESlint,Husky,Prettier (formatting)

Acknowledgements

• next-intl
• Code formatting
• husky
• react icon

Roadmap

• Additional browser support

• Markdown guide - Blog

• Readme guide - Blog

• Github guide - Blog

• Linux guide - Blog

Layer

Components	z-index
header	40

TailwindCSS Style

Screen

Components	min-width
sm	640px
md	768px
lg	1024px

REMARK

only use lg: is ok,the rest will be marked as small screen

// min screen width will be 10/12 of full screen (phone) , big screen wiil be width 100% (desktop)
<div className='absolute top-0 left-0 w-10/12 lg:w-full h-screen bg-white text-black z-40  lg:relative lg:w-full lg:h-full'>
  ...
</div>

License & Copyright

MIT

2023-11-25