Skip to content

Commit

Permalink
Fix dark mode , add new features and fix bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhardikdesai
imhardikdesai committed Jan 7, 2023
1 parent e77fa4d commit 33393ef
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 67 deletions.
15 changes: 7 additions & 8 deletions src/Components/Intro/Introduction.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { Flex, Container, Heading, Stack, Text, Button, Box } from '@chakra-ui/react';
import './introduction.css';
import homeLogo from './../../Assets/home-logo.png'
// import { Link as ReachLink } from 'react-router-dom'
import { Image } from '@chakra-ui/react'
import { useContext, useState } from 'react';
import { useContext } from 'react';
import ResumeContext from '../../Context/ResumeContext';
import ThemeTemplateData from '../../db/ThemeTemplateData';

export default function Introduction() {
const { setCurrentTheme, showComponent, setShowComponent } = useContext(ResumeContext);
const [selectBtn, setSelectBtn] = useState(true)
const { selectBtn, setSelectBtn, setCurrentTheme, showComponent, setShowComponent } = useContext(ResumeContext);

const handleSelectTemplate = () => {
setSelectBtn(!selectBtn)
Expand Down Expand Up @@ -49,22 +47,22 @@ export default function Introduction() {
Resume builder tools that assemble well-formatted resume. Through a resume builder, you can create a professional-looking resume in a few easy steps. This resume builder offer different template options, so you can select the template that best fits your needs and style.
</Text>

<Flex textAlign={'start'} flexDirection={'column'} w={'full'}>
<Flex _dark={{ color: 'gray.50' }} textAlign={'start'} flexDirection={'column'} w={'full'}>
<Box className='Bullet_Points'>
<Button>1</Button>
<Text color={'gray.900'} fontSize={'xl'}>
<Text _dark={{ color: "gray.400" }} color={'gray.900'} fontSize={'xl'}>
Select a template from our collection.
</Text>
</Box>
<Box className='Bullet_Points'>
<Button>2</Button>
<Text color={'gray.900'} fontSize={'xl'}>
<Text _dark={{ color: "gray.400" }} color={'gray.900'} fontSize={'xl'}>
Build you resume using our easy to use resume builder.
</Text>
</Box>
<Box className='Bullet_Points'>
<Button>3</Button>
<Text color={'gray.900'} fontSize={'xl'}>
<Text _dark={{ color: "gray.400" }} color={'gray.900'} fontSize={'xl'}>
Download your resume.
</Text>
</Box>
Expand Down Expand Up @@ -94,6 +92,7 @@ export default function Introduction() {
onClick={handleSelectTemplate}
rounded={'full'}
px={6}
className='mb-4'
colorScheme={'teal'}
bg={'#38B2AC'}
_hover={{ bg: '#319795' }}>
Expand Down
27 changes: 4 additions & 23 deletions src/Components/Navbar/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,6 @@ import { HamburgerIcon, CloseIcon, MoonIcon, SunIcon } from '@chakra-ui/icons';
import { Link as ReachLink } from 'react-router-dom'
import logo from './../../Assets/logo.png';

const Links = ['Home', 'About'];

const NavLink = (link) => (

<ReachLink
px={2}
py={1}
rounded={'md'}
_hover={{
textDecoration: 'none',
bg: useColorModeValue('gray.200', 'gray.700'),
}}
to={'/' + (link.children).toLowerCase()}
key={link.children}>
{link.children}
</ReachLink>
);

export default function Navbar() {
const { colorMode, toggleColorMode } = useColorMode();
Expand All @@ -36,9 +19,8 @@ export default function Navbar() {
as={'nav'}
spacing={4}
display={{ base: 'none', md: 'flex' }}>
{Links.map((link) => (
<NavLink key={link}>{link}</NavLink>
))}
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/'} >Home </ReachLink>
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/about'}> About</ReachLink>
</HStack>
<Button onClick={toggleColorMode}>
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
Expand All @@ -58,9 +40,8 @@ export default function Navbar() {
{isOpen ? (
<Box pb={4} display={{ md: 'none' }}>
<Stack as={'nav'} spacing={4}>
{Links.map((link) => (
<NavLink key={link}>{link}</NavLink>
))}
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/'} >Home </ReachLink>
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/about'}> About</ReachLink>
</Stack>
</Box>
) : null}
Expand Down
7 changes: 4 additions & 3 deletions src/Context/ResumeState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,12 @@ const ResumeState = (props) => {
const [checkAward, setCheckAward] = useState(false);
const [loading, setLoading] = useState(false);
const [showComponent, setShowComponent] = useState(false);
const [currentTheme, setCurrentTheme] = useState(false);
const [currentTheme, setCurrentTheme] = useState('');
const [selectBtn, setSelectBtn] = useState(true)


return (
<ResumeContext.Provider value={{ checkAward, setCheckAward, componentRef, handlePrint, currentTheme, setCurrentTheme, showComponent, setShowComponent, loading, setLoading, themeData, setThemeData, checkProj, checkWork, setCheckProj, setCheckWork }
}>
<ResumeContext.Provider value={{ selectBtn, setSelectBtn, checkAward, setCheckAward, componentRef, handlePrint, currentTheme, setCurrentTheme, showComponent, setShowComponent, loading, setLoading, themeData, setThemeData, checkProj, checkWork, setCheckProj, setCheckWork }}>
{props.children}
</ResumeContext.Provider >
)
Expand Down
16 changes: 10 additions & 6 deletions src/Pages/BuilderArea.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,25 @@ import ResumeContext from '../Context/ResumeContext';
import PropagateLoader from "react-spinners/PropagateLoader";

const BuilderArea = (props) => {
const { loading, handlePrint } = useContext(ResumeContext)
const { showComponent, setShowComponent, loading, handlePrint } = useContext(ResumeContext)

const handleSelectNewTemplate = () => {
setShowComponent(!showComponent)
}

return (
<>
{
loading && <PropagateLoader id='spinner' color="#319795" size={30} />
}
{loading && <PropagateLoader id='spinner' color="#319795" size={30} />}

<div id='main-box' className="d-flex justify-content-between flex-wrap mt-4 mx-2">
<UserDataCollect />
<div id='theme-box-border'>
{props.theme}
</div>
</div>
<div className="text-center">
<Button className='m-5' onClick={handlePrint}>Print</Button>
<div className="d-flex justify-content-center">
<Button className='m-5' colorScheme={'teal'} variant={'outline'} onClick={handlePrint}>Print</Button>
<Button className='m-5' colorScheme={'teal'} variant={'outline'} onClick={handleSelectNewTemplate}>Select Another Template</Button>
</div>
<Footer />
</>
Expand Down
53 changes: 26 additions & 27 deletions src/Theme/Theme1/Theme1.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ const Theme1 = (props) => {
const { awards } = themeData.awardData;
return (
<>
<div id="section-to-print" ref={componentRef}>
<div id="theme1">
<Box id="section-to-print" ref={componentRef}>
<Box _dark={{ border: '1px solid white' }} id="theme1">
{/* Personal Info */}
<header id='info' className='text-center mt-2'>
<Heading as='h2' size='2xl' noOfLines={1}>
<Heading as='h2' size='2xl' className='mb-2'>
{name}
</Heading>
<Text fontSize='md' className='text-muted my-1 '>
Expand All @@ -34,35 +34,34 @@ const Theme1 = (props) => {
</header>
{/* Skills Part */}
<section id="skills" className='my-2'>
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
TECHNICAL SKILLS
</Heading>

<Box id='skills-set' className='basic-set d-flex justify-content-center align-items-center'>
<div className='skillBox'>
<Box className='skillBox'>
{
skill.split(',').map((element, index) => <Badge key={index} className='skill-badge' variant='solid'>{element}</Badge>)
}
</div>
</Box>
</Box>
</section>

{/* Project Section */}
{
!checkProj &&

<section id="projects" className='my-2'>
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
PROJECTS
</Heading>

<Box id='project-set' className='basic-set'>
{
Object.entries(projectTitles).map((element, index) => {
return (
<div key={index} className="subBox">
<Box key={index} className="subBox">
<Text className='sub-title'>{element[1]}</Text>
<div className='sub-details'>
<Box className='sub-details'>
{
(Object.entries(projectDesc)[index] === undefined)
?
Expand All @@ -72,8 +71,8 @@ const Theme1 = (props) => {
return <li key={index}>{element}</li>
})
}
</div>
</div>
</Box>
</Box>
)
})
}
Expand All @@ -84,17 +83,17 @@ const Theme1 = (props) => {
{/* Education Part */}

<section id="education" className='my-2'>
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
EDUCATION
</Heading>

<Box id='education-set' className='basic-set'>
{
Object.entries(educationTitles).map((element, index) => {
return (
<div key={index} className="subBox">
<Box key={index} className="subBox">
<Text className='sub-title'>{element[1]}</Text>
<div className='sub-details'>
<Box className='sub-details'>
{
(Object.entries(educationDesc)[index] === undefined)
?
Expand All @@ -104,8 +103,8 @@ const Theme1 = (props) => {
return <li key={index}>{element}</li>
})
}
</div>
</div>
</Box>
</Box>
)
})
}
Expand All @@ -116,17 +115,17 @@ const Theme1 = (props) => {
{
!checkWork &&
<section id="experience" className='my-2'>
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
WORK EXPERIENCE
</Heading>

<Box id='experience-set' className='basic-set'>
{
Object.entries(workTitles).map((element, index) => {
return (
<div key={index} className="subBox">
<Box key={index} className="subBox">
<Text className='sub-title'>{element[1]}</Text>
<div className='sub-details'>
<Box className='sub-details'>
{
(Object.entries(workDesc)[index] === undefined)
?
Expand All @@ -136,8 +135,8 @@ const Theme1 = (props) => {
return <li key={index}>{element}</li>
})
}
</div>
</div>
</Box>
</Box>
)
})
}
Expand All @@ -148,24 +147,24 @@ const Theme1 = (props) => {
{
!checkAward &&
<section id="awards" className='my-2'>
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
AWARDS & ACHIEVEMENTS
</Heading>

<Box id='award-set' className='basic-set d-flex justify-content-between align-items-center'>
<div>
<Box>
{
awards.split(',').map((element, index) => {
return <li key={index}>{element}</li>
})
}

</div>
</Box>
</Box>
</section>
}
</div>
</div>
</Box>
</Box>
</>
)
}
Expand Down

0 comments on commit 33393ef

Please sign in to comment.