Design and build a simple portfolio homepage using the bento-grid layout style.
Participants should create a modern, clean UI that showcases projects, images, and small snippets of work inside visually distinct bento cards.
This task is UI-focused, requiring basic layout skills, good spacing, and responsive behavior. No backend or complex interactivity is needed.
🧩 Requirements
Create a clean portfolio layout using bento-style cards.
Include sections such as:
-A short intro/about card
-A project showcase card
-An image gallery or visual snippet card
-A skills/tech stack card (optional)
-Use a responsive grid so the bento layout adapts for mobile, tablet, and desktop.
-Maintain modern UI standards: rounded corners, spacing, hierarchy, typography.
-Implement hover & focus states for clickable cards or links.
📋 Tasks / Checklist
-Set up basic project folder with HTML/CSS (JS optional).
-Create the main grid container using CSS Grid or flexbox.
-Add multiple bento cards (3–6 recommended).
-Apply distinct styling to each card (color accents, images, or icons).
-Add intro/about content in one of the cards.
-Add at least one project preview card with a title and short description.
-Add an image or visual showcase card.
-Make the grid fully responsive across screen sizes.
-Add hover & focus states for any clickable elements.
-Test all breakpoints (mobile/tablet/desktop) for stability and readability.
🎯 Acceptance Criteria
-A visually clean, modern bento-style portfolio layout is implemented.
-Contains at least 3 distinct bento cards (intro + project + visual snippet).
-Cards have proper spacing, consistent styling, and readable typography.
-Hover and focus states are present on interactive elements.
-No layout breakage, overflow, or overlapping at any screen size.
-No backend or advanced JavaScript required.
Mockup:
Design and build a simple portfolio homepage using the bento-grid layout style.
Participants should create a modern, clean UI that showcases projects, images, and small snippets of work inside visually distinct bento cards.
This task is UI-focused, requiring basic layout skills, good spacing, and responsive behavior. No backend or complex interactivity is needed.
🧩 Requirements
Create a clean portfolio layout using bento-style cards.
Include sections such as:
-A short intro/about card
-A project showcase card
-An image gallery or visual snippet card
-A skills/tech stack card (optional)
-Use a responsive grid so the bento layout adapts for mobile, tablet, and desktop.
-Maintain modern UI standards: rounded corners, spacing, hierarchy, typography.
-Implement hover & focus states for clickable cards or links.
📋 Tasks / Checklist
-Set up basic project folder with HTML/CSS (JS optional).
-Create the main grid container using CSS Grid or flexbox.
-Add multiple bento cards (3–6 recommended).
-Apply distinct styling to each card (color accents, images, or icons).
-Add intro/about content in one of the cards.
-Add at least one project preview card with a title and short description.
-Add an image or visual showcase card.
-Make the grid fully responsive across screen sizes.
-Add hover & focus states for any clickable elements.
-Test all breakpoints (mobile/tablet/desktop) for stability and readability.
🎯 Acceptance Criteria
-A visually clean, modern bento-style portfolio layout is implemented.
-Contains at least 3 distinct bento cards (intro + project + visual snippet).
-Cards have proper spacing, consistent styling, and readable typography.
-Hover and focus states are present on interactive elements.
-No layout breakage, overflow, or overlapping at any screen size.
-No backend or advanced JavaScript required.
Mockup: