Contact
\n \n\n ![\"\"]({require(\"../../images/icons/mongodb.svg\")})
\n
\n \n \n A fullstack app using the MERN stack. With this app you can register\n bugs to fix in your project. Assign them to a particular user and\n group. Only users with admin privilages can modify users and delete\n bugs. Login is required to use the application.\n
\n
\n *Login using admin@example.com:admin123*\n
\n
\n
\n \n
\n \n \n A fullstack app using the MERN stack. A social media app for web\n developers. Users are able to make an account that lists their\n skills, education and work experience. It is possible to write a\n post, with the ability to comment, like and dislike. Gravatar is\n used for the profile image.\n
\n
\n
\n A Node JS application using socket.io to create rooms and chat with\n other people. Inludes filter for bad language and the ability to\n share your location.\n
\n
\n
![\"\"]({require(\"../../images/icons/w3_html5-ar21.svg\")}){kind=icon}
\n \n This is a landing page for a photographer. This site was made to\n have a nice modern and aesthetic layout. I used pure CSS and HTML\n with a focus on responsiveness and design.\n
\n
\n
\n This very site. When I started my portfolio I had an idea of making\n the navigation a cube-like transition. I used Material-UI with a\n combination of CSS transitions. Looking back, it would have been a\n lot easier to just use straight CSS. It was a learning experience\n and I'm satisfied with the outcome. Perhaps a simpler website would\n be better for my portfolio, but I have a strong attachment to this\n design for some reason.\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n","import React from \"react\";\nimport Grid from \"@material-ui/core/Grid\";\n\nconst style = {\n display: \"flex\",\n color: \"#6A6C6E\",\n fontFamily: \"Roboto-light\",\n lineHeight: \"1\",\n fontSize: \"2rem\",\n background: \"rgba(244,244,246, 0.9)\",\n marginTop: \"60px\"\n};\n\nexport default function HomePage() {\n return (\n \n \n \n Hi,\n
\n \n
\n );\n}\n","import React from \"react\";\nimport Button from \"@material-ui/core/Button\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport DialogActions from \"@material-ui/core/DialogActions\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\n\nexport default function MaxWidthDialog() {\n const [open, setOpen] = React.useState(false);\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n \n Hi,\n
\n I'm Adrian,\n
A Web Developer.\n
\n \n
I believe coding is something you learn through practice. Much\n like learning an instrument. You can read and watch as many guides,\n tutorials and courses as you want, but it won't really stick with\n you, unless you put it into practice. It is also important to start\n from the bottom up. You must understand the concepts before moving\n on to the next step. I know it can seem overwhelming and monotonous,\n but it will save you a lot of headache and time in the long run.\n
\n
I have found that many developers, who have passed the\n honeymoon period of learning to code, have learned this lesson. I\n try to pass this along to people dipping their toes in the water of\n web development. It's not easy, it will not be something you can do\n expertly, or even at an intermidiate level in 3 months. Now if you\n are coding 8+ hours a day, everyday, then I can see it being a\n possibility. But this is not the case for most people. I've been\n learning to code for over two years, with a full-time job and very\n little free time to feel comfortable enough to say \"I am ready.\"\n
\n
\n When I was learning to play guitar. I wanted to play the fun songs\n as soon as possible. This resulted in having bad and sloppy\n technique. It's not until I took formal lessons that I realized how\n important it was to take it a step at a time. When you learn a new\n song or start a new coding project. It is ideal to take it piece by\n piece. Break down each component and get it under your fingers, get\n it right, and move on to the next part. There may be adjustments to\n make later on, but they will be minor and easy to fix. Take it slow,\n learn it well and never stop improving.\n
\n
\n When I first started out, I was overwhelmed with the vast\n information and directions one can take. Seeking guidance, I\n attended a meetup and it was highly encouraging and helpful. Besides\n the helpful tips, on what I was learning at the time, it was\n motivating to see other people with a shared passion. I was more\n determined than ever to continue on this path.\n
\n
\n After several months, the owner of the meetup group was looking for\n additional hosts to expand over Orange County. I thought it was a\n great opportunity, both professional and personal, so I took it.\n Over the course of two years, there were many iterations and\n approaches I took to hosting this group. I started out with\n algorithms and coding challenges, thinking they were more important\n than they really were. I'm talking strictly for web development.\n They are necessary, but shouldn't be in the forefront of the\n learning process. But I would say they contributed to better\n participation and group work.\n
\n
\n After that I tried group projects trying to build a web app with a\n shared github. Now the thing you have to know about the meetup world\n is that attendance and repeat attendees are not exactly reliable. So\n needles to say, this was not very successful. There was one\n tic-tac-toe app that was completed between one other person and\n myself, that's it.\n
\n
\n Scrapping that idea, I tried short tutorials. Simple things like\n sending an email without a back end or how git works and how to use\n it. This worked fine, but some people were working with different\n languages or tech, while also being at different levels. Some are\n just barely dipping their toes in the water while others used\n frontend frameworks or spit out HTML from the backend. At this point\n I realized I wanted to help people who were struggling to figure\n things out, just like I was in the beginning.\n
\n
\n So finally, I settled on a discussion on web development for\n beginners. This opened it up for not only the people who are coming,\n but myself. Coming up with a formalized tutorial, while still\n learning myself was not easy. Especially since I was working long\n hours at my regular job. So it didn't allow ample time for both.\n This has been working out great. People come in with questions and I\n try my best to give them an answer and guidance. If I don't know, we\n would research it together. Over time, I've developed a good idea\n for the directions people can take and I try to advice people the\n best I can. If someone with more experience comes to the meetup,\n they can share in their experience as well. We discuss our goals,\n tips and stories of how we got were we are. It is always humbling.\n
\n
\n I've met many people from different backgrounds and skills. There\n are days when I get a big group and it's non stop action and there\n are days that not one person attends. On those days, I would just\n use up the time to code myself. I would at times think about\n stopping just to work on my coding progress, but I keeep coming back\n to my beginnings and the struggles that came with it. There weren't\n too many, but always cherish the moments that I was able to help\n someone out. No matter how small or trivial. The world of web\n development can be a headache and abstract. Even if I just helped\n one person out, it would have been worth it.\n
\n
\n Oh and don't be that guy that RSVPs for a meetup and doesn't show\n up. It's not cool. :/\n
\n \n \n Download\n \n \n\n
\n );\n}\n","import React from \"react\";\n\nconst style = {\n display: \"flex\",\n color: \"#6A6C6E\",\n fontFamily: \"Roboto-light\",\n lineHeight: \"1.25\",\n fontSize: \"2rem\",\n marginTop: \"60px\",\n flexDirection: \"column\",\n maxWidth: \"50%\",\n margin: \"auto\",\n marginLeft: \"80px\",\n backfaceVisibility: \"hidden\"\n};\n\nexport default function AboutPage() {\n return (\n \n
\n \n
\n );\n}\n","import React from \"react\";\nimport ContactPage from \"../ContactPage\";\nimport ProjectsPage from \"../ProjectsPage\";\nimport HomePage from \"../HomePage\";\nimport BlogPage from \"../BlogPage\";\nimport ResumePage from \"../ResumePage\";\nimport AboutPage from \"../AboutPage\";\n\nconst CubeLayout = () => {\n return (\n About Me
\n\n I'm Adrian Gomez, a Web Developer based in Southern California. I have\n found my passion in web development and design. I love tech and problem\n solving in all aspects. I specialize in the MERN stack and all the bits\n and bytes in between, but will gladly explore other avenues. Similar to\n the tech world, I am always in development.\n
\n\n \n \n
\n \n
\n );\n};\n\nexport default CubeLayout;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport AccountBoxIcon from \"@material-ui/icons/AccountBox\";\nimport AppBar from \"@material-ui/core/AppBar\";\nimport AssignmentIcon from \"@material-ui/icons/Assignment\";\nimport ChatIcon from \"@material-ui/icons/Chat\";\nimport HomeIcon from \"@material-ui/icons/Home\";\nimport ComputerIcon from \"@material-ui/icons/Computer\";\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\nimport Divider from \"@material-ui/core/Divider\";\nimport Drawer from \"@material-ui/core/Drawer\";\nimport Hidden from \"@material-ui/core/Hidden\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport List from \"@material-ui/core/List\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemIcon from \"@material-ui/core/ListItemIcon\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport MailIcon from \"@material-ui/icons/Mail\";\nimport MenuIcon from \"@material-ui/icons/Menu\";\nimport Toolbar from \"@material-ui/core/Toolbar\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\nimport CubeLayout from \"./CubeLayout\";\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: \"flex\",\n color: \"#BCB2B2\",\n fontFamily: \"Roboto-light\",\n justifyContent: \"center\"\n },\n drawer: {\n [theme.breakpoints.up(\"md\")]: {\n width: drawerWidth,\n flexShrink: 0\n }\n },\n appBar: {\n marginLeft: drawerWidth,\n [theme.breakpoints.up(\"md\")]: {\n width: `calc(100% - ${drawerWidth}px)`\n }\n },\n menuButton: {\n marginRight: theme.spacing(2),\n [theme.breakpoints.up(\"md\")]: {\n display: \"none\"\n }\n },\n toolbar: theme.mixins.toolbar,\n drawerPaper: {\n width: drawerWidth\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3)\n }\n}));\n\nfunction ResponsiveDrawer(props) {\n const [currentClass, setCurrentClass] = React.useState(\"\");\n\n const { container } = props;\n const classes = useStyles();\n const theme = useTheme();\n const [mobileOpen, setMobileOpen] = React.useState(false);\n\n const handleClick = e => {\n e.preventDefault();\n let cube = document.querySelector(\".cube\");\n let showClass = \"show-\" + e.currentTarget.value;\n if (currentClass) {\n cube.classList.remove(currentClass);\n }\n cube.classList.add(showClass);\n setCurrentClass(showClass);\n let x = window.matchMedia(\"(max-width: 600px)\");\n if (x.matches) {\n handleDrawerToggle();\n }\n };\n\n const handleDrawerToggle = () => {\n setMobileOpen(!mobileOpen);\n };\n\n const drawer = (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Web Developer
\n- \n
\n \n \n \n \n {currentClass === \"\"\n ? \"Home\"\n : currentClass === \"show-front\"\n ? \"Home\"\n : currentClass === \"show-back\"\n ? \"Projects\"\n : currentClass === \"show-left\"\n ? \"Blog\"\n : currentClass === \"show-right\"\n ? \"Resume\"\n : currentClass === \"show-bottom\"\n ? \"About\"\n : currentClass === \"show-top\"\n ? \"Contact\"\n : \"\"}\n \n \n \n \n
\n );\n}\n\nResponsiveDrawer.propTypes = {\n container: PropTypes.instanceOf(\n typeof Element === \"undefined\" ? Object : Element\n )\n};\n\nexport default ResponsiveDrawer;\n","import React from 'react';\nimport Navbar from './components/layout/Navbar';\nimport './App.css';\n\nconst App = () => (\n \n
\n);\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(