Create version with frosted glass repository cards

shaansubbaiah / Portfolio

👤 Automatically generate and deploy a beautiful, responsive, static-site to display your GitHub projects.

MIT License

82 stars 13 forks source link

Create version with frosted glass repository cards #8

Open shaansubbaiah opened 3 years ago

shaansubbaiah commented 3 years ago

Add option to enable frosted glass repository cards.

Would look something like:

Figma CSS properties look something like this:

position: absolute;
left: 24.44%;
right: 24.3%;
top: 30.98%;
bottom: 30.98%;

background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(60px);

/* Note: backdrop-filter has minimal browser support */
border-radius: 28px;

sebanti10 commented 3 years ago

I would like to contribute!

shaansubbaiah commented 3 years ago

@sebanti10 go ahead!

Also note, the fastest way to test CSS changes is by generating a portfolio first then editing the CSS in the dist/ folder. The changes can then be added to resources/CSS.

sebanti10 commented 3 years ago

Thank you so much for the heads up! Also, should the frosted glass effect be enabled for the night mode as well?

shaansubbaiah commented 3 years ago

I guess like a dark colored glass would look good. I think iOS dark mode implements something similar :P

shaansubbaiah commented 3 years ago

Currently being worked on in #9