├── .eslintignore
├── .prettierignore
├── public
    ├── ww-logo.png
    ├── down-arrow.png
    ├── me-website.png
    └── vercel.svg
├── pages
    ├── exp.js
    ├── api
    │   └── hello.js
    ├── work.js
    ├── _app.js
    ├── talks.js
    ├── projects.js
    ├── _document.js
    ├── skills.js
    └── index.js
├── styles
    ├── tailwind.css
    ├── globals.css
    └── Home.module.css
├── next.config.js
├── README.md
├── .prettierrc
├── postcss.config.js
├── .gitignore
├── src
    ├── data
    │   ├── proficient.js
    │   ├── socials.js
    │   ├── skills-data.js
    │   ├── recent-talk.js
    │   ├── project-data.js
    │   └── talks-data.js
    └── components
    │   ├── talk-card.js
    │   ├── project-card.js
    │   ├── recent-card.js
    │   ├── nav.js
    │   ├── foot.js
    │   ├── tab.js
    │   └── landing.js
├── .eslintrc.js
├── package.json
└── tailwind.config.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/ww-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwvicy/poppity/HEAD/public/ww-logo.png


--------------------------------------------------------------------------------
/pages/exp.js:
--------------------------------------------------------------------------------
1 | export default function Exp() {
2 |     return <div>experience</div>;
3 | }
4 | 


--------------------------------------------------------------------------------
/public/down-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwvicy/poppity/HEAD/public/down-arrow.png


--------------------------------------------------------------------------------
/public/me-website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwvicy/poppity/HEAD/public/me-website.png


--------------------------------------------------------------------------------
/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     images: {
3 |         domains: ['i.imgur.com']
4 |     }
5 | };
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # poppity
2 | 
3 | This is supposed to be my portfolio, let's see if it actually ends up being it lol
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "semi": true,
3 |     "tabWidth": 4,
4 |     "printWidth": 100,
5 |     "singleQuote": true,
6 |     "trailingComma": "none",
7 |     "jsxBracketSameLine": true
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default (req, res) => {
4 |     res.status(200).json({ name: 'John Doe' });
5 | };
6 | 


--------------------------------------------------------------------------------
/pages/work.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function Work() {
 4 |     return (
 5 |         <div className="flex flex-col min-h-screen">
 6 |             <h1>Work</h1>
 7 |         </div>
 8 |     );
 9 | }
10 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     plugins: {
 3 |         tailwindcss: {},
 4 |         'postcss-flexbugs-fixes': {},
 5 |         'postcss-preset-env': {
 6 |             autoprefixer: {
 7 |                 flexbox: 'no-2009'
 8 |             },
 9 |             stage: 3,
10 |             features: {
11 |                 'custom-properties': false
12 |             }
13 |         }
14 |     }
15 | };
16 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     @apply antialiased;
 3 | }
 4 | 
 5 | .underline--magical {
 6 |     background-image: linear-gradient(120deg, #ddd6fe 30%, #a78bfa 70%);
 7 |     background-repeat: no-repeat;
 8 |     background-size: 100% 0.2em;
 9 |     background-position: 0 88%;
10 |     transition: background-size 0.25s ease-in;
11 | }
12 | .underline--magical:hover {
13 |     background-size: 100% 88%;
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable react/prop-types */
 2 | import '../styles/globals.css';
 3 | import '../styles/main.css';
 4 | import Nav from '../src/components/nav';
 5 | // import Foot from '../src/components/foot';
 6 | 
 7 | function MyApp({ Component, pageProps }) {
 8 |     return (
 9 |         <div className="flex flex-col h-screen">
10 |             <Nav />
11 |             <main className="flex-1 overflow-y-auto p-5">
12 |                 <Component {...pageProps} />
13 |             </main>
14 |         </div>
15 |     );
16 | }
17 | 
18 | export default MyApp;
19 | 


--------------------------------------------------------------------------------
/src/data/proficient.js:
--------------------------------------------------------------------------------
 1 | const tools = [
 2 |     {
 3 |         logo: 'https://i.imgur.com/dYBIWH5.png'
 4 |     },
 5 |     {
 6 |         logo: 'https://i.imgur.com/lP5llNR.png'
 7 |     },
 8 |     {
 9 |         logo: 'https://i.imgur.com/uV1QMBQ.png'
10 |     },
11 |     {
12 |         logo: 'https://i.imgur.com/BRnUYav.png'
13 |     },
14 |     {
15 |         logo: 'https://i.imgur.com/GRie7YL.png'
16 |     },
17 |     {
18 |         logo: 'https://i.imgur.com/iTXeEji.png'
19 |     },
20 |     {
21 |         logo: 'https://i.imgur.com/9rNKqqE.png'
22 |     }
23 | ];
24 | 
25 | export default tools;
26 | 


--------------------------------------------------------------------------------
/src/components/talk-card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function TalkCard({ title, subtitle, label, link }) {
 4 |     return (
 5 |         <div>
 6 |             <div className="max-w-xs rounded overflow-hidden shadow-lg my-2 bg-pink-200">
 7 |                 <a href={link} target="_blank" rel="noreferrer">
 8 |                     <div className="px-6 py-4">
 9 |                         <div className="font-bold text-xl mb-2">{title}</div>
10 |                         <p className="text-grey-darker text-base">{subtitle}</p>
11 |                     </div>
12 |                     <div className="px-6 py-4">
13 |                         <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">
14 |                             {label}
15 |                         </span>
16 |                     </div>
17 |                 </a>
18 |             </div>
19 |         </div>
20 |     );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/data/socials.js:
--------------------------------------------------------------------------------
 1 | const socials = [
 2 |     {
 3 |         link: 'https://github.com/dwvicy',
 4 |         logo: 'https://i.imgur.com/pypi6Kc.png'
 5 |     },
 6 |     {
 7 |         link: 'https://twitter.com/dwivivivi',
 8 |         logo: 'https://i.imgur.com/G7yTDHP.png'
 9 |     },
10 |     {
11 |         link: 'https://linkedin.com/in/dwvicy',
12 |         logo: 'https://i.imgur.com/kF9HMpz.png'
13 |     },
14 |     {
15 |         link: 'https://polywork.com/dwvicy',
16 |         logo: 'https://i.imgur.com/EEo2g39.png'
17 |     }
18 |     // {
19 |     //     link: 'https://anchor.com/bottle',
20 |     //     logo: 'https://i.imgur.com/CZiMIA0.png'
21 |     // },
22 |     // {
23 |     //     link: 'https://michispotlight.substack.com',
24 |     //     logo: 'https://i.imgur.com/Yu7ZLoy.png'
25 |     // },
26 |     // {
27 |     //     link: 'https://youtube.com/c/michispotlight',
28 |     //     logo: 'https://i.imgur.com/Y7ke7jV.png'
29 |     // },
30 | ];
31 | 
32 | export default socials;
33 | 


--------------------------------------------------------------------------------
/src/components/project-card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function ProjectCard({ title, subtitle, label, img, link }) {
 4 |     return (
 5 |         <div>
 6 |             <a href={link} target="_blank" rel="noreferrer">
 7 |                 <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
 8 |                     <img className="w-full" src={img} alt=" " />
 9 |                     <div className="px-6 py-4">
10 |                         <div className="font-bold text-xl mb-2">{title}</div>
11 |                         <p className="text-grey-darker text-base">{subtitle}</p>
12 |                     </div>
13 |                     <div className="px-6 py-4">
14 |                         <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">
15 |                             {label}
16 |                         </span>
17 |                     </div>
18 |                 </div>
19 |             </a>
20 |         </div>
21 |     );
22 | }
23 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/pages/talks.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TalkCard from '../src/components/talk-card';
 3 | import talks from '../src/data/talks-data';
 4 | 
 5 | export default function Talks() {
 6 |     return (
 7 |         <div>
 8 |             <div>
 9 |                 <h1 className="font-black text-2xl underline--magical w-20">talks</h1>
10 |                 <p> imma bit talkative but i listen too :) invite me for a talk if you want </p>
11 |                 <br></br>
12 |             </div>
13 |             <div className="flex flex-wrap -mx-1 overflow-hidden sm:-mx-1 md:-mx-1 lg:-mx-1 xl:-mx-1">
14 |                 {talks.map(({ title, subtitle, label, link }) => (
15 |                     <div
16 |                         className="my-1 px-1 w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-1 md:px-1 md:w-full lg:my-1 lg:px-1 lg:w-1/4 xl:my-1 xl:px-1 xl:w-1/4"
17 |                         key={`${title}${subtitle}${label}${link}`}>
18 |                         <TalkCard title={title} subtitle={subtitle} label={label} link={link} />
19 |                     </div>
20 |                 ))}
21 |             </div>
22 |         </div>
23 |     );
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/recent-card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function RecentTalkCard({ title, subtitle, label, link, date }) {
 4 |     return (
 5 |         <div>
 6 |             <a href={link} target="_blank" rel="noreferrer">
 7 |                 <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
 8 |                     <div className="px-6 py-4">
 9 |                         <div className="font-bold text-xl mb-2">{title}</div>
10 |                         <p className="text-grey-darker text-base">{subtitle}</p>
11 |                     </div>
12 |                     <div className="px-6 py-4">
13 |                         <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">
14 |                             {label}
15 |                         </span>
16 |                     </div>
17 |                     <div className="px-6 py-4">
18 |                         <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">
19 |                             {date}
20 |                         </span>
21 |                     </div>
22 |                 </div>
23 |             </a>
24 |         </div>
25 |     );
26 | }
27 | 


--------------------------------------------------------------------------------
/pages/projects.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ProjectCard from '../src/components/project-card';
 3 | import { projects } from '../src/data/project-data';
 4 | 
 5 | export default function Projects() {
 6 |     return (
 7 |         <div>
 8 |             <div className="w-56">
 9 |                 <h1 className="font-black text-2xl underline--magical">personal projects</h1>
10 |             </div>
11 |             <div className="flex flex-wrap -mx-1 overflow-hidden sm:-mx-1 md:-mx-1 lg:-mx-1 xl:-mx-1">
12 |                 {projects.map(({ img, title, subtitle, label, link }) => (
13 |                     <div
14 |                         className="my-1 px-1 w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-1 md:px-1 md:w-full lg:my-1 lg:px-1 lg:w-1/4 xl:my-1 xl:px-1 xl:w-1/4"
15 |                         key={`${img}${title}${subtitle}${label}${link}`}>
16 |                         <ProjectCard
17 |                             img={img}
18 |                             title={title}
19 |                             subtitle={subtitle}
20 |                             label={label}
21 |                             link={link}
22 |                         />
23 |                     </div>
24 |                 ))}
25 |             </div>
26 |         </div>
27 |     );
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document';
 2 | 
 3 | class MyDocument extends Document {
 4 |     static async getInitialProps(ctx) {
 5 |         const initialProps = await Document.getInitialProps(ctx);
 6 |         return { ...initialProps };
 7 |     }
 8 | 
 9 |     render() {
10 |         return (
11 |             <Html>
12 |                 <Head>
13 |                     <title>Vaishnavi Dwivedi</title>
14 |                     <meta
15 |                         key="og:image"
16 |                         name="og:image"
17 |                         content="https://i.imgur.com/NMVIzOW.png"
18 |                     />
19 |                     <meta property="og:title" content="Vaishnavi Dwivedi" />
20 |                     <link rel="preconnect" href="https://fonts.gstatic.com" />
21 |                     <link
22 |                         href="https://fonts.googleapis.com/css2?family=Questrial:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
23 |                         rel="stylesheet"></link>
24 |                 </Head>
25 |                 <body>
26 |                     <Main />
27 |                     <NextScript />
28 |                 </body>
29 |             </Html>
30 |         );
31 |     }
32 | }
33 | 
34 | export default MyDocument;
35 | 


--------------------------------------------------------------------------------
/src/components/nav.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | const links = [
 4 |     { href: '/', label: 'home' },
 5 |     { href: '/skills', label: 'skills' },
 6 |     { href: '/projects', label: 'projects' },
 7 |     { href: '/talks', label: 'talks' }
 8 | ];
 9 | 
10 | export default function Nav() {
11 |     return (
12 |         <nav>
13 |             <ul className="flex items-center justify-between p-8">
14 |                 <li>
15 |                     <Link href="/">
16 |                         <a className="text-black no-underline text-accent-1 text-xl font-bold dark:text-black ">
17 |                             <p className="px-4 py-2 text-black font-bold underline-magical">
18 |                                 dwvicy
19 |                             </p>
20 |                         </a>
21 |                     </Link>
22 |                 </li>
23 |                 <div className="text-black border border-black shadow-lg">
24 |                     <ul className="px-4 py-2 flex flex-col items-center justify-between md:space-x-4 md:flex-row ">
25 |                         {links.map(({ href, label }) => (
26 |                             <li className="text-center text-lg" key={`${href}${label}`}>
27 |                                 <Link href={href}>{label}</Link>
28 |                             </li>
29 |                         ))}
30 |                     </ul>
31 |                 </div>
32 |             </ul>
33 |         </nav>
34 |     );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/foot.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function Foot() {
 4 |     return (
 5 |         <footer className="flex flex-row w-full text-center border-t border-grey p-4 justify-center">
 6 |             <div className=" h-6 w-6">
 7 |                 <svg
 8 |                     xmlns="http://www.w3.org/2000/svg"
 9 |                     fill="none"
10 |                     viewBox="0 0 24 24"
11 |                     stroke="green">
12 |                     <path
13 |                         strokeLinecap="round"
14 |                         strokeLinejoin="round"
15 |                         strokeWidth={2}
16 |                         d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
17 |                     />
18 |                 </svg>
19 |             </div>
20 |             <h1 className="px-1">with</h1>
21 |             <div className="h-6 w-6">
22 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="red">
23 |                     <path
24 |                         fillRule="evenodd"
25 |                         d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
26 |                         clipRule="evenodd"
27 |                     />
28 |                 </svg>
29 |             </div>
30 |             <h1 className="px-1">by</h1>
31 |             <a target="blank" href="https://linkedin.com/in/dwvicy">
32 |                 dwvicy
33 |             </a>
34 |         </footer>
35 |     );
36 | }
37 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true, // Make sure eslint picks up the config at the root of the directory
 3 |     parserOptions: {
 4 |         ecmaVersion: 2020, // Use the latest ecmascript standard
 5 |         sourceType: 'module', // Allows using import/export statements
 6 |         ecmaFeatures: {
 7 |             jsx: true // Enable JSX since we're using React
 8 |         }
 9 |     },
10 |     settings: {
11 |         react: {
12 |             version: 'detect' // Automatically detect the react version
13 |         }
14 |     },
15 |     env: {
16 |         browser: true, // Enables browser globals like window and document
17 |         amd: true, // Enables require() and define() as global variables as per the amd spec.
18 |         node: true // Enables Node.js global variables and Node.js scoping.
19 |     },
20 |     extends: [
21 |         'eslint:recommended',
22 |         'plugin:react/recommended',
23 |         'plugin:jsx-a11y/recommended',
24 |         'plugin:prettier/recommended'
25 |         // Make this the last element so prettier config overrides other formatting rules
26 |     ],
27 | 
28 |     rules: {
29 |         'react/prop-types': 'off',
30 |         'react/react-in-jsx-scope': 'off',
31 |         'jsx-a11y/anchor-is-valid': [
32 |             'error',
33 |             {
34 |                 components: ['Link'],
35 |                 specialLink: ['hrefLeft', 'hrefRight'],
36 |                 aspects: ['invalidHref', 'preferButton']
37 |             }
38 |         ]
39 |     }
40 | };
41 | 


--------------------------------------------------------------------------------
/pages/skills.js:
--------------------------------------------------------------------------------
 1 | // import React from 'react';
 2 | 
 3 | // export default function Skills() {
 4 | //     return (
 5 | //         <div className="flex flex-col min-h-screen">
 6 | //             <h1>Skills</h1>
 7 | //             <p>Work in progress</p>
 8 | //             {/* <TabsRender /> */}
 9 | //         </div>
10 | //     );
11 | // }
12 | 
13 | import React from 'react';
14 | import Image from 'next/image';
15 | import skills from '../src/data/skills-data';
16 | export default function Skills() {
17 |     return (
18 |         <div>
19 |             <div>
20 |                 <h1 className="font-black text-2xl underline--magical w-20">skills</h1>
21 |                 <p> still a work in progress but working on adding more skills soon </p>
22 |                 <br></br>
23 |             </div>
24 |             <div className="my-24 grid mx-5 sm:mx-10 grid-col-1 grid-rows-16 sm:grid-flow-col sm:grid-cols-5 sm:grid-rows-5  gap-5">
25 |                 {skills.map(({ logo, name }) => (
26 |                     <div key={`${logo}${name}`}>
27 |                         <div className="inline-flex flex-row space-x-1">
28 |                             <Image
29 |                                 className="  px-1"
30 |                                 src={logo}
31 |                                 alt=""
32 |                                 width="25%"
33 |                                 height="19%"
34 |                                 layout=""
35 |                             />
36 |                             <p>{name}</p>
37 |                         </div>
38 |                     </div>
39 |                 ))}
40 |             </div>
41 |         </div>
42 |     );
43 | }
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "poppity",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "eslint --fix .",
10 |     "build:css": "postcss styles/tailwind.css -o styles/main.css",
11 |     "build:watch": "postcss styles/tailwind.css -o styles/main.css --watch",
12 |     "prod:build": "NODE_ENV=production npm run build:css && npm run build",
13 |     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
14 |   },
15 |   "dependencies": {
16 |     "@tailwindcss/forms": "^0.2.1",
17 |     "@tailwindcss/typography": "^0.4.0",
18 |     "autoprefixer": "^10.2.4",
19 |     "cssnano": "^4.1.10",
20 |     "next": "10.0.6",
21 |     "postcss-flexbugs-fixes": "^5.0.2",
22 |     "postcss-load-config": "^3.0.0",
23 |     "postcss-nesting": "^7.0.1",
24 |     "postcss-preset-env": "^6.7.0",
25 |     "react": "17.0.1",
26 |     "react-dom": "17.0.1",
27 |     "sass": "^1.32.6",
28 |     "tailwindcss": "^2.0.2"
29 |   },
30 |   "devDependencies": {
31 |     "eslint": "^7.19.0",
32 |     "eslint-config-airbnb": "^18.2.1",
33 |     "eslint-config-prettier": "^7.2.0",
34 |     "eslint-plugin-jsx-a11y": "^6.4.1",
35 |     "eslint-plugin-prettier": "^3.3.1",
36 |     "eslint-plugin-react": "^7.22.0",
37 |     "eslint-plugin-react-hooks": "^4.2.0",
38 |     "eslint-plugin-simple-import-sort": "^7.0.0",
39 |     "husky": "^4.3.8",
40 |     "lint-staged": "^10.5.3",
41 |     "postcss": "^8.2.4",
42 |     "postcss-cli": "^8.3.1",
43 |     "prettier": "^2.2.1",
44 |     "undefined": " "
45 |   },
46 |   "husky": {
47 |     "hooks": {
48 |       "pre-commit": "lint-staged"
49 |     }
50 |   },
51 |   "lint-staged": {
52 |     "./**/*.{js,jsx,ts,tsx}": [
53 |       "eslint --fix"
54 |     ]
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/data/skills-data.js:
--------------------------------------------------------------------------------
 1 | const skills = [
 2 |     {
 3 |         name: 'Flutter',
 4 |         percent: 98,
 5 |         logo: 'https://i.imgur.com/t9qP4pO.png'
 6 |     },
 7 |     {
 8 |         name: 'JavaScipt',
 9 |         percent: 98,
10 |         logo: 'https://i.imgur.com/M7g6J8l.png '
11 |     },
12 |     {
13 |         name: 'Python',
14 |         percent: 98,
15 |         logo: 'https://i.imgur.com/gnK58k4.png'
16 |     },
17 |     {
18 |         name: 'React',
19 |         percent: 93,
20 |         logo: 'https://i.imgur.com/clwEy83.png '
21 |     },
22 |     {
23 |         name: 'Keras',
24 |         percent: 97,
25 |         logo: 'https://i.imgur.com/lXJTXTM.png'
26 |     },
27 |     {
28 |         name: 'GraphQL',
29 |         percent: 79,
30 |         logo: 'https://i.imgur.com/K9QhQo1.png'
31 |     },
32 |     {
33 |         name: 'PyTorch',
34 |         percent: 95,
35 |         logo: 'https://i.imgur.com/jITS8FU.png'
36 |     },
37 |     {
38 |         name: 'TypeScript',
39 |         percent: 80,
40 |         logo: 'https://i.imgur.com/FyjNoMz.png '
41 |     },
42 | 
43 |     {
44 |         name: 'Node',
45 |         percent: 89,
46 |         logo: 'https://i.imgur.com/HAUhZ5J.png'
47 |     },
48 |     {
49 |         name: 'Database',
50 |         percent: 89,
51 |         logo: 'https://i.imgur.com/OH4Wg9Z.png '
52 |     },
53 |     {
54 |         name: 'Next.js',
55 |         percent: 98,
56 |         logo: 'https://i.imgur.com/XMBoUIo.png'
57 |     },
58 | 
59 |     {
60 |         name: 'SkLearn',
61 |         percent: 72,
62 |         logo: 'https://i.imgur.com/OEpL2Kn.png'
63 |     },
64 |     {
65 |         name: 'TailwindCSS',
66 |         percent: 78,
67 |         logo: 'https://i.imgur.com/Gw0871P.png'
68 |     },
69 |     {
70 |         name: 'TensorFlow',
71 |         percent: 97,
72 |         logo: 'https://i.imgur.com/qek0Wu5.png '
73 |     }
74 | ];
75 | 
76 | export default skills;
77 | 


--------------------------------------------------------------------------------
/src/data/recent-talk.js:
--------------------------------------------------------------------------------
 1 | const recenttalks = [
 2 |     {
 3 |         img: 'https://i.imgur.com/0Ay7sqG.png',
 4 |         title: 'explore ml workshop',
 5 |         subtitle:
 6 |             'a two-day workshop where learners understood the basics of machine learning and learnt about applications that leverage the power of neural networks',
 7 |         label: 'workshop • machine learning • gdsc',
 8 |         link: 'https://www.youtube.com/playlist?list=PLxVLk0sr7UMyX1pMcuUtep4GdmdoR48HF',
 9 |         date: '2017-09-01'
10 |     },
11 |     {
12 |         img: 'https://i.imgur.com/0Ay7sqG.png',
13 |         title: 'canva workshop by gs impact makers',
14 |         subtitle:
15 |             'conducted a 2 hour workshop for learners to grasp basic design concepts to build impactful graphics. ',
16 |         label: 'workshop • design • women-in-tech ',
17 |         link: 'https://drive.google.com/file/d/1RzAGHVfRiaqsH0bJ1mVm8gMayy9J3RRl/view',
18 |         date: '2017-09-01'
19 |     },
20 |     {
21 |         img: 'https://i.imgur.com/0Ay7sqG.png',
22 |         title: 'open-source workshop by gs impact makers',
23 |         subtitle:
24 |             'a workshop on how to start contributing to opensource by leveraging GitHub functionalities. ',
25 |         label: 'workshop • opensource • women-in-tech ',
26 |         link: 'https://drive.google.com/file/d/1RzAGHVfRiaqsH0bJ1mVm8gMayy9J3RRl/view',
27 |         date: '2017-09-01'
28 |     },
29 |     {
30 |         img: 'https://i.imgur.com/0Ay7sqG.png',
31 | 
32 |         title: 'android study jam',
33 |         subtitle:
34 |             'a two part workshop on the fundamentals of kotlin and native android programming, followed by a session on how to apply for internships as a mobile application developer.',
35 |         label: 'workshop • android • gdsc',
36 |         link: 'https://www.youtube.com/playlist?list=PLxVLk0sr7UMzcymjUqy1AaMD_KLgKMvnI',
37 |         date: '2017-09-01'
38 |     }
39 | ];
40 | 
41 | export default recenttalks;
42 | 


--------------------------------------------------------------------------------
/src/data/project-data.js:
--------------------------------------------------------------------------------
 1 | export const projects = [
 2 |     {
 3 |         img: 'https://i.imgur.com/0Ay7sqG.png',
 4 |         title: 'Escasuma',
 5 |         subtitle: 'a buzzfeed meme quiz to select picks from myntra according to your personality',
 6 |         label: 'react  • search-params',
 7 |         link: 'https://github.com/dwvicy/escasuma'
 8 |     },
 9 |     {
10 |         img: 'https://i.imgur.com/vAIdzpI.jpg?1',
11 |         title: 'cognitionAD',
12 |         subtitle: "an app for early detection of Alzheimer's disease",
13 |         label: 'flutter • firebase',
14 |         link: 'https://github.com/dwvicy/cognitionAD'
15 |     },
16 |     {
17 |         img: 'https://i.imgur.com/Yx9CTjG.png',
18 |         title: 'niyamo',
19 |         subtitle: 'an app to overcome imposter syndrome',
20 |         label: 'flutter • firebase',
21 |         link: 'https://github.com/dwvicy/niyamo'
22 |     },
23 | 
24 |     {
25 |         img: 'https://i.imgur.com/qSxz5sq.jpg',
26 |         title: 'aereor',
27 |         subtitle: 'a sustainability tracker for responsible global citizens',
28 |         label: 'flutter • next.js • tailwindcss • graphql • mongodb',
29 |         link: 'https://github.com/dwvicy/aereor'
30 |     },
31 |     {
32 |         img: 'https://i.imgur.com/4IHOCRG.png',
33 |         title: 'fruti',
34 |         subtitle: 'an app for local farmers to sell their commodities directly to people',
35 |         label: 'flutter • nodejs • mongodb',
36 |         link: 'https://github.com/dwvicy/fruti'
37 |     },
38 |     {
39 |         img: 'https://i.imgur.com/AeqIkvA.png',
40 |         title: 'poppity',
41 |         subtitle: 'a modern personal portfolio website',
42 |         label: 'next.js • tailwindcss',
43 |         link: 'https://github.com/dwvicy/poppity'
44 |     },
45 | 
46 |     {
47 |         img: 'https://i.imgur.com/h2ZqKMW.png?1',
48 |         title: 'PCOSmopolitan',
49 |         subtitle: 'an ML powered test to detect potential PCOS patients',
50 |         label: 'html  • css  • js  • flask • scikit-learn',
51 |         link: 'https://github.com/dwvicy/PCOSmopolitan'
52 |     }
53 | ];
54 | 


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .colz {
  2 |     display: flex;
  3 |     flex-direction: column;
  4 | }
  5 | 
  6 | .containerz {
  7 |     min-height: 100vh;
  8 |     padding: 0 0.5rem;
  9 |     display: flex;
 10 |     flex-direction: column;
 11 |     justify-content: center;
 12 |     align-items: center;
 13 | }
 14 | 
 15 | .main {
 16 |     padding: 5rem 0;
 17 |     flex: 1;
 18 |     display: flex;
 19 |     flex-direction: column;
 20 |     justify-content: center;
 21 |     align-items: center;
 22 | }
 23 | 
 24 | .footer {
 25 |     width: 100%;
 26 |     height: 100px;
 27 |     border-top: 1px solid #eaeaea;
 28 |     display: flex;
 29 |     justify-content: center;
 30 |     align-items: center;
 31 | }
 32 | 
 33 | .footer img {
 34 |     margin-left: 0.5rem;
 35 | }
 36 | 
 37 | .footer a {
 38 |     display: flex;
 39 |     justify-content: center;
 40 |     align-items: center;
 41 | }
 42 | 
 43 | .title a {
 44 |     color: #0070f3;
 45 |     text-decoration: none;
 46 | }
 47 | 
 48 | .title a:hover,
 49 | .title a:focus,
 50 | .title a:active {
 51 |     text-decoration: underline;
 52 | }
 53 | 
 54 | .title {
 55 |     margin: 0;
 56 |     line-height: 1.15;
 57 |     font-size: 4rem;
 58 | }
 59 | 
 60 | .title,
 61 | .description {
 62 |     text-align: center;
 63 | }
 64 | 
 65 | .description {
 66 |     line-height: 1.5;
 67 |     font-size: 1.5rem;
 68 | }
 69 | 
 70 | .code {
 71 |     background: #fafafa;
 72 |     border-radius: 5px;
 73 |     padding: 0.75rem;
 74 |     font-size: 1.1rem;
 75 |     font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 76 |         Bitstream Vera Sans Mono, Courier New, monospace;
 77 | }
 78 | 
 79 | .grid {
 80 |     display: flex;
 81 |     align-items: center;
 82 |     justify-content: center;
 83 |     flex-wrap: wrap;
 84 |     max-width: 800px;
 85 |     margin-top: 3rem;
 86 | }
 87 | 
 88 | .card {
 89 |     margin: 1rem;
 90 |     flex-basis: 45%;
 91 |     padding: 1.5rem;
 92 |     text-align: left;
 93 |     color: inherit;
 94 |     text-decoration: none;
 95 |     border: 1px solid #eaeaea;
 96 |     border-radius: 10px;
 97 |     transition: color 0.15s ease, border-color 0.15s ease;
 98 | }
 99 | 
100 | .card:hover,
101 | .card:focus,
102 | .card:active {
103 |     color: #0070f3;
104 |     border-color: #0070f3;
105 | }
106 | 
107 | .card h3 {
108 |     margin: 0 0 1rem 0;
109 |     font-size: 1.5rem;
110 | }
111 | 
112 | .card p {
113 |     margin: 0;
114 |     font-size: 1.25rem;
115 |     line-height: 1.5;
116 | }
117 | 
118 | .logo {
119 |     height: 1em;
120 | }
121 | 
122 | @media (max-width: 600px) {
123 |     .grid {
124 |         width: 100%;
125 |         flex-direction: column;
126 |     }
127 | }
128 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     purge: ['./src/**/*.js'],
 3 |     theme: {
 4 |         container: {
 5 |             center: true
 6 |         },
 7 |         // good to know: add default line height https://tailwindcss.com/docs/font-size#app
 8 |         extend: {
 9 |             colors: {
10 |                 // custom light-gray tones
11 |                 geist: {
12 |                     50: '#fafafa',
13 |                     100: '#eaeaea'
14 |                 },
15 |                 // custom dark scheme
16 |                 dark: {
17 |                     1100: '#212121',
18 |                     1000: '#2B2B2B',
19 |                     900: '#404040',
20 |                     800: '#4D4D4D',
21 |                     700: '#5e5e5e',
22 |                     600: '#676767',
23 |                     500: '#a6a6a6',
24 |                     400: '#CFCFCF',
25 |                     300: '#D9D9D9',
26 |                     200: '#ebebeb',
27 |                     100: '#FFFFFF'
28 |                 }
29 |             },
30 |             typography: (theme) => ({
31 |                 default: {
32 |                     css: {
33 |                         color: theme('colors.gray.700'),
34 |                         h2: {
35 |                             fontWeight: '700',
36 |                             letterSpacing: theme('letterSpacing.tight'),
37 |                             color: theme('colors.gray.900')
38 |                         },
39 |                         h3: {
40 |                             fontWeight: '600',
41 |                             color: theme('colors.gray.900')
42 |                         },
43 |                         'ol li:before': {
44 |                             fontWeight: '600',
45 |                             color: theme('colors.gray.500')
46 |                         },
47 |                         'ul li:before': {
48 |                             backgroundColor: theme('colors.gray.400')
49 |                         },
50 |                         code: {
51 |                             color: theme('colors.gray.900')
52 |                         },
53 |                         a: {
54 |                             color: theme('colors.gray.900')
55 |                         },
56 |                         pre: {
57 |                             color: theme('colors.gray.200'),
58 |                             backgroundColor: theme('colors.gray.800')
59 |                         },
60 |                         blockquote: {
61 |                             color: theme('colors.gray.900'),
62 |                             borderLeftColor: theme('colors.gray.200')
63 |                         }
64 |                     }
65 |                 }
66 |             })
67 |         }
68 |     },
69 |     variants: {
70 |         opacity: ['responsive', 'hover', 'focus', 'disabled'],
71 |         cursor: ['responsive', 'hover', 'focus', 'disabled'],
72 |         backgroundColor: ['responsive', 'hover', 'focus', 'active', 'group-hover', 'odd', 'even']
73 |     },
74 |     // eslint-disable-next-line global-require
75 |     plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')]
76 | };
77 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | import Foot from '../src/components/foot';
 3 | import Landing from '../src/components/landing';
 4 | import socials from '../src/data/socials';
 5 | import Image from 'next/image';
 6 | 
 7 | export default function Home() {
 8 |     return (
 9 |         <div>
10 |             <Head>
11 |                 <title>Vaishnavi Dwivedi</title>
12 |                 <meta name="title" content="Vaishnavi Dwivedi" />
13 |                 <meta
14 |                     name="description"
15 |                     content="Product Strategy and Design | Full Stack Developer | Deep Learning"
16 |                 />
17 | 
18 |                 <meta property="og:type" content="website" />
19 |                 <meta property="og:url" content="https://dwvicy.ml" />
20 |                 <meta property="og:title" content="Vaishnavi Dwivedi" />
21 |                 <meta
22 |                     property="og:description"
23 |                     content="Product Strategy and Design | Full Stack Developer | Deep Learning"
24 |                 />
25 |                 <meta property="og:image" content="https://i.imgur.com/NMVIzOW.png" />
26 | 
27 |                 <meta property="twitter:card" content="summary_large_image" />
28 |                 <meta property="twitter:url" content="https://dwvicy.ml" />
29 |                 <meta property="twitter:title" content="Vaishnavi Dwivedi" />
30 |                 <meta
31 |                     property="twitter:description"
32 |                     content="Product Strategy and Design | Full Stack Developer | Deep Learning"
33 |                 />
34 |                 <meta property="twitter:image" content="https://i.imgur.com/NMVIzOW.png" />
35 |             </Head>
36 |             <div className="flex flex-col sm:flex-row justify-center">
37 |                 <div className="m-auto sm:m-10 w-7/12 sm:w-1/4 md:w-1/4 justify-center">
38 |                     <Image
39 |                         src="https://i.imgur.com/NMVIzOW.png"
40 |                         alt="..."
41 |                         width="100%"
42 |                         height="100%"
43 |                         layout="responsive"
44 |                         className="rounded-full border-none"
45 |                     />
46 |                 </div>
47 |                 <div className="flex flex-col justify-center m-1 sm:m-7">
48 |                     <h1 className="text-center font-semibold sm:text-left text-xl sm:text-7xl font-light pt-3">
49 |                         Vaishnavi Dwivedi
50 |                     </h1>
51 |                     <br></br>
52 |                     <p className="text-center sm:text-left pb-5 sm:pb-10 text-sm sm:text-xl">
53 |                         Product Strategy | Frontend Developer | Machine Learning
54 |                     </p>
55 |                     <div className="flex flex-row space-x-3 justify-center sm:justify-start w-9/12 sm:w-full m-auto sm:m-0">
56 |                         {socials.map(({ link, logo }) => (
57 |                             <div key={`${link}${logo}`}>
58 |                                 <div className="inline-flex flex-row">
59 |                                     <a href={link} target="_blank" rel="noreferrer">
60 |                                         <div>
61 |                                             <Image
62 |                                                 className=" px-1"
63 |                                                 href={link}
64 |                                                 src={logo}
65 |                                                 alt=""
66 |                                                 height="40%"
67 |                                                 width="40%"
68 |                                                 // layout="responsive"
69 |                                             />
70 |                                         </div>
71 |                                     </a>
72 |                                 </div>
73 |                             </div>
74 |                         ))}
75 |                     </div>
76 |                 </div>
77 |             </div>
78 |             <div className="flex justify-center my-10 sm:my-20 w-auto h-8 animate-bounce">
79 |                 <Image
80 |                     src="/down-arrow.png"
81 |                     alt=""
82 |                     className=""
83 |                     layout="fill"
84 |                     objectFit="contain"
85 |                 />
86 |             </div>
87 | 
88 |             <section className="my-10">
89 |                 <Landing />
90 |             </section>
91 |             <Foot />
92 |         </div>
93 |     );
94 | }
95 | 


--------------------------------------------------------------------------------
/src/components/tab.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | // import ProjectCard from './project-card';
 3 | 
 4 | const Tabs = ({ color }) => {
 5 |     const [openTab, setOpenTab] = React.useState(1);
 6 |     return (
 7 |         <>
 8 |             <div className="flex flex-wrap">
 9 |                 <div className="w-full">
10 |                     <ul className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row" role="tablist">
11 |                         <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
12 |                             <a
13 |                                 className={
14 |                                     'text-xl   px-5 py-3 shadow-lg rounded block leading-normal ' +
15 |                                     (openTab === 1
16 |                                         ? 'text-white bg-' + color + '-600'
17 |                                         : 'text-' + color + '-600 bg-white')
18 |                                 }
19 |                                 onClick={(e) => {
20 |                                     e.preventDefault();
21 |                                     setOpenTab(1);
22 |                                 }}
23 |                                 data-toggle="tab"
24 |                                 href="#link1"
25 |                                 role="tablist">
26 |                                 <i className="fas fa-space-shuttle text-base mr-1"></i> technical
27 |                             </a>
28 |                         </li>
29 |                         <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
30 |                             <a
31 |                                 className={
32 |                                     'text-xl   px-5 py-3 shadow-lg rounded block leading-normal ' +
33 |                                     (openTab === 2
34 |                                         ? 'text-white bg-' + color + '-600'
35 |                                         : 'text-' + color + '-600 bg-white')
36 |                                 }
37 |                                 onClick={(e) => {
38 |                                     e.preventDefault();
39 |                                     setOpenTab(2);
40 |                                 }}
41 |                                 data-toggle="tab"
42 |                                 href="#link2"
43 |                                 role="tablist">
44 |                                 <i className="fas fa-cog text-base mr-1"></i> non-technical
45 |                             </a>
46 |                         </li>
47 |                         <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
48 |                             <a
49 |                                 className={
50 |                                     'text-xl   px-5 py-3 shadow-lg rounded block leading-normal ' +
51 |                                     (openTab === 3
52 |                                         ? 'text-white bg-' + color + '-600'
53 |                                         : 'text-' + color + '-600 bg-white')
54 |                                 }
55 |                                 onClick={(e) => {
56 |                                     e.preventDefault();
57 |                                     setOpenTab(3);
58 |                                 }}
59 |                                 data-toggle="tab"
60 |                                 href="#link3"
61 |                                 role="tablist">
62 |                                 <i className="fas fa-briefcase text-base mr-1"></i> misc
63 |                             </a>
64 |                         </li>
65 |                     </ul>
66 |                     <div className="relative flex flex-col min-w-0 break-words bg-purple-200 w-full mb-6 shadow-lg rounded">
67 |                         <div className="px-4 py-5 flex-auto">
68 |                             <div className="tab-content tab-space ">
69 |                                 <div className={openTab === 1 ? 'block' : 'hidden'} id="link1">
70 |                                     <p>work in progress</p>
71 |                                 </div>
72 |                                 <div className={openTab === 2 ? 'block' : 'hidden'} id="link2">
73 |                                     <p>work in progress</p>
74 |                                 </div>
75 |                                 <div className={openTab === 3 ? 'block' : 'hidden'} id="link3">
76 |                                     <p>work in progress</p>
77 |                                 </div>
78 |                             </div>
79 |                         </div>
80 |                     </div>
81 |                 </div>
82 |             </div>
83 |         </>
84 |     );
85 | };
86 | 
87 | export default function TabsRender() {
88 |     return (
89 |         <>
90 |             <Tabs color="purple" />
91 |         </>
92 |     );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/data/talks-data.js:
--------------------------------------------------------------------------------
  1 | const talks = [
  2 |     {
  3 |         title: 'explore ml workshop',
  4 |         subtitle:
  5 |             'a two-day workshop where learners understood the basics of machine learning and learnt about applications that leverage the power of neural networks',
  6 |         label: 'workshop • machine learning • gdsc',
  7 |         link: 'https://www.youtube.com/playlist?list=PLxVLk0sr7UMyX1pMcuUtep4GdmdoR48HF'
  8 |     },
  9 |     {
 10 |         title: 'canva workshop by gs impact makers',
 11 |         subtitle:
 12 |             'conducted a 2 hour workshop for learners to grasp basic design concepts to build impactful graphics. ',
 13 |         label: 'workshop • design • women-in-tech ',
 14 |         link: 'https://drive.google.com/file/d/1RzAGHVfRiaqsH0bJ1mVm8gMayy9J3RRl/view'
 15 |     },
 16 |     {
 17 |         title: 'open-source workshop by gs impact makers',
 18 |         subtitle:
 19 |             'a workshop on how to start contributing to opensource by leveraging GitHub functionalities. ',
 20 |         label: 'workshop • opensource • women-in-tech ',
 21 |         link: 'https://drive.google.com/file/d/1RzAGHVfRiaqsH0bJ1mVm8gMayy9J3RRl/view'
 22 |     },
 23 |     {
 24 |         title: 'android study jam',
 25 |         subtitle:
 26 |             'a two part workshop on the fundamentals of kotlin and native android programming, followed by a session on how to apply for internships as a mobile application developer.',
 27 |         label: 'workshop • android • gdsc',
 28 |         link: 'https://www.youtube.com/playlist?list=PLxVLk0sr7UMzcymjUqy1AaMD_KLgKMvnI'
 29 |     },
 30 |     {
 31 |         title: 'from `git init` to open-source',
 32 |         subtitle:
 33 |             'hosted a fireside chat session with GSoCers Neil Agarwal and Somesh Koli, where they shared their experience applying and participating in the program.',
 34 |         label: 'host • open-source • gdsc',
 35 |         link: 'https://www.youtube.com/watch?v=qrZUdCeyzeA&t=63s'
 36 |     },
 37 |     {
 38 |         title: 'collaborate like a software engineer',
 39 |         subtitle: 'a 1-hour git/github workshop for absolute beginners',
 40 |         label: 'workshop • open-source • gdsc',
 41 |         link: 'https://www.youtube.com/watch?v=lKaKHEIhp2Q&t=2s'
 42 |     },
 43 |     {
 44 |         title: 'freshers connect',
 45 |         subtitle:
 46 |             'a workshop for first/second year students who are looking to build their personal brand',
 47 |         label: 'workshop • personal branding',
 48 |         link: 'https://youtu.be/adtii8eVG0k?t=2206'
 49 |     },
 50 |     {
 51 |         title: 'managing work life balance: by googlers',
 52 |         subtitle:
 53 |             'hosted a fireside chat with siddhant agarwal and nikita gandhi who work in the Google India DevRel team on having a work life balance.',
 54 |         label: 'host • expert-talk • gdsc ',
 55 |         link: 'https://youtu.be/-JucksrX_s8?t=280'
 56 |     },
 57 |     {
 58 |         title: 'intro to google coding competitions',
 59 |         subtitle:
 60 |             'hosted a global gdsc event along with 9 other gdsc leads from across the globe. our speakers, Shad Roi de la Cruz and Maya George Puthuparampil, introduced our audience to the world of coding competitions by Google. We talked about: Hashcode, Kickstart, Code Jam and the Solution Challenge.',
 61 |         label: 'workshop • collaboration • gdsc',
 62 |         link: ''
 63 |     },
 64 |     {
 65 |         title: 'using google design thinking methodologies',
 66 |         subtitle:
 67 |             'conducted a workshop on design thinking methodologies used by google as a part of ideathon - an event organized by GDSC PSB Academy, Singapore',
 68 |         label: 'workshop • design • product • gdsc',
 69 |         link: 'https://youtu.be/ijJ1-I1hyqg?t=2631'
 70 |     },
 71 |     {
 72 |         title: 'exploring data analysis',
 73 |         subtitle:
 74 |             'conducted a workshop with the GeekZie Club on exploring the domain of data analysis and the job prospects.',
 75 |         label: 'workshop • data analysis',
 76 |         link:
 77 |             'https://www.canva.com/design/DAEbobw3F2U/WXrbxtFwS78s4vm0QzzdGQ/view?utm_content=DAEbobw3F2U&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink'
 78 |     },
 79 |     {
 80 |         title: 'digital marketing strategies',
 81 |         subtitle:
 82 |             'conducted a workshop with the Student Union Council of RAIT on brainstorming strategies for digital marketing.',
 83 |         label: 'workshop • digital marketing',
 84 |         link: 'https://drive.google.com/file/d/1D6HZQtlRKvV2D-UVk7SMSI1PN5SmS1t9/view'
 85 |     },
 86 |     {
 87 |         title: 'how to become a google developer student club lead?',
 88 |         subtitle:
 89 |             'a fireside chat with the CodeXCrypt community to shed some light on the GDSC Lead application process of 2021-22.',
 90 |         label: 'expert-talk • gdsc',
 91 |         link: 'https://youtu.be/pEUzvmqHU6c'
 92 |     },
 93 |     {
 94 |         title: 'explore AI: diving deep into artificial intelligence',
 95 |         subtitle:
 96 |             'conducted a workshop on exploring the field of artificial intelligence for absolute beginners.',
 97 |         label: 'workshop • ai • gdsc',
 98 |         link: 'https://youtu.be/w90Bh29hnOk?t=478'
 99 |     },
100 |     {
101 |         title: 'gdsc leads women-in-tech panel',
102 |         subtitle:
103 |             'We discussed our journey to becoming a DSC Lead, overcoming the challenges we faced, embracing leadership, leveraging the DSC Lead tag to tap into opportunities, importance of personal branding, facing discriminatory comments that relate to opportunities of women in the developer ecosystem and many more inspirational stories!',
104 |         label: 'panel • experiences',
105 |         link: 'https://youtu.be/ALjCFcJcnl8?t=617'
106 |     },
107 |     {
108 |         title: 'women-in-tech expert talk series',
109 |         subtitle:
110 |             'fatima zahra chriha, our guest speaker talks about her journey in tech and how she leveraged diversity opportunities to become a better developer.',
111 |         label: 'panel • experiences',
112 |         link: 'https://youtu.be/YA4EOPmUN6g?t=28'
113 |     }
114 | ];
115 | 
116 | export default talks;
117 | 


--------------------------------------------------------------------------------
/src/components/landing.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import skills from '../data/skills-data';
  3 | import tools from '../data/proficient';
  4 | import Image from 'next/image';
  5 | // import recenttalks from '../data/recent-talk';
  6 | // import RecentTalkCard from './recent-card';
  7 | export default function Landing() {
  8 |     return (
  9 |         <div>
 10 |             <div className="flex flex-col sm:flex-row justify-between">
 11 |                 <div className="container w-11/12 sm:w-2/3 flex flex-col justify-start p-2 sm:p-10">
 12 |                     <h1 className="font-bold text-lg">Summary</h1>
 13 |                     <p>
 14 |                         I&apos;m a versatile person with a lot of experience in the tech community
 15 |                         and working at many startups. I&apos;ve hosted 30+ workshops in the past
 16 |                         year on a variety of topics ranging from machine learning to UI/UX. I like
 17 |                         designing & building products that positively impact the lives of users. I
 18 |                         don&apos;t associate myself with specific tools and technology. They are
 19 |                         merely the means to build. This mindset has helped me be a quick learner and
 20 |                         concentrate more on solving the problem at hand.
 21 |                     </p>
 22 |                     &nbsp;
 23 |                     <h1 className="font-bold text-lg">Tools</h1>
 24 |                     <div className="flex flex-row space-x-1">
 25 |                         {tools.map(({ logo }) => (
 26 |                             <div key={`${logo}`}>
 27 |                                 <div className="inline-flex flex-row ">
 28 |                                     <Image
 29 |                                         className="h-6 w-auto sm:h-12 px-1"
 30 |                                         src={logo}
 31 |                                         alt=""
 32 |                                         width="50%"
 33 |                                         height="50%"
 34 |                                     />
 35 |                                 </div>
 36 |                             </div>
 37 |                         ))}
 38 |                     </div>
 39 |                 </div>
 40 |                 <div className="p-8 sm:p-10">
 41 |                     {' '}
 42 |                     <h1 className="font-bold text-lg">Tech I&apos;ve worked with</h1>
 43 |                     <div className="my-5 grid mx-5 sm:mx-5 grid-col-2 grid-rows-5 sm:grid-flow-col sm:grid-cols-2 sm:grid-rows-7  gap-5 ">
 44 |                         {skills.map(({ logo, name }) => (
 45 |                             <div key={`${logo}${name}`}>
 46 |                                 <div className="inline-flex flex-row space-x-1">
 47 |                                     <Image
 48 |                                         className="  px-1"
 49 |                                         src={logo}
 50 |                                         alt=""
 51 |                                         width="25%"
 52 |                                         height="19%"
 53 |                                         layout=""
 54 |                                     />
 55 |                                     <p>{name}</p>
 56 |                                 </div>
 57 |                             </div>
 58 |                         ))}
 59 |                     </div>
 60 |                 </div>
 61 |             </div>
 62 |             {/* <div className=" w-11/12 sm:w-full flex flex-col justify-start p-2 sm:p-10">
 63 |                 <h1 className="font-bold text-lg">Upcoming Workshops</h1>
 64 |                 <div className="flex flex-wrap -mx-1 overflow-hidden sm:-mx-1 md:-mx-1 lg:-mx-1 xl:-mx-1">
 65 |                     {recenttalks.map(({ title, subtitle, label, link, date }) => (
 66 |                         <div
 67 |                             className="my-1 px-1 w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-1 md:px-1 md:w-full lg:my-1 lg:px-1 lg:w-1/4 xl:my-1 xl:px-1 xl:w-1/4"
 68 |                             key={`${title}${subtitle}${label}${link}${date}`}>
 69 |                             <RecentTalkCard
 70 |                                 title={title}
 71 |                                 subtitle={subtitle}
 72 |                                 label={label}
 73 |                                 link={link}
 74 |                                 date={date}
 75 |                             />
 76 |                         </div>
 77 |                     ))}
 78 |                 </div>
 79 |             </div> */}
 80 |             <div>
 81 |                 <h1 className="font-bold text-lg">Informative Videos</h1>
 82 |                 <div className="flex flex-col sm:flex-row justify-center space-y-1 sm:space-x-5 sm:space-y-0">
 83 |                     <iframe
 84 |                         width="450"
 85 |                         height="315"
 86 |                         src="https://www.youtube.com/embed/fqhLNTkzPJI?start=404"
 87 |                         title="YouTube video player"
 88 |                         frameBorder="0"
 89 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 90 |                         allowFullScreen></iframe>
 91 | 
 92 |                     <iframe
 93 |                         width="450"
 94 |                         height="315"
 95 |                         src="https://www.youtube-nocookie.com/embed/KB0gJ9G_Q-I?start=44"
 96 |                         title="YouTube video player"
 97 |                         frameBorder="0"
 98 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 99 |                         allowFullScreen></iframe>
100 |                     <iframe
101 |                         width="450"
102 |                         height="315"
103 |                         src="https://www.youtube.com/embed/VPZ00MEc5gY?start=184"
104 |                         title="YouTube video player"
105 |                         frameBorder="0"
106 |                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
107 |                         allowFullScreen></iframe>
108 |                 </div>
109 |             </div>
110 |         </div>
111 |     );
112 | }
113 | 


--------------------------------------------------------------------------------