Add gatsby-plugin-csp and update tag styling

saipraveenkondapalli · Jan 25, 2024 · ea48522 · ea48522
1 parent 1a07f27
commit ea48522
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@emotion/styled": "^11.11.0",
     "framer-motion": "^10.18.0",
     "gatsby": "^5.13.1",
+    "gatsby-plugin-csp": "^1.1.4",
     "gatsby-plugin-image": "^3.13.0",
     "gatsby-plugin-manifest": "^5.13.0",
     "gatsby-plugin-minify": "^0.5.0",
@@ -37,7 +38,7 @@
   "license": "0BSD",
   "scripts": {
     "build": "gatsby build",
-    "develop": "gatsby develop -p 1801",
+    "develop": "gatsby develop -p 1801 -H 0.0.0.0",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
     "start": "gatsby develop",
     "serve": "gatsby serve",

diff --git a/src/components/CompanyCard.tsx b/src/components/CompanyCard.tsx
@@ -50,15 +50,17 @@ const CompanyCard: React.FC<ICompanyCard> = ({ company, colorMode }) => {
                 isInline
                 display={["flex", "flex", "flex", "flex"]}
               >
-                {company.skills.map((skill) => (
-                  <Tag size="sm" padding="0 5px" key={skill}>
-                    {skill}
-                  </Tag>
-                ))}
+                <Flex flexWrap="wrap">
+                  {company.skills.map((skill, index) => (
+                    <Tag key={index} size="sm" mx={1} my={1} borderRadius="5px">
+                      {skill}
+                    </Tag>
+                  ))}
+                </Flex>
               </Stack>
             </Stack>
           </Flex>
-          <Stack display={["none", "none", "flex", "flex"]}>
+          <Stack display={"flex"}>
             <Text fontSize={14} color={`mode.${colorMode}.career.subtext`}>
               {company.period}
             </Text>

diff --git a/src/components/SideProject.tsx b/src/components/SideProject.tsx
@@ -35,7 +35,7 @@ export const SideProjectCard: React.FC<ISideProjectCard> = ({ project }) => {
               maxH={"210px"}
               h={"210px"}
               w="full"
-             alt={project.alt}/>
+                alt={project.alt} />
           </Box>
           <Stack mb={3}>
             <Text
@@ -53,7 +53,7 @@ export const SideProjectCard: React.FC<ISideProjectCard> = ({ project }) => {
           {project.tech.map((tech, index) => {
             const techStack = allTechStacks.find(stack => stack.name === tech);
             return (
-              <Tag size="sm" padding="10px" key={index} mx={1}>
+              <Tag size="sm" padding="10px" key={index} mb={2} mx={1}>
                 {techStack ? <Circle size="30px">{techStack.icon}</Circle> : tech}
               </Tag>
             );