- A simple and responsive template focused on the entire UI design style with neumorphism styles.
- 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.
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
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 |
🚀 Live demo URL: https://astro-neumorphism-roan.vercel.app/
- Background animated
- Source: https://github.com/midudev/miduconf-website; @midudev | JS community 🇪🇸