astro-neumorphism

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@5.11
• 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/
│   │   ├── Article.tsx
│   │   ├── ContainerScroll.astro
│   │   ├── ContainerUp.astro
│   │   ├── Layout.astro
│   │   ├── MainCard.astro
│   │   ├── MainContainer.astro
│   │   ├── MediumPost.tsx
│   │   ├── RoundIconButton.astro
│   │   ├── SquareIconLink.astro
│   │   ├── StarCount.tsx
│   │   ├── Technologies.astro
│   │   ├── TextSlide.astro
│   │   └── icons/
│   │       └── IconAstro.astro
│   │       └── IconBlog.astro
│   │       └── IconGithub.astro
│   │       └── IconHome.astro
│   │       └── IconInstagram.astro
│   │       └── IconMenu.astro
│   │       └── IconSun.astro
│   │       └── IconTwitter.astro
│   │       └── IconUser.astro
│   │       └── index.js
│   ├── images/
│   │   ├── avatar.jpeg
│   │   └── placeholder.jpeg
│   └── pages/
│       ├── aboutme.astro
│       ├── index.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-neumorphism-roan.vercel.app/

Credits

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