dadobos/me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added accordion, content

Browse Source
This commit is contained in:
dadobos
2022-05-29 21:26:49 +02:00
parent 13751b5a44
commit 623dc6f334
9 changed files with 206 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/main-accordion/MainAccordion.jsx
+52
View File
@@ -0,0 +1,52 @@
import React from 'react';
import {
Grid,
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
} from '@mui/material';
import MainCard from 'components/main-card/MainCard';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
const MainAccordion = ({items, title}) => {
return (
<Accordion
defaultExpanded
TransitionProps={{ unmountOnExit: true }}
sx={{ background: 'transparent' }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'>
<Typography variant='h5'>{ title }</Typography>
</AccordionSummary>
<AccordionDetails>
<Grid
container
direction='row'
alignItems='flex-start'
justifyContent='baseline'
spacing={3}>
{items.map((project) => (
<Grid
item
xs={12}
sm={6}
md={4}
key={project.title}
sx={{ alignItems: 'center', justifyContent: 'center' }}>
<MainCard
imageURL={project.imageURL}
title={project.title}
description={project.description}
/>
</Grid>
))}
</Grid>
</AccordionDetails>
</Accordion>
);
};
export default MainAccordion;
src/components/main-card/MainCard.jsx
+9 -6
View File
@@ -1,15 +1,16 @@
import React from 'react'; import React from 'react';
import Card from '@mui/material/Card';
import { import {
Card,
CardContent, CardContent,
CardMedia, CardMedia,
CardActionArea, CardActionArea,
Typography, Typography,
} from '@mui/material'; } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { VioletColorWheel, SeaGreenCrayola } from 'themes/Theme';
const MainCard = ({ imageURL, title, description }) => { import { useTheme } from '@mui/material/styles';
import { VioletColorWheel, SeaGreenCrayola } from 'themes/Colors';
const MainCard = ({ imageURL, title, description, url }) => {
const theme = useTheme(); const theme = useTheme();
const shadowColor = const shadowColor =
theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel; theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
@@ -27,12 +28,14 @@ const MainCard = ({ imageURL, title, description }) => {
}, },
}}> }}>
<CardActionArea> <CardActionArea>
<CardMedia component='img' height='180' image={imageURL} alt={title} /> <CardMedia component='img' height='150' image={imageURL} alt={title} />
<CardContent color='white'> <CardContent color='white'>
<Typography gutterBottom variant='h6' component='div'> <Typography gutterBottom variant='h6' component='div'>
{title} {title}
</Typography> </Typography>
{/* <Typography variant='body2'>{description}</Typography> */} {{ description } !== '' && (
<Typography variant='body2'>{description}</Typography>
)}
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>
src/data/Data.jsx
+57 -26
View File
@@ -1,60 +1,91 @@
const ProjectData = [ export const FreeCodeCampData = [
{ {
videoURL:
'https://res.cloudinary.com/dadobos/video/upload/v1653827756/web/TechnicalDocumentationPage_h03qkv',
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766522/web/Technical_Documentation_Page_v8ez8t.png', 'https://res.cloudinary.com/dadobos/image/upload/v1653827744/web/TechnicalDocumentationPage_pbudut',
title: 'Technical Documentation', title: 'Technical Documentation',
description: '0', description: '',
url: '', url: 'https://codepen.io/diaid/pen/PoopdWd',
}, },
{ {
videoURL:
'https://res.cloudinary.com/dadobos/video/upload/v1653827749/web/TributePage_iarfpr',
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766522/web/Tribute_Page_xftlcx.png', 'https://res.cloudinary.com/dadobos/image/upload/v1653827749/web/TributePage_hpxmr6',
title: 'Tribut Page', title: 'Tribut Page',
description: '0', description: '',
url: '', url: 'https://codepen.io/diaid/pen/MWWeorj',
}, },
{ {
videoURL:
'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/SurveyForm_g0ornr',
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Survey_Form_de2ebp.png', 'https://res.cloudinary.com/dadobos/image/upload/v1653827742/web/SurveyForm_upho4b',
title: 'Survey Form', title: 'Survey Form',
description: '0', description: '',
url: '', url: 'https://codepen.io/diaid/pen/jOOMBeL',
}, },
{ {
videoURL:
'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/ProductLandingPage_fqwfjg',
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/Product_Landing_Page_x6v5qg.png', 'https://res.cloudinary.com/dadobos/image/upload/v1653827745/web/ProductLandingPage_hebmnn',
title: 'Product Landing Page', title: 'Product Landing Page',
description: '0', description: '',
url: '', url: 'https://codepen.io/diaid/pen/GRRrKLW',
}, },
{ {
videoURL:
'https://res.cloudinary.com/dadobos/video/upload/v1653827745/web/PersonalPortofolio_nibw6t',
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/Personal_Portofolio_x9evp9.png', 'https://res.cloudinary.com/dadobos/image/upload/v1653827743/web/PersonalPortofolio_exblcg',
title: 'Personal Portofolio', title: 'Personal Portofolio',
description: '0', description: '',
url: '', url: 'https://codepen.io/diaid/pen/YzzVgwK',
},
];
export const CSSData = [
{
imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1653843087/web/AnchorTagHideComponents_vie5jq.png',
title: 'Anchor Tag Hide Components',
description: '',
url: 'https://codepen.io/diaid/full/MWOOogX',
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Square_orlybg.png', 'https://res.cloudinary.com/dadobos/image/upload/v1653845210/web/RadioHideComponents_dvxpgw.png',
title: 'Square', title: 'Radio Hide Components',
description: '0', description: '',
url: '', url: 'https://codepen.io/diaid/full/qBVdgWW',
}, },
];
export const WebsitesData = [
{
imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png',
title: 'The Square Project',
description: '',
url: 'https://dadobos.github.io/The-Square-Project/',
},
];
export const JavaData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png', 'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png',
title: 'Restaurant Billing System', title: 'Restaurant Billing System',
description: '0', description: '',
url: '', url: 'https://github.com/dadobos/Restaurant',
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png', 'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png',
title: 'Billing System', title: 'Billing System',
description: '0', description: '',
url: '', url: 'https://github.com/dadobos/Billing-System',
}, },
]; ];
export default ProjectData
src/data/index.js
-1
View File
@@ -1 +0,0 @@
export { ProjectData } from './Data';
src/layouts/landing/components/header/Header.jsx
+1 -1
View File
@@ -54,7 +54,7 @@ const Header = () => {
variant='h5' variant='h5'
sx={{ sx={{
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '.3rem', letterSpacing: '.2rem',
}}> }}>
Dan Dobos Dan Dobos
</Typography> </Typography>
src/pages/best-practices/BestPractices.jsx
+5 -1
View File
@@ -1,8 +1,12 @@
import React from 'react'; import React from 'react';
import { CSSData } from 'data/Data';
import MainAccordion from 'components/main-accordion/MainAccordion';
const BestPractices = () => { const BestPractices = () => {
return ( return (
<div sx={{ minHeight: 'calc(100vh-128px)' }}>Best Practices ...in progress</div> <>
<MainAccordion items={CSSData} title='CSS Only' />
</>
); );
}; };
src/pages/projects/Projects.jsx
+7 -26
View File
@@ -1,33 +1,14 @@
import React from 'react'; import React from 'react';
import { Grid } from '@mui/material'; import { FreeCodeCampData, JavaData, WebsitesData } from 'data/Data';
import ProjectData from 'data/Data'; import MainAccordion from 'components/main-accordion/MainAccordion';
import MainCard from 'components/main-card/MainCard';
const Projects = () => { const Projects = () => {
return ( return (
<Grid <>
container <MainAccordion items={FreeCodeCampData} title='Free Code Camp' />
direction='row' <MainAccordion items={JavaData} title='Java' />
alignItems='flex-start' <MainAccordion items={WebsitesData} title='Websites' />
justifyContent='baseline' </>
spacing={4}
sx={{ my: 1 }}>
{ProjectData.map((project) => (
<Grid
item
xs={12}
sm={6}
md={4}
key={project.title}
sx={{ alignItems: 'center', justifyContent: 'center' }}>
<MainCard
imageURL={project.imageURL}
title={project.title}
description={project.description}
/>
</Grid>
))}
</Grid>
); );
}; };
src/themes/Colors.js
+54
View File
@@ -0,0 +1,54 @@
export const AcidGreen = '#BDBF09';
export const AntiqueFuchsia = '#875C74';
export const Black = '#000000';
export const BlueGreen = '#004d40';
export const BrandyPunch = '#ce8f28';
export const BrownSugar = '#B4654A';
export const Cadet = '#5A7881';
export const Capri = '#5CC8FF';
export const Celeste = '#CDFFF9';
export const Cerise = '#D1345B';
export const Charcoal = '#37474f';
export const ChartreuseTraditional = '#E4FF1A';
export const Citron = '#9EA93F';
export const Cultured = '#eceff1';
export const DarkOrange = '#FF8811';
export const DarkPurple = '#0F0326';
export const DeepSpaceSparkle = '#335C67';
export const Eggplant = '#75485E';
export const EnglishVermillion = '#D64045';
export const Flame = '#cf5c36';
export const FruitSalad = '#509f60';
export const GrannySmithApple = '#ADF6B1';
export const Grullo = '#A69888';
export const IlluminatingEmerald = '#3E9276';
export const ImperialRed = '#EF233C';
export const InternationalGoldenGateBridge = '#BB4430';
export const Magnolia = '#F3EFF5';
export const MaizeCrayola = '#E8C547';
export const Mango = '#F7B801';
export const MangoTango = '#F5853F';
export const MaximumBlue = '#42BFDD';
export const MiddleRedPurple = '#AF5D63';
export const OuterSpaceCrayola = '#22363C';
export const PersianGreen = '#009688';
export const Platinum = '#E5E5E5';
export const Pomegranate = '#f44336';
export const RedRYB = '#FF220C';
export const Rosewood = '#5E0B15';
export const Ruby = '#D81E5B';
export const RubyRed = '#A31621';
export const RussianGreen = '#678D58';
export const Safron = '#EAC435';
export const SeaGreenCrayola = '#0FFFC1';
export const SlimyGreen = '#2B9720';
export const SpanishGreen = '#058E3F';
export const Spectra = '#315460';
export const TeaGreen = '#CAE7B9';
export const TucanRed = '#754043';
export const TumbleWeed = '#CEA07E';
export const TwilightLavander = '#754668';
export const UARed = '#E01A4F';
export const VioletColorWheel = '#7E0FFF';
export const White = '#ffffff';
export const WildBlueYonder = '#99B2DD';
src/themes/Theme.js
+21 -38
View File
@@ -1,40 +1,17 @@
import { createTheme, responsiveFontSizes } from '@mui/material/styles'; import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import overrides from './overrides'; import overrides from './overrides';
import {
export const Black = '#000000'; DeepSpaceSparkle,
export const BlueGreen = '#004d40'; White,
export const BrandyPunch = '#ce8f28'; Cadet,
export const Cadet = '#5A7881'; Black,
export const Celeste = '#CDFFF9'; GrannySmithApple,
export const Charcoal = '#37474f'; UARed,
export const ChartreuseTraditional = '#E4FF1A'; OuterSpaceCrayola,
export const Cultured = '#eceff1'; SeaGreenCrayola,
export const DeepSpaceSparkle = '#335C67'; VioletColorWheel,
export const AntiqueFuchsia = '#875C74'; } from './Colors';
export const Eggplant = '#75485E';
export const FruitSalad = '#509f60';
export const GrannySmithApple = '#ADF6B1';
export const IlluminatingEmerald = '#3E9276';
export const PersianGreen = '#009688';
export const RussianGreen = '#7B8E64';
export const InternationalGoldenGateBridge = '#BB4430';
export const MangoTango = '#F5853F';
export const MiddleRedPurple = '#AF5D63';
export const OuterSpaceCrayola = '#22363C';
export const Platinum = '#E5E5E5';
export const Pomegranate = '#f44336';
export const Rosewood = '#5E0B15';
export const Ruby = '#D81E5B';
export const Spectra = '#315460';
export const TeaGreen = '#CAE7B9';
export const TucanRed = '#754043';
export const TumbleWeed = '#CEA07E';
export const TwilightLavander = '#754668';
export const UARed = '#E01A4F';
export const White = '#ffffff';
export const VioletColorWheel = '#7E0FFF';
export const SeaGreenCrayola = '#0FFFC1';
// Main layout // Main layout
export const MainTheme = (mode) => ({ export const MainTheme = (mode) => ({
@@ -43,8 +20,14 @@ export const MainTheme = (mode) => ({
...(mode === 'light' ...(mode === 'light'
? { ? {
// palette values for light mode // palette values for light mode
primary: { main: DeepSpaceSparkle, contrastText: White }, primary: {
secondary: { main: Cadet, contrastText: White }, main: DeepSpaceSparkle,
contrastText: White,
},
secondary: {
main: Cadet,
contrastText: White,
},
divider: DeepSpaceSparkle, divider: DeepSpaceSparkle,
background: { background: {
default: White, default: White,
@@ -75,8 +58,8 @@ export const MainTheme = (mode) => ({
secondary: White, secondary: White,
}, },
}), }),
lightAccent: { main: MangoTango }, lightAccent: { main: VioletColorWheel },
darkAccent: { main: PersianGreen }, darkAccent: { main: SeaGreenCrayola },
contrastThreshold: 3, contrastThreshold: 3,
tonalOffset: 0.2, tonalOffset: 0.2,
}, },