Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: adjust project card responsive #34

Merged
merged 1 commit into from
May 13, 2024
Merged

chore: adjust project card responsive #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/common/constant/stack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const STACKS: stacksProps = {
Bootstrap: (
<SiBootstrap size={iconSize} className="text-purple-500" />
),
GraphQL: <SiGraphql size={iconSize} className="text-pink-600" />,
// GraphQL: <SiGraphql size={iconSize} className="text-pink-600" />,
"Material UI": <SiMui size={iconSize} className="text-sky-400" />,
Vite: <SiVite size={iconSize} className="text-purple-500" />,
PostgreSql: <BiLogoPostgresql size={iconSize} className="text-blue-500" />,
Expand Down
6 changes: 3 additions & 3 deletions src/components/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const Navbar: React.FC<Navigation> = ({ active }) => {
variants={navbarVariants}
initial={"hidden"}
animate={"visible"}
className="w-screen flex justify-between fixed top-5 md:top-7 right-0 left-0 px-4 md:px-7 z-50 -translate-x-1/2"
className="w-screen flex justify-between fixed top-5 md:top-7 right-0 left-0 px-1.5 md:px-7 z-50 -translate-x-1/2"
>
{METADATA.authors.isAvailable ? (
<div className="hidden md:block w-44">
Expand All @@ -74,11 +74,11 @@ const Navbar: React.FC<Navigation> = ({ active }) => {
METADATA.authors.isAvailable && "md:-ml-40"
} bg-white/70 dark:bg-[#212121] border border-gray-300 dark:border-white/20 backdrop-blur-sm shadow-inner hover:drop-shadow-lg transition-all duration-200 rounded-full`}
>
<motion.ul className="flex items-center">
<motion.ul className="overflow-auto flex items-center">
{dataNavbar.map(({ id, navigate, navigate_url, offset }) => (
<motion.li
key={`${navigate}`}
className={`w-[5rem] md:w-32 py-2 md:py-3 text-sm md:text-base text-center text-primary bg-gradient-to-r rounded-full transition-all ease-in duration-75 cursor-pointer ${
className={`w-[5rem] md:w-32 py-2 md:py-3 text-sm md:text-base text-center text-primary bg-gradient-to-r rounded-full transition-all ease-in duration-75 ${
active === navigate_url
? "text-white from-[#3b52ff] to-[#aa00c0] font-bold"
: "text-primary hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-[#3b52ff] hover:to-[#aa00c0] font-medium"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Projects/Badge.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const colors = {
} as const;
---
<span
class={`${colors[color]} absolute top-0 right-0 text-sm rounded-tr-lg rounded-bl-lg py-1 px-3`}
class={`${colors[color]} absolute top-0 right-0 text-sm rounded-tr-lg rounded-bl-lg py-1 px-3 shadow`}
>
{text}
</span>
4 changes: 2 additions & 2 deletions src/components/Projects/ProjectCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ const { name, role, url, image, description, languages, slug } = Astro.props;
class="relative dark:bg-zinc-800 bg-white dark:text-zinc-400 text-zinc-500 gap-1 p-5 border dark:border-zinc-700/60 rounded-lg flex flex-col"
>
<Badge text={role} color={colors[role]} />
<div class="flex gap-3">
<div class="flex flex-col md:flex-row gap-3">
<Image
src={`${image}`}
alt={name}
loading="eager"
class="object-cover w-[100px] md:w-[200px] group-hover:scale-[1.03] transition-all duration-700 rounded-lg"
class="object-cover w-full md:w-[275px] group-hover:scale-[1.03] transition-all duration-700 rounded-lg"
width={200}
height={200}
/>
Expand Down
Loading