yhrhee/astro-neumorphism

A simple and responsive template focused on the entire UI design style with neumorphism styles. Built with AstroJS, TypeScript, Preact, and styled with Tailwind CSS.

Astro Neumorphism (made with ❤️ by pabloLC)

• A simple and responsive template focused on the entire UI design style with neumorphism styles.

🧑‍🚀 Features

• Interactive and customizable card in the homepage. (please, do hover the card asap you can! )
• Display a list with your Medium posts just replacing your Medium's username.
• Fully responsive site - Depending on the viewport it shows different components.
• Dark mode could be configured using tailwind.config.js.
• Build using TypeScript and Preact lib.
• Styled with Tailwind CSS.
• Uses astro@1.0
• Modular - The structure is highly modular, feel free to customize or add new components.
• Font family - The Google font Raleway has been integrated into the project. It's not using a CDN.

⛵️ Medium post about why I built this theme

• Why I built a theme for the AstroJS community

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── Layout.astro
│   │   └── allOfThem
    │   ├── icons/
    │   │   └── Icons.astro
│   ├── images/
│   │   └── avatar.jpg
│   └── pages/
│       └── index.astro
│       └── aboutme.astro
│       └── postlist.astro
│   └── styles/
│       └── base.css
└── tailwind.config.js
└── package.json

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying

🫶 Any feedback is always welcome! ✨✨

🚀 Live demo URL: https://astro-neumorph.deno.dev/

Credits

• Background animated
  • Source: https://github.com/midudev/miduconf-website; @midudev | JS community 🇪🇸