{"version":3,"sources":["views/home/Home.jsx","views/age/Age.jsx","App.js","index.js"],"names":["content","fName","lName","desc","urls","github","linkedin","interestStmt","filter","Home","className","Object","keys","map","url","href","target","style","src","birthday","Date","Age","useState","now","date","setDate","console","log","diffTime","Math","abs","diffDate","years","getUTCFullYear","months","getUTCMonth","days","floor","hours","minutes","seconds","useEffect","intervalId","setInterval","old","clearInterval","HomeWide","App","exact","path","component","ReactDOM","render","document","getElementById"],"mappings":"wNAGMA,G,MAAU,CACZC,MAAO,aACPC,MAAO,UACPC,KAAM,oBACNC,KAAM,CACFC,OAAQ,6BACRC,SAAU,qCAEdC,aAAc,6DAGZC,EAAS,CACXA,OAAO,2FAiCIC,EA9BK,kBAEhB,yBAAKC,UAAU,2FACX,yBAAKA,UAAU,2BACX,yBAAKA,UAAU,uEACX,uBAAGA,UAAU,iDAAiDV,EAAQC,MAAtE,IAA6E,0BACzES,UAAU,iBAAiBV,EAAQE,QACvC,uBAAGQ,UAAU,0EAAb,YACa,0BAAMA,UAAU,eAAhB,aAEb,yBAAKA,UAAU,4DAEPC,OAAOC,KAAKZ,EAAQI,MAAMS,KAAI,SAACC,GAAD,OAC1B,uBAAGC,KAAMf,EAAQI,KAAKU,GAAME,OAAO,UAC/B,yBAAKC,MAAOT,EAAQE,UAAU,mBACzBQ,IAAG,iEAA4DJ,EAA5D,eAKxB,yBAAKJ,UAAU,kBACX,2BACKV,EAAQO,mB,sBCtB3BY,EAAW,IAAIC,KAAK,KAAM,EAAG,EAAG,GAAI,EAAG,EAAG,GA2DjCC,EApDI,WAAO,IAAD,EACGC,mBAASF,KAAKG,OADjB,mBACdC,EADc,KACRC,EADQ,KAErBC,QAAQC,IAAIH,GACZ,IAAMI,EAAWC,KAAKC,IAAIV,KAAKG,MAAQJ,GACjCY,EAAW,IAAIX,KAAKQ,GACpBI,EAAQD,EAASE,iBAAmB,KACpCC,EAASH,EAASI,cAClBC,EAAOP,KAAKQ,MAAOT,EAbd,MAamC,IACxCU,EAAQT,KAAKQ,MAAOT,EAbb,KAamC,IAC1CW,EAAUV,KAAKQ,MAAQT,EAbd,IAauC,IAChDY,EAAUX,KAAKQ,MAAQT,EAbb,IAasC,IAEvC,gBAAYI,EAAZ,0BAAmCE,EAAnC,aAA8CE,EAA9C,aAAuDE,EAAvD,aAAiEC,EAAjE,aAA6EC,EAA7E,aASf,OAPAC,qBAAU,WACN,IAAMC,EAAaC,aAAY,WAC3BlB,GAAQ,SAAAmB,GAAG,OAAIxB,KAAKG,WACrB,KAEH,OAAO,kBAAMsB,cAAcH,MAC5B,IACI,yBAAKhC,UAAU,0GAClB,yBAAKA,UAAU,2CACX,yBAAKA,UAAU,mJACX,uBAAGA,UAAU,4BAA4BsB,GACzC,uBAAGtB,UAAU,kBAAb,SAEA,uBAAGA,UAAU,4BAA4BwB,GACzC,uBAAGxB,UAAU,iBAAb,UAEA,uBAAGA,UAAU,4BAA4B0B,GACzC,uBAAG1B,UAAU,iBAAb,QAEA,uBAAGA,UAAU,4BAA4B4B,GACzC,uBAAG5B,UAAU,iBAAb,SAEA,uBAAGA,UAAU,4BAA4B6B,GACzC,uBAAG7B,UAAU,iBAAb,WAEA,uBAAGA,UAAU,4BAA4B8B,GACzC,uBAAG9B,UAAU,iBAAb,eCtDVoC,EAAW,kBACb,yBAAKpC,UAAU,iBACX,kBAAC,EAAD,QAeOqC,MAbf,WACI,OACI,kBAAC,IAAD,KAGI,kBAAC,IAAD,KACI,kBAAC,IAAD,CAAOC,OAAK,EAACC,KAAK,IAAIC,UAAWJ,IADrC,KAEM,kBAAC,IAAD,CAAOG,KAAK,OAAOC,UAAW7B,IAFpC,QChBZ8B,IAASC,OAAO,kBAAC,EAAD,MAASC,SAASC,eAAe,W","file":"static/js/main.963c702b.chunk.js","sourcesContent":["import React from 'react';\nimport {BrowserRouter as Router} from \"react-router-dom\";\n\nconst content = {\n    fName: \"~/Abdullah\",\n    lName: \"Alqarni\",\n    desc: \"Software Engineer\",\n    urls: {\n        github: \"https://github.com/elgarni\",\n        linkedin: \"https://linkedin.com/in/iaalqarni\"\n    },\n    interestStmt: \"DevOps, SRE, CI/CD & Automation Pipelines, Public Clouds\",\n};\n\nconst filter = {\n    filter: `invert(93%) sepia(20%) saturate(3778%) hue-rotate(318deg) brightness(99%) contrast(95%)`\n}\n\nexport const Home = () =>\n\n    <div className=\"bg-gray-900 w-full h-screen grid grid-rows-3 grid-cols-1 lg:grid-cols-3  xl:grid-cols-3\">\n        <div className=\"row-start-2 col-start-2\">\n            <div className=\"text-center font-mont text-orange-400 grid grid-rows-4 grid-cols-1 \">\n                <p className=\"text-3xl  md:text-6xl xl:text-5xl lg:text-6xl\">{content.fName} <span\n                    className=\"font-hairline\">{content.lName}</span></p>\n                <p className=\"text-2xl sm:text-xl md:text-3xl xl:text-3xl lg:text-3xl font-hairline \">\n                    Software <span className=\"font-normal\">Engineer</span>\n                </p>\n                <div className=\"social-icons grid grid-rows-1 grid-flow-col m-auto gap-6\">\n                    {\n                        Object.keys(content.urls).map((url) =>\n                            <a href={content.urls[url]} target=\"_blank\">\n                                <img style={filter} className=\"img-filter h-16 \"\n                                     src={`https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${url}.svg`}/>\n                            </a>\n                        )\n                    }\n                </div>\n                <div className=\"m-4 font-light\">\n                    <p>\n                        {content.interestStmt}\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n\n\nexport default Home;\n","import React, {useEffect, useState} from 'react';\nimport {BrowserRouter as Router} from \"react-router-dom\";\n\nconst content = {\n    fName: \"~/Abdullah\",\n    lName: \"Alqarni\",\n    desc: \"Software Engineer\",\n    urls: {\n        github: \"https://github.com/elgarni\",\n        linkedin: \"https://linkedin.com/in/iaalqarni\"\n    },\n    interestStmt: \"DevOps, SRE, CI/CD & Automation Pipelines, Public Clouds\",\n};\n\nconst filter = {\n    filter: `invert(93%) sepia(20%) saturate(3778%) hue-rotate(318deg) brightness(99%) contrast(95%)`\n}\n\nconst birthday = new Date(1996, 1, 8, 12, 0, 0, 0)\nconst oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds\nconst oneHour =  60 * 60 * 1000; // minutes*seconds*milliseconds\nconst oneMinute =  60 * 1000; // seconds*milliseconds\nconst oneSecond =   1000; // 1 * *milliseconds\n\n\nexport const Age = () => {\n    const [date, setDate] = useState(Date.now());\n    console.log(date)\n    const diffTime = Math.abs(Date.now() - birthday);\n    const diffDate = new Date(diffTime);\n    const years = diffDate.getUTCFullYear() % 1970;\n    const months = diffDate.getUTCMonth();\n    const days = Math.floor((diffTime / oneDay) % 30) ;\n    const hours = Math.floor((diffTime / oneHour) % 24) ;\n    const minutes = Math.floor( (diffTime / oneMinute)  % 60 ) ;\n    const seconds = Math.floor( (diffTime / oneSecond)  % 60) ;\n\n    const ageNumber = `<span>${years}years <br/>    ${months}M ${days}D ${hours}h ${minutes}M ${seconds}s </span>`\n\n    useEffect(() => {\n        const intervalId = setInterval(() => {\n            setDate(old => Date.now());\n        }, 1000);\n\n        return () => clearInterval(intervalId);\n    }, []);\n    return <div className=\"bg-gray-900 w-full h-screen grid grid-rows-3 grid-cols-1 lg:grid-cols-3  md:grid-cols-1 xl:grid-cols-3\">\n        <div className=\"row-start-2 col-start-1 lg:col-start-2 \">\n            <div className=\"grid grid-cols-2 w-full h-full  text-2xl sm:text-xl md:text-5xl xl:text-5xl lg:text-5xl font-hairline text-orange-400 text-center m-0 p-0 gap-0\">\n                <p className=\"text-right m-1 font-bold\">{years}</p>\n                <p className=\"text-left m-1 \">Years</p>\n\n                <p className=\"text-right m-1 font-bold\">{months}</p>\n                <p className=\"text-left m-1\">Months</p>\n\n                <p className=\"text-right m-1 font-bold\">{days}</p>\n                <p className=\"text-left m-1\">Days</p>\n\n                <p className=\"text-right m-1 font-bold\">{hours}</p>\n                <p className=\"text-left m-1\">Hours</p>\n\n                <p className=\"text-right m-1 font-bold\">{minutes}</p>\n                <p className=\"text-left m-1\">Minutes</p>\n\n                <p className=\"text-right m-1 font-bold\">{seconds}</p>\n                <p className=\"text-left m-1\">Seconds</p>\n\n\n            </div>\n\n        </div>\n    </div>\n}\n\n\n\n\nexport default Age;","import React from 'react';\nimport './styles/app.css';\nimport Home from \"./views/home/Home\";\nimport {\n    BrowserRouter as Router,\n    Switch,\n    Route,\n    Link\n} from \"react-router-dom\";\nimport Age from \"./views/age/Age\";\n\nconst HomeWide = () =>\n    <div className=\"w-full h-full\">\n        <Home/>\n    </div>\nfunction App() {\n    return (\n        <Router>\n            {/* A <Switch> looks through its children <Route>s and\n            renders the first one that matches the current URL. */}\n            <Switch>\n                <Route exact path=\"/\" component={HomeWide}/>\n                /*<Route path=\"/age\" component={Age}/>*/\n            </Switch>\n        </Router>\n    );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(<App />, document.getElementById('root'));\n"],"sourceRoot":""}