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

feat: add initial portfolio page layout and structure #1

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add initial portfolio page layout and structure #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ef23fb
feat: add initial portfolio page layout and structure
Jan 6, 2025
c4eeacf
Made global state to manage selected tabs
Jan 8, 2025
1fb567f
Improved code quality
Jan 9, 2025
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 index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body class="font-inter">
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
Expand Down
14 changes: 5 additions & 9 deletions src/components/tabs/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import { useState } from 'react';
import { useContext } from 'react';
import { TabContext } from '../../context/TabContext';

const navItems = [
{ name: 'View all', href: '#' },
{ name: 'Management', href: '#' },
{ name: 'Design', href: '#' },
{ name: 'Photographers', href: '#' },
{ name: 'Operations', href: '#' }
];

export default function Tabs() {
const [activeItem, setActiveItem] = useState('View all');
// using the tab's global context
const {navItems, activeItem, setActiveItem} = useContext(TabContext);

return (
<nav className="w-full overflow-x-auto flex justify-start sm:justify-center items-center px-2 sm:px-4 lg:px-8">
Expand All @@ -19,7 +15,7 @@ export default function Tabs() {
key={item.name}
href={item.href}
onClick={() => setActiveItem(item.name)}
className={`font-inter border-[1.2px] py-2 px-4 text-sm sm:text-md lg:text-lg text-black font-bold transition-colors rounded-full ${
className={`border-[1.2px] py-2 px-4 text-sm sm:text-md lg:text-lg text-black font-bold transition-colors rounded-full ${
activeItem === item.name
? 'border-black text-black'
: 'border-transparent text-gray-600 hover:text-gray-900'
Expand Down
2 changes: 2 additions & 0 deletions src/components/team/team_member.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useState } from "react";

export function TeamMember({ name, role, imageUrl }) {
return (
<div className="relative group">
Expand Down
65 changes: 24 additions & 41 deletions src/components/team/team_showcase.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,35 @@
import React from 'react';
import { TeamMember } from './team_member';
import { TabContext } from '../../context/TabContext';
import { useContext } from 'react';

export function TeamShowcase() {
const teamMembers = [
{
name: 'Emily Donnavan',
role: 'Product Lead',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
name: 'Jessica Dobrev',
role: 'Backend Lead',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
name: 'Drew Cano',
role: 'Head of UX',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
name: 'Emily Donnavan',
role: 'Product Lead',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
name: 'Jessica Dobrev',
role: 'Backend Lead',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
name: 'Drew Cano',
role: 'Head of UX',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
];

const {teamMembers, activeItem} = useContext(TabContext);
// getting the people whose team matches with the tab selected
const selectedTeamMembers = teamMembers.filter((member) => (member.team === activeItem))
return (
<div className="py-12 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{teamMembers.map((member) => (
<TeamMember
key={member.name}
name={member.name}
role={member.role}
imageUrl={member.imageUrl}
/>
))}
{
davepandit marked this conversation as resolved.
Show resolved Hide resolved
activeItem === 'View all' ? (teamMembers.map((member) => (
<TeamMember
key={member.id}
name={member.name}
role={member.role}
imageUrl={member.imageUrl}
/>
))) : (
selectedTeamMembers.map((member) => (
<TeamMember
key={member.id}
name={member.name}
role={member.role}
imageUrl={member.imageUrl}
/>
))
)
}
</div>
</div>
</div>
Expand Down
70 changes: 70 additions & 0 deletions src/context/TabContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { createContext } from "react";
import { useState } from "react";

export const TabContext = createContext(null);

export const TabContextProvider = (props) => {
// the items that are to be shown on the menu bar
const navItems = [
{ name: 'View all', href: '#' },
{ name: 'Management', href: '#' },
{ name: 'Design', href: '#' },
{ name: 'Photographers', href: '#' },
{ name: 'Operations', href: '#' }
];

// the team members detail(may come from some CMS in future)
const teamMembers = [
{
id:'1',
name: 'Emily Donnavan',
role: 'Product Lead',
team: 'Management',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
id:'2',
name: 'Jessica Dobrev',
role: 'Backend Lead',
team: 'Management',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
id:'3',
name: 'Drew Cano',
role: 'Head of UX',
team: 'Operations',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
id:'4',
name: 'Emily Donnavan',
role: 'Product Lead',
team: 'Photographers',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
id:'5',
name: 'Jessica Dobrev',
role: 'Backend Lead',
team: 'Design',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
{
id:'6',
name: 'Drew Cano',
role: 'Head of UX',
team: 'Design',
imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
},
];

// state to control the selected tab
const [activeItem, setActiveItem] = useState('View all');

return (
<TabContext.Provider value={{navItems, activeItem, setActiveItem, teamMembers}}>
{props.children}
</TabContext.Provider>
)
}
9 changes: 6 additions & 3 deletions src/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import { createRoot } from "react-dom/client"
import "./index.css"
import App from "./App.jsx"
import { BrowserRouter } from "react-router"
import { TabContextProvider } from "./context/TabContext.jsx"

createRoot(document.getElementById("root")).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
<TabContextProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</TabContextProvider>
</StrictMode>
)
2 changes: 1 addition & 1 deletion src/pages/portfolio/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const PortfolioPage = () => {
<>
{/* top most section */}
<div className="mt-11 flex flex-col justify-center items-center gap-y-4 px-4 sm:px-6 lg:px-8">
<span className="text-center font-inter font-bold text-3xl border-[1.2px] border-black rounded-full px-4 py-2 w-auto sm:text-4xl lg:text-5xl">
<span className="text-center font-bold text-3xl border-[1.2px] border-black rounded-full px-4 py-2 w-auto sm:text-4xl lg:text-5xl">
Meet our team
</span>
<span className="text-md opacity-60 sm:text-lg lg:text-xl lg:max-w-2xl text-center">
Expand Down