astro-neumorphism
astro-neumorphism copied to clipboard
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
[email protected]
- 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
🚀 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 🇪🇸