.eslintcache

[{"/home/phylieng/WebstormProjects/my-portfolio/src/index.ts":"1","/home/phylieng/WebstormProjects/my-portfolio/src/serviceWorker.js":"2","/home/phylieng/WebstormProjects/my-portfolio/src/App.tsx":"3","/home/phylieng/WebstormProjects/my-portfolio/src/layout/index.tsx":"4","/home/phylieng/WebstormProjects/my-portfolio/src/constants/theme_mode.ts":"5","/home/phylieng/WebstormProjects/my-portfolio/src/context/hash.context.tsx":"6","/home/phylieng/WebstormProjects/my-portfolio/src/context/ThemeProvider/theme.context.tsx":"7","/home/phylieng/WebstormProjects/my-portfolio/src/layout/footer/index.tsx":"8","/home/phylieng/WebstormProjects/my-portfolio/src/layout/header/index.tsx":"9","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/contact/index.tsx":"10","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/stories/index.tsx":"11","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/about/index.tsx":"12","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/stories/stories.constants.ts":"13","/home/phylieng/WebstormProjects/my-portfolio/src/constants/default_constants.ts":"14","/home/phylieng/WebstormProjects/my-portfolio/src/context/DrawerOpenProvider/drawerOpenProvider.context.tsx":"15","/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_drawer/custom_drawer.tsx":"16","/home/phylieng/WebstormProjects/my-portfolio/src/constants/routes.constant.tsx":"17","/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_drawer/list_item_link/list_item_link.tsx":"18","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/contact/contact_form/contact_form.tsx":"19","/home/phylieng/WebstormProjects/my-portfolio/src/context/UseContactForm/useContactForm.context.tsx":"20","/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_text_field/custom_text_field.tsx":"21","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/contact/contact_links/index.tsx":"22","/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_alert/custom_alert.tsx":"23"},{"size":499,"mtime":1610768222895,"results":"24","hashOfConfig":"25"},{"size":5003,"mtime":1610768222899,"results":"26","hashOfConfig":"25"},{"size":2890,"mtime":1618131017818,"results":"27","hashOfConfig":"25"},{"size":2264,"mtime":1620571214344,"results":"28","hashOfConfig":"25"},{"size":1700,"mtime":1611459675520,"results":"29","hashOfConfig":"25"},{"size":622,"mtime":1610768222895,"results":"30","hashOfConfig":"25"},{"size":563,"mtime":1610768222895,"results":"31","hashOfConfig":"25"},{"size":122,"mtime":1610768222895,"results":"32","hashOfConfig":"25"},{"size":5078,"mtime":1620529668106,"results":"33","hashOfConfig":"25"},{"size":2217,"mtime":1620570605807,"results":"34","hashOfConfig":"25"},{"size":2074,"mtime":1618138475546,"results":"35","hashOfConfig":"25"},{"size":4613,"mtime":1620948892470,"results":"36","hashOfConfig":"25"},{"size":116,"mtime":1611485071385,"results":"37","hashOfConfig":"25"},{"size":232,"mtime":1620051397180,"results":"38","hashOfConfig":"25"},{"size":803,"mtime":1617530514799,"results":"39","hashOfConfig":"25"},{"size":3684,"mtime":1618631123220,"results":"40","hashOfConfig":"25"},{"size":1102,"mtime":1618632963829,"results":"41","hashOfConfig":"25"},{"size":973,"mtime":1618137334348,"results":"42","hashOfConfig":"25"},{"size":4058,"mtime":1620918918965,"results":"43","hashOfConfig":"25"},{"size":1241,"mtime":1620449096788,"results":"44","hashOfConfig":"25"},{"size":2422,"mtime":1620463896857,"results":"45","hashOfConfig":"25"},{"size":2153,"mtime":1620040272659,"results":"46","hashOfConfig":"25"},{"size":283,"mtime":1620468894994,"results":"47","hashOfConfig":"25"},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"50"},"1hax09i",{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"50"},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},{"filePath":"56","messages":"57","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"58","usedDeprecatedRules":"55"},{"filePath":"59","messages":"60","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"61"},{"filePath":"62","messages":"63","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"64","usedDeprecatedRules":"55"},{"filePath":"65","messages":"66","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"67","usedDeprecatedRules":"55"},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"70"},{"filePath":"71","messages":"72","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"73","usedDeprecatedRules":"55"},{"filePath":"74","messages":"75","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"76","usedDeprecatedRules":"55"},{"filePath":"77","messages":"78","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"79","usedDeprecatedRules":"55"},{"filePath":"80","messages":"81","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"82","usedDeprecatedRules":"55"},{"filePath":"83","messages":"84","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},{"filePath":"85","messages":"86","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},{"filePath":"87","messages":"88","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"89","usedDeprecatedRules":"55"},{"filePath":"90","messages":"91","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"92","usedDeprecatedRules":"55"},{"filePath":"93","messages":"94","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},{"filePath":"95","messages":"96","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},{"filePath":"97","messages":"98","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"99","usedDeprecatedRules":"55"},{"filePath":"100","messages":"101","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"102","usedDeprecatedRules":"55"},{"filePath":"103","messages":"104","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},{"filePath":"105","messages":"106","errorCount":0,"warningCount":7,"fixableErrorCount":0,"fixableWarningCount":0,"source":"107","usedDeprecatedRules":"55"},{"filePath":"108","messages":"109","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"55"},"/home/phylieng/WebstormProjects/my-portfolio/src/index.ts",[],["110","111"],"/home/phylieng/WebstormProjects/my-portfolio/src/serviceWorker.js",[],"/home/phylieng/WebstormProjects/my-portfolio/src/App.tsx",[],["112","113"],"/home/phylieng/WebstormProjects/my-portfolio/src/layout/index.tsx",["114","115","116","117"],"import React, {useRef, useState} from 'react';\nimport Header from './header';\nimport {HashContextProvider, HashValue} from \"../context/hash.context\";\nimport {makeStyles, ThemeProvider, useTheme} from '@material-ui/core/styles';\nimport clsx from 'clsx';\nimport {useDrawerToggleContext} from \"../context/DrawerOpenProvider/drawerOpenProvider.context\";\nimport CustomDrawer from \"../components/custom_drawer/custom_drawer\";\nimport style from './styles.module.scss';\n\ninterface layoutProps {\n    children: any;\n}\n\nconst useStyles = makeStyles((theme) => ({\n    content: {\n        flexGrow: 1,\n        padding: theme.spacing(3),\n        transition: theme.transitions.create('margin', {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.leavingScreen,\n        }),\n        boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',\n        background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',\n        color: \"white\",\n        height: '100%'\n    },\n    contentShift: {\n        transition: theme.transitions.create('margin', {\n            easing: theme.transitions.easing.easeOut,\n            duration: theme.transitions.duration.enteringScreen,\n        }),\n        marginLeft: 0,\n    },\n}));\nconst MainLayout = (props: layoutProps) => {\n    //set context here so that I dont need to pass prop etc\n    const [hashValue, setHashValue] = useState<HashValue>({hashName: \"\"});\n    const useDrawerToggle = useDrawerToggleContext();\n    const classes = useStyles();\n    // const setHashNavValue = (hashNav: string) => {\n    //     //because this is a new object => and there fore force rerender\n    //     //if use a normal string It wont force rerender because of React\n    //     const newHashValue: HashValue = {hashName: hashNav};\n    //     setHashValue(newHashValue);\n    // };\n\n    return (\n            <div className={style.root}>\n                <Header/>\n                <CustomDrawer/>\n                <HashContextProvider hashValue={hashValue}>\n                    <main className={clsx(classes.content, {[classes.contentShift]: useDrawerToggle.open})}>\n                        {props.children}\n                    </main>\n\n                </HashContextProvider>\n            </div>);\n};\n\nexport default MainLayout;\n","/home/phylieng/WebstormProjects/my-portfolio/src/constants/theme_mode.ts",[],["118","119"],"/home/phylieng/WebstormProjects/my-portfolio/src/context/hash.context.tsx",["120"],"import React, {useContext, useRef} from 'react';\n\nexport interface HashValue {\n    hashName: string;\n}\n\nconst defaultHashValue: HashValue = {hashName: \"\"};\nconst HashContext: React.Context<HashValue> = React.createContext<HashValue>(defaultHashValue);\n\ninterface hashContextProps\n{\n    children: any;\n    hashValue: HashValue;\n}\n\nexport const HashContextProvider = (props: hashContextProps) => {\n    return (\n        <HashContext.Provider value={props.hashValue}>\n            {props.children}\n        </HashContext.Provider>\n    );\n};\n\nexport const useHashRoute = () => {\n    return useContext<HashValue>(HashContext);\n};\n","/home/phylieng/WebstormProjects/my-portfolio/src/context/ThemeProvider/theme.context.tsx",["121"],"import React, {Context, useContext} from 'react';\nimport {lightTheme, Theme} from \"../../constants/theme_mode\";\n\nexport const ThemeContext: React.Context<Theme> = React.createContext<Theme>(lightTheme);\n\ninterface ThemeContextProps {\n    children: any;\n    theme: Theme;\n}\n\nexport const ThemeProvider = (props: ThemeContextProps) => {\n    return (\n        <ThemeContext.Provider value={props.theme}>\n            {props.children}\n        </ThemeContext.Provider>\n    );\n\n};\nexport const useThemeContext = () => {\n    return useContext<Theme>(ThemeContext);\n};\n\n\n\n\n","/home/phylieng/WebstormProjects/my-portfolio/src/layout/footer/index.tsx",[],["122","123"],"/home/phylieng/WebstormProjects/my-portfolio/src/layout/header/index.tsx",["124","125","126","127","128"],"import React, {useEffect, useState} from 'react';\nimport {SwitchClassKey, SwitchProps} from '@material-ui/core/Switch';\nimport {useThemeContext} from \"../../context/ThemeProvider/theme.context\";\nimport {AppBar, Toolbar} from \"@material-ui/core\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport MenuIcon from '@material-ui/icons/Menu';\nimport Typography from \"@material-ui/core/Typography\";\nimport {useDrawerToggleContext} from \"../../context/DrawerOpenProvider/drawerOpenProvider.context\";\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\nimport clsx from 'clsx';\nimport {drawerWidth} from \"../../constants/default_constants\";\n\ninterface Styles extends Partial<Record<SwitchClassKey, string>> {\n    focusVisible?: string;\n}\n\ninterface Props extends SwitchProps {\n    classes: Styles;\n}\n\ninterface HeaderProps {\n    changeNavTab: (hashNavValue: string) => void;\n    switchTheme: (theme: boolean) => void;\n}\n\nconst useStyle = makeStyles((theme) => ({\n    menuButton: {\n        marginRight: theme.spacing(2),\n        color: \"#000000\",\n\n    },\n    hide: {\n        display: 'none'\n    },\n    appBar: {\n        backgroundColor: \"#ffffff\",\n        zIndex: theme.zIndex.drawer + 1,\n        transition: theme.transitions.create(['margin', 'width'], {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.leavingScreen,\n        }),\n    },\n    appBarShift: {\n        width: `calc(100% - ${drawerWidth}px)`,\n        marginLeft: drawerWidth,\n        transition: theme.transitions.create(['margin', 'width'], {\n            easing: theme.transitions.easing.easeOut,\n            duration: theme.transitions.duration.enteringScreen,\n        }),\n    },\n    headerTitle: {\n        marginLeft: \"auto\",\n        marginRight: \"auto\",\n        fontWeight: 900,\n        color: \"#000000\",\n\n    }\n}));\nconst Header = (headerProps: HeaderProps) => {\n\n    const [themeMode, setThemeMode] = useState<boolean>();\n    const useTheme = useThemeContext();\n    const useDrawerToggle = useDrawerToggleContext();\n    const theme = useStyle();\n    const switchThemeMode = (event: React.ChangeEvent<HTMLInputElement>) => {\n        console.log(event.target.checked);\n        setThemeMode(event.target.checked);\n        headerProps.switchTheme(event.target.checked);\n    };\n    //this header is not used to move to other route but instead to move to certain href element\n    return (\n\n        <AppBar position={'fixed'} className={clsx(theme.appBar, {[theme.appBarShift]: useDrawerToggle.open})}>\n            <Toolbar>\n                <IconButton color={\"inherit\"} aria-label={\"open drawer\"}\n                            onClick={() => {\n                                console.log('onCLick', useDrawerToggle.open);\n                                console.log('function', useDrawerToggle.toggleOpen);\n                                useDrawerToggle.toggleOpen(!useDrawerToggle.open);\n                            }} edge=\"start\"\n                            className={clsx(theme.menuButton, useDrawerToggle.open && theme.hide)}\n                >\n                    <MenuIcon/>\n                </IconButton>\n                <Typography variant={'h5'} noWrap className={theme.headerTitle}>\n                    Lieng The Phy\n                </Typography>\n            </Toolbar>\n        </AppBar>\n        // <Navbar expand=\"lg\" sticky={\"top\"} className={styles.nav_wrapper} style={useTheme.navBar}>\n        //     <Container fluid>\n        //         <Col className={styles.brandWrapper}>\n        //             <Navbar.Brand className={styles.brand} style={{\"color\": useTheme.navBar.color}}>\n        //                 Phy Lieng\n        //             </Navbar.Brand>\n        //         </Col>\n        //         {/*To create a toggle button for nav bar*/}\n        //         <Navbar.Toggle aria-controls=\"responsive-navbar-nav\" className={styles.toggle}>\n        //             Menu <FontAwesomeIcon icon={faBars}/>\n        //         </Navbar.Toggle>\n        //         <Navbar.Collapse id={\"responsive-navbar-nav\"} className={styles.nav_container}>\n        //             <Nav>\n        //                 {\n        //                     homeRouters.map((route: IHomeRouter, index: number) => {\n        //                         return (\n        //                             route.showHeaderNavBar &&\n        //                             (<Nav.Link className={styles.route} style={{\"color\": useTheme.navBar.color}}\n        //                                        key={route.title} onClick={() => {\n        //                                 headerProps.changeNavTab(route.title);\n        //                             }}>\n        //                                 {route.title}\n        //                             </Nav.Link>)\n        //                         );\n        //                     })\n        //\n        //                 }\n        //\n        //             </Nav>\n        //         </Navbar.Collapse>\n        //\n        //     </Container>\n        // </Navbar>\n    );\n};\nexport default Header;\n","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/contact/index.tsx",["129","130","131"],"import React from \"react\";\nimport styles from \"./styles.module.scss\";\nimport {useThemeContext} from \"../../../context/ThemeProvider/theme.context\";\nimport Grid from '@material-ui/core/Grid';\nimport {Divider, Paper} from \"@material-ui/core\";\nimport ContactForm from \"./contact_form/contact_form\";\nimport ContactLinks from \"./contact_links\";\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\n\nconst useStyles = makeStyles((theme) => ({\n\n    paper: {\n        padding: theme.spacing(2),\n        textAlign: 'center',\n        color: theme.palette.text.secondary,\n        '& b': {\n            color: theme.palette.text.primary,\n        }\n    },\n    contactForm: {\n        marginTop: '2rem',\n    },\n    contentWrapper: {\n        padding: '80px',\n    },\n    title: {\n        fontWeight: 'bold'\n    }\n}));\n\nconst Contact = () => {\n\n    const theme = useThemeContext();\n    const classes = useStyles();\n    return (<div className={classes.contentWrapper}>\n        <h1 className={classes.title}> Get in Touch</h1>\n        <h3 className={classes.title}>Contact me</h3>\n        <Grid container spacing={4}>\n            <Grid item xs={4}>\n                <Paper className={classes.paper}>\n                    <b>\n                        Email\n                    </b>\n\n                    <div>\n                        phylieng97@gmail.com\n                    </div>\n                </Paper>\n\n            </Grid>\n\n            <Grid item xs={4}>\n                <Paper className={classes.paper}>\n                    <b>\n                        Phone\n                    </b>\n\n                    <div>\n                        Not available\n                    </div>\n                </Paper>\n            </Grid>\n            <Grid item xs={4}>\n                <Paper className={classes.paper}>\n                    <b> Freelance\n                    </b>\n                    <div>\n                        Not available\n                    </div>\n                </Paper>\n            </Grid>\n        </Grid>\n        <div className={classes.contactForm}>\n            <h3 className={classes.title}>Send me message</h3>\n            <ContactForm/>\n        </div>\n\n\n        <ContactLinks/>\n    </div>);\n};\nexport default Contact;\n","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/stories/index.tsx",["132","133","134","135"],"import React, {useEffect, useState} from \"react\";\nimport styles from \"./styles.module.scss\";\nimport phy from '../../../resources/phy.jpg'\nimport {useThemeContext} from \"../../../context/ThemeProvider/theme.context\";\nimport {Col, Row} from \"react-bootstrap\";\nimport {fields} from \"./stories.constants\";\nimport {typeSpeed} from \"../../../constants/default_constants\";\n\nconst Stories = () => {\n    //will render\n    const useTheme = useThemeContext();\n    let timeoutList: NodeJS.Timeout[] = [];\n    useEffect(() => {\n        const typeWriterTimeOut = typeWriter(fields[0], fields);\n        // typeWriter2();\n        return () => {\n            setTypeText('');\n            timeoutList.forEach((timeout) => clearTimeout(timeout));\n        };\n    }, []);\n    const [typeText, setTypeText] = useState<string>('');\n\n    const typeWriter = (text: string, textFields: string[]) => {\n        if (text.length === 0) {\n            // remove the previous value\n            setTypeText('');\n            textFields = textFields.slice(1);\n            if (textFields.length === 0)\n                textFields = fields;\n            typeWriter(textFields[0], textFields);\n\n        } else {\n            setTypeText((prevState => {\n                return prevState + text[0];\n            }));\n            const timeout = setTimeout(() => typeWriter(text.slice(1), textFields), typeSpeed);\n            timeoutList.push(timeout);\n        }\n    };\n\n    return (<Row style={useTheme.content}>\n        <div className={styles.my_img}>\n\n        </div>\n        <div className={styles.title_content}>\n            <div className={styles.layout_content}>\n                <h4>\n                    Hi, I am\n                </h4>\n                <h2 className={styles.page_title}>\n                    Lieng The Phy\n                </h2>\n                <h4>\n                    I am {' '}\n                    <strong className={styles.typewriter2}>\n                        {typeText}\n                    </strong>\n                </h4>\n            </div>\n        </div>\n    </Row>);\n};\nexport default Stories;\n","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/about/index.tsx",["136","137","138"],"import React from \"react\";\nimport styles from \"./styles.module.scss\";\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\nimport {Face, Timeline} from \"@material-ui/icons\";\nimport {Typography} from \"@material-ui/core\";\nimport Paper from \"@material-ui/core/Paper\";\nimport FastfoodIcon from '@material-ui/icons/Fastfood';\nimport LaptopMacIcon from \"@material-ui/icons/LaptopMac\";\n\nimport {\n    TimelineItem,\n    TimelineOppositeContent,\n    TimelineDot,\n    TimelineSeparator,\n    TimelineConnector, TimelineContent\n} from \"@material-ui/lab\";\n\nconst useStyles = makeStyles((theme) => ({\n    contentWrapper: {\n        padding: '80px',\n    },\n    titleWrapper: {\n        textAlign: 'center'\n    },\n    title: {\n        fontWeight: 'bold',\n\n    },\n    content: {\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'row',\n    },\n\n    paper: {\n        padding: theme.spacing(1),\n    },\n}));\n\nconst About = () => {\n    const drawTimeLines = () => {\n        return (<Timeline>\n            <TimelineItem>\n                <TimelineSeparator>\n                    <TimelineDot>\n                        <LaptopMacIcon />\n                    </TimelineDot>\n                    <TimelineConnector />\n                </TimelineSeparator>\n                <TimelineContent></TimelineContent>\n            </TimelineItem>\n        </Timeline>);\n    };\n    const classes = useStyles();\n    return (<div className={classes.contentWrapper}>\n        {drawTimeLines()}\n        <div className={classes.titleWrapper}>\n            <h1 className={classes.title}>\n                RESUME\n            </h1>\n            <div>\n                <Face fontSize={'large'}/>\n            </div>\n        </div>\n        <div className={classes.content}>\n            <Paper elevation={4} className={classes.paper}>\n                <Typography variant='h6' gutterBottom>JUNIOR SOFTWARE ENGINEER</Typography>\n                <Typography>ZMP VietNam | Nov 2019 - Present</Typography>\n                <div>\n                    Flutter Mobile Development (7 months)\n                    A flutter app communicates with Redis Server to command the robot.\n                </div>\n                <div>\n\n                </div>\n                <div>\n                    <Typography> DeepLearning Project (4months) </Typography>\n                    3D Object Detection using point clouds\n                    Modified existing repository for the project's use case and provide a solution for real time\n                    processing.\n                </div>\n                <div>\n                    <Typography variant='h6' gutterBottom>  R&D Developer</Typography>\n\n                    <Typography>  R&D Developer</Typography>\n\n\n\n                    BeeSight Soft Inc. | June 2018 - April 2019\n                    Projects about face detections and recognitions\n                    Create a machine learning game by merging jsTensorflow and Unity Game 2D using WebSocket\n                    Implement face recognition on a Raspberry Pi 3.0\n                    Wo rk with Unity and Android to create a Snapchat-lookalike project\n                </div>\n                <div>\n                    <Typography variant='h5' gutterBottom>Education history </Typography>\n\n                    <Typography variant='h6' gutterBottom>HCMUS-University of science</Typography>\n\n                    HCMUS-University of science\n\n                    Bachelor of Computer Science, 2019\n                    Graduated  with GPA 8.89\n                    Student of Advanced Program in Computer Science\n                    IELTS band 6.5\n                </div>\n\n            </Paper>\n            <Paper>\n                <div>\n                    <Typography variant='h5' gutterBottom>Areas of Expertise</Typography>\n                    Working knowledge of Flutter\n                    Working knowledge of ReactJS written in TypeScript\n                    Javascript, C++, and Python experience\n                    HTML, CSS\n                    NodeJS back-end and Web API experience\n                </div>\n                <div>\n                    <Typography variant='h5' gutterBottom>WORK SKILLS</Typography>\n\n                    Have fundamental knowledge of Data Structures and Algorithms.\n                    Detail oriented, team player\n                    Problem solver by presenting and understanding the flow of code.\n                    Tasks breakdown, product mindset\n                    Strong self-learning ability but always eager to ask.\n                </div>\n            </Paper>\n\n        </div>\n\n\n    </div>);\n};\nexport default About;\n","/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/stories/stories.constants.ts",[],"/home/phylieng/WebstormProjects/my-portfolio/src/constants/default_constants.ts",[],"/home/phylieng/WebstormProjects/my-portfolio/src/context/DrawerOpenProvider/drawerOpenProvider.context.tsx",["139","140"],"import React, {useContext} from \"react\";\nimport {lightTheme, Theme} from \"../../constants/theme_mode\";\n\nexport interface DrawerToggle {\n    open: boolean;\n    toggleOpen: (open: boolean) => void;\n}\n\n// init drwer toggle context\nexport const DrawerToggleContext: React.Context<DrawerToggle> = React.createContext<DrawerToggle>({\n    open: false,\n    toggleOpen: (open) => {\n    }\n});\n\ninterface DrawerToggleProps {\n    children: any;\n    drawerToggle: DrawerToggle;\n}\n\nexport const DrawerToggleProvider = (props: DrawerToggleProps) => {\n    return (\n        <DrawerToggleContext.Provider value={props.drawerToggle}>\n            {props.children}\n        </DrawerToggleContext.Provider>\n    );\n};\n\nexport const useDrawerToggleContext = () => {\n    return useContext<DrawerToggle>(DrawerToggleContext);\n};\n\n","/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_drawer/custom_drawer.tsx",["141","142","143","144"],"import React from \"react\";\nimport Drawer from '@material-ui/core/Drawer';\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\nimport {drawerWidth} from \"../../constants/default_constants\";\nimport {useDrawerToggleContext} from \"../../context/DrawerOpenProvider/drawerOpenProvider.context\";\nimport {IconButton, ListItemIcon} from \"@material-ui/core\";\nimport {ChevronLeftOutlined} from \"@material-ui/icons\";\nimport Divider from \"@material-ui/core/Divider\";\nimport List from \"@material-ui/core/List\";\nimport {IRouter, routes} from \"../../constants/routes.constant\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport clsx from \"clsx\";\nimport MailIcon from \"@material-ui/icons/Mail\";\nimport ListItemLink from \"./list_item_link/list_item_link\";\n\nconst useStyles = makeStyles((theme) => ({\n    drawer: {\n        width: drawerWidth,\n        flexShrink: 0,\n        whiteSpace: \"nowrap\"\n    },\n    drawerPaper: {\n        width: drawerWidth,\n    },\n    drawerHeader: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: theme.spacing(0, 1),\n        // necessary for content to be below app bar\n        ...theme.mixins.toolbar,\n        justifyContent: 'flex-end',\n    },\n    drawerOpen: {\n        width: drawerWidth,\n        transition: theme.transitions.create('width', {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.enteringScreen,\n        }),\n    },\n    drawerClose: {\n        transition: theme.transitions.create('width', {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.leavingScreen,\n        }),\n        // theme.spacing default 8px x 7 for icon\n        width: theme.spacing(7) + 1,\n        [theme.breakpoints.up(\"sm\")]: {\n            width: theme.spacing(9) + 1\n        },\n        // property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element.\n\n        overflowX: \"hidden\"\n\n    },\n    toolbar: {\n        display: 'flex',\n        justifyContent: 'flex-end',\n        alignContent: 'center',\n        padding: theme.spacing(1, 1),\n\n        // necessary for content to be below app bar\n        ...theme.mixins.toolbar\n    }\n}));\n\nconst CustomDrawer = () => {\n    const theme = useStyles();\n    const useDrawerToggle = useDrawerToggleContext();\n\n    return (\n        <Drawer\n            className={clsx(theme.drawer, {\n                [theme.drawerOpen]: useDrawerToggle.open,\n                [theme.drawerClose]: !useDrawerToggle.open\n            })}\n            classes={{\n                paper: clsx({\n                    [theme.drawerOpen]: useDrawerToggle.open,\n                    [theme.drawerClose]: !useDrawerToggle.open,\n                }),\n            }}\n            open={useDrawerToggle.open}\n            variant={'permanent'}\n            anchor={'left'}\n\n        >\n            <div className={theme.toolbar}>\n                <IconButton onClick={() => {\n                    useDrawerToggle.toggleOpen(false);\n                }}>\n                    <ChevronLeftOutlined/>\n                </IconButton>\n            </div>\n            <List>\n                {\n                    routes.map((route: IRouter, index: number) => {\n                            return (<> <ListItemLink key={route.title} primary={route.title} iconRender={route.iconRender}\n                                                     to={route.path}/> <Divider/> </>);\n                        }\n                    )\n                }\n\n            </List>\n            <div>\n\n            </div>\n        </Drawer>);\n};\n\nexport default CustomDrawer;","/home/phylieng/WebstormProjects/my-portfolio/src/constants/routes.constant.tsx",[],"/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_drawer/list_item_link/list_item_link.tsx",[],"/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/contact/contact_form/contact_form.tsx",["145","146"],"import React, {useEffect, useRef, useState} from 'react';\nimport useContactForm from '../../../../context/UseContactForm/useContactForm.context';\nimport {Button, CircularProgress, makeStyles, Snackbar} from \"@material-ui/core\";\nimport CustomTextField from \"../../../../components/custom_text_field/custom_text_field\";\nimport {Send} from '@material-ui/icons';\nimport Paper from \"@material-ui/core/Paper\";\nimport {green} from '@material-ui/core/colors';\nimport {serviceID, templateID, userID} from '../../../../constants/default_constants';\nimport emailjs from 'emailjs-com';\nimport {CustomAlert} from \"../../../../components/custom_alert/custom_alert\";\n\nconst useStyles = makeStyles((theme) => ({\n\n    buttonWrapper: {\n        margin: theme.spacing(1),\n        display: 'flex',\n        flexDirection: 'row',\n        alignContent: 'center',\n        justifyContent: 'center',\n        position: 'relative',\n    },\n    sendButton: {\n        boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',\n        background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',\n        color: \"white\"\n    },\n    paper: {\n        padding: theme.spacing(1),\n    },\n    buttonProgress: {\n        color: green[500],\n        position: 'absolute',\n        top: '50%',\n        right: '50%',\n        marginTop: -12,\n        marginLeft: -12\n    }\n}));\n\nconst ContactForm = () => {\n    const [loading, setLoading] = useState<boolean>(false);\n    const timeOut = useRef<NodeJS.Timeout>();\n    const [successAlert, setSuccessAlert] = useState<boolean>(false);\n    const [errorAlert, setErrorAlert] = useState<boolean>(false);\n    useEffect(() => {\n\n        return () => {\n            if (timeOut.current) {\n                clearTimeout(timeOut.current);\n            }\n\n        };\n    }, []);\n    const sendEmail = async (formValues: any) => {\n        console.log(formValues);\n        setLoading(true);\n        emailjs.init(userID);\n        try {\n            const value = await emailjs.send(serviceID, templateID, formValues);\n            setSuccessAlert(true);\n\n        } catch (error) {\n            setErrorAlert(true);\n            console.log(error.text);\n        }\n        setLoading(false);\n    };\n\n    const {control, onSubmit, formState} = useContactForm({sendEmail: sendEmail});\n    const classes = useStyles();\n    const closeAlert = ()=>{\n        if(successAlert) {\n            setSuccessAlert(false);\n        }\n        if(errorAlert) {\n            setErrorAlert(false);\n        }\n    };\n\n    return (<div>\n        <form onSubmit={onSubmit} name={'send'}>\n            <Paper elevation={4} className={classes.paper}>\n\n\n                <CustomTextField control={control} name={'name'} label={'Name'} errors={formState.errors}/>\n\n                <CustomTextField control={control} name={'email'} label={'Email'} errors={formState.errors}/>\n\n                <CustomTextField control={control} name={'message'} label={'Message'} multiline\n                                 errors={formState.errors} rows={5}/>\n                <div className={classes.buttonWrapper}>\n                    <Button\n                        className={classes.sendButton}\n                        type=\"submit\"\n                        size={'large'}\n                        name='send'\n                        variant=\"contained\"\n                        disabled={loading}\n                        endIcon={<Send/>}\n                    >\n                        Send\n\n                    </Button>\n                    {loading && <CircularProgress size={20} className={classes.buttonProgress}/>}\n                </div>\n            </Paper>\n        </form>\n        <Snackbar open={successAlert} autoHideDuration={6000} onClose={closeAlert}>\n\n        <CustomAlert severity='success' onClose={closeAlert}>Email sent successfully!</CustomAlert>\n           </Snackbar>\n        <Snackbar  open={errorAlert} autoHideDuration={6000} onClose={closeAlert}>\n            <CustomAlert  severity='error' onClose={closeAlert}>Failed to send email!</CustomAlert>\n        </Snackbar>\n\n    </div>);\n}\nexport default ContactForm;","/home/phylieng/WebstormProjects/my-portfolio/src/context/UseContactForm/useContactForm.context.tsx",["147"],"import {ReactElement, useCallback, useMemo} from \"react\";\nimport * as yup from \"yup\";\nimport {useForm} from \"react-hook-form\";\nimport {yupResolver} from \"@hookform/resolvers/yup\";\nimport emailjs from 'emailjs-com';\nimport {serviceID, templateID, userID} from \"../../constants/default_constants\";\n\ninterface ContactInterface {\n    name: string;\n    email: string;\n    message: string;\n}\ninterface useContactFormProps {\n    setLoading: (loading: boolean) => void;\n}\nconst useContactForm = ({setLoading}: useContactFormProps) => {\n    const validationSchema = useMemo(() => {\n        return yup.object({\n            name: yup.string().required('Name is required').default(''),\n            email: yup.string().email().required('Email is required').default(''),\n            message: yup.string().required('Message is required').default(''),\n        });\n    }, []);\n    const {handleSubmit, formState, control} = useForm<ContactInterface>({\n        resolver: yupResolver(validationSchema), defaultValues: validationSchema.cast({})\n    });\n\n    const onSubmit = useCallback(async (formValues) => {\n        console.log(formValues);\n\n        emailjs.init(userID);\n        try {\n            const value = await emailjs.send(serviceID, templateID, formValues);\n            console.log('successful', value.text);\n        } catch (error) {\n            console.log(error.text);\n        }\n\n    }, []);\n\n    return {control, onSubmit: handleSubmit(onSubmit), formState};\n\n\n};\n\nexport default useContactForm;","/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_text_field/custom_text_field.tsx",[],"/home/phylieng/WebstormProjects/my-portfolio/src/pages/contents/contact/contact_links/index.tsx",["148","149","150","151","152","153","154"],"import React from 'react';\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\nimport {Theme} from '@material-ui/core/styles/createMuiTheme';\nimport Paper from \"@material-ui/core/Paper\";\nimport {IconButton} from \"@material-ui/core\";\nimport {BrightnessMediumOutlined, Facebook, GitHub, LinkedIn, Twitter} from '@material-ui/icons';\nimport { ReactComponent as YourSvg } from './your-svg.svg';\n\n\nconst useStyles = makeStyles((theme: Theme) => ({\n    link_wrapper: {\n        display: 'contents',\n\n    },\n    links_container: {\n        height: '20vh',\n        marginTop: theme.spacing(3),\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center'\n    },\n    icon: {\n        marginRight: theme.spacing(2)\n    }\n}));\n\nconst ContactLinks = () => {\n    const classes = useStyles();\n    return (\n        <div className={classes.link_wrapper}>\n        <Paper className={classes.links_container} elevation={4}>\n            <a href={'https://github.com/ltphy'} target={'_blank'}>\n                <IconButton size={'medium'} className={classes.icon}>\n                    <GitHub/>\n                </IconButton>\n            </a>\n            <a href={'https://www.facebook.com/the.phy.9'} target={'_blank'}>\n                <IconButton size={'medium'} className={classes.icon}>\n                    <Facebook/>\n                </IconButton>\n            </a>\n            <a href={'https://www.linkedin.com/in/phy-lieng-7872a910b/'} target={'_blank'}>\n                <IconButton size={'medium'} className={classes.icon}>\n                    <LinkedIn/>\n                </IconButton>\n\n            </a>\n            <a href={'https://www.linkedin.com/in/phy-lieng-7872a910b/'} target={'_blank'}>\n                <IconButton size={'medium'} className={classes.icon}>\n                    <Twitter/>\n                </IconButton>\n\n            </a>\n            <a href={'https://medium.com/@phylieng97'} target={'_blank'}>\n                <IconButton>\n                    <i className=\"fab fa-medium\"/>\n\n                </IconButton>\n            </a>\n\n        </Paper></div>);\n};\nexport default ContactLinks;","/home/phylieng/WebstormProjects/my-portfolio/src/components/custom_alert/custom_alert.tsx",[],{"ruleId":"155","replacedBy":"156"},{"ruleId":"157","replacedBy":"158"},{"ruleId":"155","replacedBy":"156"},{"ruleId":"157","replacedBy":"158"},{"ruleId":"159","severity":1,"message":"160","line":1,"column":16,"nodeType":"161","messageId":"162","endLine":1,"endColumn":22},{"ruleId":"159","severity":1,"message":"163","line":4,"column":21,"nodeType":"161","messageId":"162","endLine":4,"endColumn":34},{"ruleId":"159","severity":1,"message":"164","line":4,"column":36,"nodeType":"161","messageId":"162","endLine":4,"endColumn":44},{"ruleId":"159","severity":1,"message":"165","line":37,"column":23,"nodeType":"161","messageId":"162","endLine":37,"endColumn":35},{"ruleId":"155","replacedBy":"166"},{"ruleId":"157","replacedBy":"167"},{"ruleId":"159","severity":1,"message":"160","line":1,"column":28,"nodeType":"161","messageId":"162","endLine":1,"endColumn":34},{"ruleId":"159","severity":1,"message":"168","line":1,"column":16,"nodeType":"161","messageId":"162","endLine":1,"endColumn":23},{"ruleId":"155","replacedBy":"169"},{"ruleId":"157","replacedBy":"170"},{"ruleId":"159","severity":1,"message":"171","line":1,"column":16,"nodeType":"161","messageId":"162","endLine":1,"endColumn":25},{"ruleId":"159","severity":1,"message":"172","line":17,"column":11,"nodeType":"161","messageId":"162","endLine":17,"endColumn":16},{"ruleId":"159","severity":1,"message":"173","line":61,"column":12,"nodeType":"161","messageId":"162","endLine":61,"endColumn":21},{"ruleId":"159","severity":1,"message":"174","line":62,"column":11,"nodeType":"161","messageId":"162","endLine":62,"endColumn":19},{"ruleId":"159","severity":1,"message":"175","line":65,"column":11,"nodeType":"161","messageId":"162","endLine":65,"endColumn":26},{"ruleId":"159","severity":1,"message":"176","line":2,"column":8,"nodeType":"161","messageId":"162","endLine":2,"endColumn":14},{"ruleId":"159","severity":1,"message":"177","line":5,"column":9,"nodeType":"161","messageId":"162","endLine":5,"endColumn":16},{"ruleId":"159","severity":1,"message":"178","line":33,"column":11,"nodeType":"161","messageId":"162","endLine":33,"endColumn":16},{"ruleId":"159","severity":1,"message":"179","line":3,"column":8,"nodeType":"161","messageId":"162","endLine":3,"endColumn":11},{"ruleId":"159","severity":1,"message":"180","line":5,"column":9,"nodeType":"161","messageId":"162","endLine":5,"endColumn":12},{"ruleId":"159","severity":1,"message":"181","line":14,"column":15,"nodeType":"161","messageId":"162","endLine":14,"endColumn":32},{"ruleId":"182","severity":1,"message":"183","line":20,"column":8,"nodeType":"184","endLine":20,"endColumn":10,"suggestions":"185"},{"ruleId":"159","severity":1,"message":"176","line":2,"column":8,"nodeType":"161","messageId":"162","endLine":2,"endColumn":14},{"ruleId":"159","severity":1,"message":"186","line":7,"column":8,"nodeType":"161","messageId":"162","endLine":7,"endColumn":20},{"ruleId":"159","severity":1,"message":"187","line":12,"column":5,"nodeType":"161","messageId":"162","endLine":12,"endColumn":28},{"ruleId":"159","severity":1,"message":"188","line":2,"column":9,"nodeType":"161","messageId":"162","endLine":2,"endColumn":19},{"ruleId":"159","severity":1,"message":"189","line":2,"column":21,"nodeType":"161","messageId":"162","endLine":2,"endColumn":26},{"ruleId":"159","severity":1,"message":"190","line":6,"column":21,"nodeType":"161","messageId":"162","endLine":6,"endColumn":33},{"ruleId":"159","severity":1,"message":"191","line":11,"column":8,"nodeType":"161","messageId":"162","endLine":11,"endColumn":16},{"ruleId":"159","severity":1,"message":"192","line":12,"column":8,"nodeType":"161","messageId":"162","endLine":12,"endColumn":20},{"ruleId":"159","severity":1,"message":"193","line":14,"column":8,"nodeType":"161","messageId":"162","endLine":14,"endColumn":16},{"ruleId":"182","severity":1,"message":"194","line":49,"column":38,"nodeType":"161","endLine":49,"endColumn":45},{"ruleId":"159","severity":1,"message":"195","line":59,"column":19,"nodeType":"161","messageId":"162","endLine":59,"endColumn":24},{"ruleId":"159","severity":1,"message":"196","line":13,"column":11,"nodeType":"161","messageId":"162","endLine":13,"endColumn":30},{"ruleId":"159","severity":1,"message":"197","line":6,"column":9,"nodeType":"161","messageId":"162","endLine":6,"endColumn":33},{"ruleId":"159","severity":1,"message":"198","line":7,"column":28,"nodeType":"161","messageId":"162","endLine":7,"endColumn":35},{"ruleId":"199","severity":1,"message":"200","line":33,"column":13,"nodeType":"201","endLine":33,"endColumn":68},{"ruleId":"199","severity":1,"message":"200","line":38,"column":13,"nodeType":"201","endLine":38,"endColumn":78},{"ruleId":"199","severity":1,"message":"200","line":43,"column":13,"nodeType":"201","endLine":43,"endColumn":92},{"ruleId":"199","severity":1,"message":"200","line":49,"column":13,"nodeType":"201","endLine":49,"endColumn":92},{"ruleId":"199","severity":1,"message":"200","line":55,"column":13,"nodeType":"201","endLine":55,"endColumn":74},"no-native-reassign",["202"],"no-negated-in-lhs",["203"],"@typescript-eslint/no-unused-vars","'useRef' is defined but never used.","Identifier","unusedVar","'ThemeProvider' is defined but never used.","'useTheme' is defined but never used.","'setHashValue' is assigned a value but never used.",["202"],["203"],"'Context' is defined but never used.",["202"],["203"],"'useEffect' is defined but never used.","'Props' is defined but never used.","'themeMode' is assigned a value but never used.","'useTheme' is assigned a value but never used.","'switchThemeMode' is assigned a value but never used.","'styles' is defined but never used.","'Divider' is defined but never used.","'theme' is assigned a value but never used.","'phy' is defined but never used.","'Col' is defined but never used.","'typeWriterTimeOut' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'timeoutList' and 'typeWriter'. Either include them or remove the dependency array.","ArrayExpression",["204"],"'FastfoodIcon' is defined but never used.","'TimelineOppositeContent' is defined but never used.","'lightTheme' is defined but never used.","'Theme' is defined but never used.","'ListItemIcon' is defined but never used.","'ListItem' is defined but never used.","'ListItemText' is defined but never used.","'MailIcon' is defined but never used.","The ref value 'timeOut.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'timeOut.current' to a variable inside the effect, and use that variable in the cleanup function.","'value' is assigned a value but never used.","'useContactFormProps' is defined but never used.","'BrightnessMediumOutlined' is defined but never used.","'YourSvg' is defined but never used.","react/jsx-no-target-blank","Using target=\"_blank\" without rel=\"noreferrer\" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener","JSXOpeningElement","no-global-assign","no-unsafe-negation",{"desc":"205","fix":"206"},"Update the dependencies array to be: [timeoutList, typeWriter]",{"range":"207","text":"208"},[745,747],"[timeoutList, typeWriter]"]