Skip to content

Commit

Permalink
projects
Browse files Browse the repository at this point in the history
  • Loading branch information
Francis Igbiriki committed Sep 18, 2023
1 parent 4914e11 commit 700a33a
Show file tree
Hide file tree
Showing 16 changed files with 304 additions and 236 deletions.
Binary file added bun.lockb
View file
Binary file not shown.
Binary file added public/light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 9 additions & 8 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import Banner from './containers/banner/banner';
import Footer from './containers/footer/footer';
import Header from './containers/header/header';
import { darkTheme, lightTheme } from './styled/theme';
import React, { useState } from "react";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import Banner from "./containers/banner/banner";
import Footer from "./containers/footer/footer";
import Header from "./containers/header/header";
import { darkTheme, lightTheme } from "./styled/theme";
import Projects from "./containers/projects/projects";

const GlobalStyle = createGlobalStyle`
* {
Expand All @@ -24,7 +25,7 @@ export default function App() {
return (
<div
style={{
transition: '0.5s ease-in',
transition: "0.5s ease-in",
background: theme?.ichi,
color: theme?.yan,
}}
Expand All @@ -33,7 +34,7 @@ export default function App() {
<ThemeProvider theme={theme}>
<Header changeTheme={changeTheme} />
<Banner />

<Projects />
<Footer />
</ThemeProvider>
</div>
Expand Down
7 changes: 0 additions & 7 deletions src/components/Link/Link.jsx
View file

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/Link/index.jsx
View file

This file was deleted.

65 changes: 11 additions & 54 deletions src/components/Tabs/Tabs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import React, { Component } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import theme from "../../styled/theme";
import { TabButton, TabList, TabsWrapper } from "./tabs.styles";
// import withRipple from './withRipple';

const TabContent = styled.div`
Expand All @@ -27,7 +29,8 @@ class Tabs extends Component {
};

static defaultProps = {
tabBreak: '768px',
tabBreak: "768px",
theme: theme,
};

state = {
Expand All @@ -41,6 +44,7 @@ class Tabs extends Component {
render() {
const { children, tabBreak } = this.props;
const { selectedTab } = this.state;
console.log({ theme });

return (
<TabsWrapper>
Expand All @@ -49,69 +53,22 @@ class Tabs extends Component {
<TabButton
role="tab"
selected={selectedTab === index}
aria-selected={selectedTab === index ? 'true' : 'false'}
aria-selected={selectedTab === index ? "true" : "false"}
onClick={() => this.selectTab(index)}
style={{ color: 'white' }}
>
{label}
</TabButton>
))}
</TabList>

<Content>
<TabContent>
{React.Children.map(children, (comp, index) =>
selectedTab === index ? comp : undefined
)}
</Content>
</TabContent>
</TabsWrapper>
);
}
}

const TabsWrapper = styled.div`
flex: 1;
display: flex;
flex-direction: column;
`;

const TabButton = styled.button`
flex: 1;
height: 50px;
padding: 0px 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: default;
background: transparent;
outline: none;
transition: border-color 0.2s ease-in;
border: none;
border-bottom: 4px solid ${(props) => (props.selected ? 'blue' : '#fff')};
&:hover,
&:focus,
&:active {
border-bottom: 4px solid ${(props) => (props.selected ? 'blue' : '#eee')};
}
`;

const TabList = styled.div`
display: flex;
flex-direction: row;
width: 100%;
@media (max-width: ${(props) => props.breakPoint}) {
flex-direction: column;
& > div,
& > div > button {
width: 100%;
}
}
`;

const Content = styled.div`
flex: 1;
width: 100%;
padding-top: 16px;
`;

export default Tabs;
51 changes: 51 additions & 0 deletions src/components/Tabs/tabs.styles.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import styled from "styled-components";

export const TabsWrapper = styled.div`
flex: 1;
display: flex;
flex-direction: column;
`;

export const TabButton = styled.button`
flex: 1;
height: 50px;
padding: 0px 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: default;
background: transparent;
outline: none;
transition: border-color 0.2s ease-in;
border: none;
text-transform: capitalize;
color: ${(props) => props.theme.san};
border-bottom: 2px solid
${(props) => (props.selected ? props.theme.san : "#fff")};
&:hover,
&:focus,
&:active {
border-bottom: 2px solid
${(props) => (props.selected ? props.theme.san : "#fff")};
}
`;

export const TabList = styled.div`
display: flex;
flex-direction: row;
width: 100%;
@media (max-width: ${(props) => props.breakPoint}) {
flex-direction: column;
& > div,
& > div > button {
width: 100%;
}
}
`;

export const TabContent = styled.div`
flex: 1;
width: 100%;
padding-top: 16px;
`;
52 changes: 24 additions & 28 deletions src/containers/banner/banner.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,41 @@
import React from 'react';
import { Title } from '../../components/Text/Text';
import { StyledComponent } from './banner.styles';
import React from "react";
import { Title } from "../../components/Text/Text";
import { BannerContainer, StyledComponent } from "./banner.styles";
import { Link } from "styled-icons/evaicons-solid";

export default function Banner() {
return (
<StyledComponent>
<Title>
<code style={{ fontSize: '40px' }}>{'<Igbiriki Francis/>'}</code>
<code style={{ fontSize: "40px" }}>{"<Igbiriki Francis/>"}</code>
</Title>

<main
style={{
display: 'flex',
justifyContent: 'space-between',
gap: '20px',
}}
>
<BannerContainer>
<Link />
<a
href='https://github.com/igmrrf'
target='_blank'
rel='noreferrer noopener'
style={{ textDecoration: 'none' }}
href="https://github.com/igmrrf"
target="_blank"
rel="noreferrer noopener"
style={{ textDecoration: "none" }}
>
LinkedIn
</a>
<a
href="https://github.com/igmrrf"
target="_blank"
rel="noreferrer noopener"
style={{ textDecoration: "none" }}
>
Github
</a>
<a
href='https://twitter.com/igmrrf'
target='_blank'
rel='noreferrer noopener'
style={{ textDecoration: 'none' }}
href="https://twitter.com/igmrrf"
target="_blank"
rel="noreferrer noopener"
style={{ textDecoration: "none" }}
>
Twitter
</a>
</main>

{/* <Colors>
<Color color={'ichi'}>Ichi</Color>
<Color color={'ni'}>ni</Color>
<Color color={'san'}>san</Color>
<Color color={'yan'}>yan</Color>
</Colors> */}
</BannerContainer>
</StyledComponent>
);
}
15 changes: 13 additions & 2 deletions src/containers/banner/banner.styles.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
//Theming
import styled from 'styled-components';
import styled from "styled-components";

export const StyledComponent = styled.div`
// background-color: ${(props) => props.theme.ichi};
// // background-image: url("/light.png");
// // background-size: 400px 200px;
// // background-repeat: no-repeat;
// // background-position: center;
padding: 5vh 5vw;
min-height: 80vh;
min-height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -15,6 +20,12 @@ export const Colors = styled.div`
justify-content: center;
align-items: center;
`;

export const BannerContainer = styled.main`
display: flex;
justify-content: space-between;
gap: 20px;
`;
export const Color = styled.div.attrs((props) => ({
color: props.color,
}))`
Expand Down
6 changes: 3 additions & 3 deletions src/containers/footer/footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { Foot } from './footer.styles';
import React from "react";
import { Foot } from "./footer.styles";

export default function Footer() {
return (
<Foot>
<h1>Copyright @ igmrrf</h1>
<h2>Copyright @ igmrrf</h2>
</Foot>
);
}
Empty file added src/containers/header/header.styles.jsx
View file
Empty file.
24 changes: 10 additions & 14 deletions src/containers/projects/projects.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
import React from 'react';
import Tabs from '../../components/Tabs';
import { Title } from '../../components/Text/Text';
import Stack from '../stack/stack';
import { Button, CustomButton } from './projects.styles';
import ProjectData from '../../data/projects';
import React from "react";
import Tabs from "../../components/Tabs";
import { Title } from "../../components/Text/Text";
import Stack from "../stack/stack";
import { Button, CustomButton, ProjectsContainer } from "./projects.styles";
import ProjectData from "../../data/projects";

const ReversedButton = (props) => (
<Button {...props} children={props.children.split('').reverse()} />
<Button {...props} children={props.children.split("").reverse()} />
);

export default function Projects() {
return (
<div>
<ProjectsContainer>
<Title>Projects</Title>
<Button>Fake Json API</Button>
<CustomButton as="a" href="https://igmrrf.com">
MKBHD
</CustomButton>
<Tabs>
{Object.keys(ProjectData).map((data, index) => (
<Stack label={data} key={index} data={ProjectData[data]} />
))}
</Tabs>
<CustomButton as={ReversedButton}>Movies</CustomButton>
</div>
<CustomButton as={ReversedButton}>Reverse</CustomButton>
</ProjectsContainer>
);
}
8 changes: 5 additions & 3 deletions src/containers/projects/projects.styles.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import styled from "styled-components";
import { Link } from "react-router-dom";

export const Button = styled.button`
color: palevioletred;
Expand All @@ -12,7 +12,9 @@ export const Button = styled.button`
`;

// Extending styles to override some

export const ProjectsContainer = styled.div`
padding: 0 5vw;
`;
export const CustomButton = styled(Button)`
color: red;
border-color: red;
Expand Down
Loading

1 comment on commit 700a33a

@vercel
Copy link

@vercel vercel bot commented on 700a33a Sep 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

igmrrf – ./

igmrrf-git-main-igmrrf.vercel.app
igmrrf-igmrrf.vercel.app
www.igbiriki.com
igmrrf.vercel.app
igbiriki.com

Please sign in to comment.