Initial testing

Author: rdeepc

.github/workflows/gitHub_pages_deploy.yml

@@ -0,0 +1,30 @@
+name: GitHub Pages deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16.x"
+
+      - name: Installing packages
+        run: npm install
+
+      - name: Build
+        run: npm run build && npm run export && touch ./out/.nojekyll
+
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: out

.gitignore

@@ -32,3 +32,10 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# intellij
+.idea/**
+
+# lock file
+yarn.lock
+package-lock.json

README.md

@@ -1,34 +1,6 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+<a href="https://github.com/anuraghazra/github-readme-stats">
+  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" />
+</a>
+<a href="https://github.com/anuraghazra/convoychat">
+  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" />
+</a>

package.json

@@ -9,9 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@fontsource/roboto": "^4.5.1",
+    "@mui/icons-material": "^5.0.4",
+    "@mui/material": "^5.0.4",
+    "framer-motion": "^4.1.17",
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^10.0.0",
     "next": "11.1.2",
+    "next-image-loader": "^2.0.6",
+    "next-images": "^1.8.1",
+    "next-optimized-images": "^2.6.2",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-icons": "^4.3.1",
+    "react-wordcloud": "^1.2.7",
+    "typewriter-effect": "^2.18.2",
+    "vanta": "^0.5.21"
   },
   "devDependencies": {
     "@types/react": "17.0.30",

pages/Components/Footer.tsx

@@ -0,0 +1,42 @@
+import {NextPage} from "next";
+import {BottomNavigation, BottomNavigationAction, Paper} from "@mui/material";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import {AiFillMediumSquare} from "react-icons/ai";
+
+const Footer: NextPage = () => {
+
+    const openUrl = (value: number) => {
+        const url = selectUrl(value)
+        window.open(url, '_blank')
+    }
+
+    const selectUrl = (selected: number) => {
+        switch (selected) {
+            case 0:
+                return 'https://www.linkedin.com/in/saumyashovanroy/'
+            case 1:
+                return 'https://github.com/rdeepc/'
+            case 2:
+                return 'https://medium.com/@rdeep'
+        }
+        return ''
+    }
+
+    return (
+        <Paper sx={{position: 'fixed', bottom: 0, left: 0, right: 0}} elevation={5}>
+            <BottomNavigation
+                onChange={(event, newValue) => {
+                    openUrl(newValue)
+                }}
+            >
+                <BottomNavigationAction label="LinkedIn" icon={<LinkedInIcon/>}/>
+                <BottomNavigationAction label="Github" icon={<GitHubIcon/>}/>
+                <BottomNavigationAction label="Medium"
+                                        icon={<AiFillMediumSquare style={{height: "50", width: "50"}}/>}/>
+            </BottomNavigation>
+        </Paper>
+    )
+}
+
+export default Footer

pages/Components/Header.tsx

@@ -0,0 +1,12 @@
+import {NextPage} from "next";
+import Head from "next/head";
+
+const Header: NextPage = () => {
+    return (
+        <Head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
+        </Head>
+    )
+}
+
+export default Header

pages/Components/Info.tsx

@@ -0,0 +1,18 @@
+import {NextPage} from "next";
+import {Container} from "@mui/material";
+import Typography from "@mui/material/Typography";
+
+const Info: NextPage = () => {
+
+    return (
+        <Container>
+            <Typography style={{fontSize: "3em"}}>Software Engineer</Typography>
+            <Typography style={{fontSize: "1.2em"}}>Experienced in Cloud Technologies</Typography>
+            <Typography style={{fontSize: "1.2em"}}>Interested in Opensource and Self Hosted
+                technologies</Typography>
+            <Typography style={{fontSize: "1.2em"}}>Based on Boston, MA, USA</Typography>
+        </Container>
+    )
+}
+
+export default Info

pages/Components/Name.tsx

@@ -0,0 +1,26 @@
+import {NextPage} from "next";
+import {Container} from "@mui/material";
+import {motion} from "framer-motion";
+import Typography from "@mui/material/Typography";
+
+const Name: NextPage = () => {
+
+    return (
+        <motion.div
+            animate={{x: 20, y: 20, opacity: 1}}
+            transition={{
+                delay: 1,
+                x: {type: "spring", stiffness: 100},
+                default: {duration: 3},
+            }}
+        >
+            <Container>
+                <Typography style={{fontSize: "6em"}}>Saumya</Typography>
+                <Typography style={{fontSize: "6em"}}>Shovan</Typography>
+                <Typography style={{fontSize: "6em"}}>Roy</Typography>
+            </Container>
+        </motion.div>
+    )
+}
+
+export default Name

pages/Components/WorkWith.tsx

@@ -0,0 +1,184 @@
+// @ts-nocheck
+import {NextPage} from "next";
+import {Container} from "@mui/material";
+import Typography from "@mui/material/Typography";
+import ReactWordcloud from "react-wordcloud";
+
+const WorkWith: NextPage = () => {
+
+    const words = [
+        {
+            text: 'Java',
+            value: 100,
+        },
+        {
+            text: 'Spring Boot',
+            value: 100,
+        },
+        {
+            text: 'JPA',
+            value: 100,
+        },
+        {
+            text: 'Hibernate',
+            value: 100,
+        },
+        {
+            text: 'Junit',
+            value: 100,
+        },
+        {
+            text: 'Mockito',
+            value: 100,
+        },
+        {
+            text: 'gRPC',
+            value: 100,
+        },
+        {
+            text: 'REST',
+            value: 100,
+        },
+        {
+            text: 'RabbitMQ',
+            value: 100,
+        },
+        {
+            text: 'NodeJS',
+            value: 100,
+        },
+        {
+            text: 'Express',
+            value: 100,
+        },
+        {
+            text: 'JavaScript',
+            value: 100,
+        },
+        {
+            text: 'ES6',
+            value: 100,
+        },
+        {
+            text: 'React',
+            value: 100,
+        },
+        {
+            text: 'SQL',
+            value: 100,
+        },
+        {
+            text: 'Elastic Search',
+            value: 100,
+        },
+        {
+            text: 'ELK',
+            value: 100,
+        },
+        {
+            text: 'NoSQL',
+            value: 100,
+        },
+        {
+            text: 'MongoDB',
+            value: 100,
+        },
+        {
+            text: 'Redis',
+            value: 100,
+        },
+        {
+            text: 'NoSQL',
+            value: 100,
+        },
+        {
+            text: 'Gitlab',
+            value: 100,
+        },
+        {
+            text: 'CI/CD',
+            value: 100,
+        },
+        {
+            text: 'Git',
+            value: 100,
+        },
+        {
+            text: 'Docker',
+            value: 100,
+        },
+        {
+            text: 'Helm',
+            value: 100,
+        },
+        {
+            text: 'Bash',
+            value: 100,
+        },
+        {
+            text: 'Maven',
+            value: 100,
+        },
+        {
+            text: 'Npm',
+            value: 100,
+        },
+        {
+            text: 'Kubernetes',
+            value: 100,
+        },
+        {
+            text: 'OpenShift',
+            value: 100,
+        },
+        {
+            text: 'AWS',
+            value: 100,
+        },
+        {
+            text: 'GCP',
+            value: 100,
+        },
+        {
+            text: 'Microk8s',
+            value: 100,
+        },
+        {
+            text: 'Nginx',
+            value: 100,
+        },
+    ]
+
+    const options = {
+        colors: ["rgba(0,0,0,0.88)"],
+        enableTooltip: false,
+        deterministic: false,
+        fontFamily: "Roboto",
+        fontSizes: [5, 60],
+        fontStyle: "normal",
+        fontWeight: "normal",
+        padding: 10,
+        rotations: 3,
+        rotationAngles: [0, 90],
+        scale: "sqrt",
+        spiral: "archimedean",
+        transitionDuration: 10000
+    };
+
+    const callbacks = {
+        onWordClick: null,
+        onWordMouseOver: null,
+        onWordMouseOut: null,
+        getWordTooltip: null
+    }
+
+    // @ts-ignore
+    return (
+        <Container style={{padding: "50px"}}>
+            <Typography style={{textAlign: "center", fontSize: "3em"}}>I work with</Typography>
+            {process.browser && <ReactWordcloud words={words} options={options} callbacks={callbacks}/>}
+        </Container>
+    )
+}
+
+export default WorkWith