;\r\n }\r\n \r\n\r\n\r\nconst Projects = () => {\r\n\r\n const options = {\r\n speed: 7000,\r\n scale: 2.4,\r\n max: 30,\r\n gyroscope: false, \r\n\r\n }\r\n\r\n const projectName = [\r\n { weblink:\"https://aranavtiwari.github.io/WA/\", gitlink:\"https://github.com/aranavtiwari/WA\", link:\"linkweb\", iconweb:\"fas fa-globe\", nameweb:\"Web App\" ,icongit:\"fab fa-github\",gitname:\"Github Org\" , class:\"float-right\", img:imgone, heading:\"World Affair\", description:`World Affair is Webapp where you can find most underrated news around the world.\\\r\n I designed and developed the frontend with React/Sass from scratch `},\r\n {iconweb:\"fas fa-globe\", nameweb:\"Web App\", weblink:\"https://webpanda.netlify.app/\" ,icongit:\"fab fa-github\", gitname:\"Github Org\", gitlink:\"https://github.com/aranavtiwari/ast-website\",link:\"linkweb\", rolecss:\"role\", role:\"Freelance Frontend\", direction:\"reverse\", class:\"float-left\", img:imgtwo, heading:\"Web Panda\", description:\"Web Panda was a startup which offers web development service to their client with source code.\\\r\n I worked on the landing page and the entire website from scratch. I utilized react-static to generate static pages with instant navigation. I also organized Design Sprints to target specific audiences, started from scratch with UI/UX to develop a unique brand identity for the company. Made personalized icons. illustrations, animations, etc.\" },\r\n {iconweb:\"fas fa-globe\", nameweb:\"Web App\", weblink:\"#\" ,icongit:\"fab fa-github\", gitname:\"Github Org\", gitlink:\"https://github.com/aranavtiwari/Events-MERN\",link:\"linkweb\", class:\"float-right \", img:imgthree, heading:\"Events\", description:\"Events is a platform where you can views other's personal event's or memories, and you can also share your events and memories.You can give like if you like any events.\"},\r\n \r\n ];\r\n\r\n\r\n const projectShow = () => {\r\n return projectName.map((data) => {\r\n console.log(data.img)\r\n return (\r\n
\r\n)\r\n \r\n}\r\n\r\nexport default Projects;\r\n\r\n\r\n\r\n\r\n","C:\\Users\\st788\\Desktop\\final\\src\\components\\Skill.jsx",["49"],"import React, { useEffect, useRef } from \"react\";\r\nimport Nav from './Nav'\r\nimport VanillaTilt from \"vanilla-tilt\";\r\nimport img from '../img/skilllogo.png';\r\nimport pone from '../img/p1.png';\r\nimport ptwo from '../img/p2.png';\r\nimport pthree from '../img/p3.png';\r\nimport pfour from '../img/p4.png';\r\n\r\n\r\nfunction Tilt(props) {\r\n const { options, ...rest } = props;\r\n const tilt = useRef(null);\r\n \r\n useEffect(() => {\r\n VanillaTilt.init(tilt.current, options);\r\n }, [options]);\r\n \r\n return ;\r\n }\r\n \r\n function Skill() {\r\n const options = {\r\n speed: 7000,\r\n scale:2.2,\r\n max: 30,\r\n gyroscope: false,\r\n \r\n };\r\n\r\n const skillName = [\r\n {class:\"float-right\", img:pone, heading:\"UX/UI\", description:\"I design the user experience and then style the user interface myself for almost all of the projects I work on.I am flexible in medium and rigid in quality.\"},\r\n { direction:\"reverse\", class:\"float-left\", img:ptwo, heading:\"Frontend\", description:\" Have experience in React, Next and HTML5/CSS/JS along with several templating systems.I prefer to write my own components, and styles that go with it. I want to have absolute control over all the pixels.\" },\r\n {class:\"float-right\", img:pthree, heading:\"Backend\", description:\"While I obsess over frontend, I also recognize that a lot of the functionality of an app is enabled by it's backend.I have worked with NodeJs,Exprss and MongoDB for backend, with databases, APIs, request handling, etc.\"},\r\n { direction:\"reverse\", class:\"float-left\", img:pfour, heading:\"General Programming\", description:\"Given my curious mindset, I have tested the waters of various fields: Databases, Scripting, Web Scraping, DS, Micro-services, CLI tools to name a few.The core of it all is the basic principle of identifying the problem and testing multiple focused approaches till I figure out the optimum solution.\"}\r\n ];\r\n\r\n const skillShow = () => {\r\n return skillName.map((data) => {\r\n console.log(data.img)\r\n return (\r\n
\r\n I love music, games, book, art and nature\r\n
\r\n
\r\n I prefer to listen and think, watch and learn\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n >\r\n );\r\n}\r\n\r\nexport default Home;\r\n","C:\\Users\\st788\\Desktop\\final\\src\\components\\nav.jsx",[],"C:\\Users\\st788\\Desktop\\final\\src\\components\\Nav.jsx",[],"C:\\Users\\st788\\Desktop\\final\\src\\components\\Random.jsx",["52"],"import React, { useEffect, useRef } from \"react\";\r\nimport Nav from './Nav'\r\nimport imgone from '../img/snakelogo.svg';\r\nimport imgtwo from '../img/tttlogo.svg';\r\nimport imgthree from '../img/templogo.svg';\r\n\r\n\r\nimport VanillaTilt from \"vanilla-tilt\";\r\n\r\nfunction Tilt(props) {\r\n const { options, ...rest } = props;\r\n const tilt = useRef(null);\r\n \r\n useEffect(() => {\r\n VanillaTilt.init(tilt.current, options);\r\n }, [options]);\r\n \r\n return ;\r\n }\r\n \r\n\r\n\r\nconst Random = () => {\r\n\r\n const options = {\r\n speed: 7000,\r\n scale: 2.4,\r\n max: 30,\r\n gyroscope: false, \r\n\r\n }\r\n\r\n const projectName = [\r\n { weblink:\"https://aranavtiwari.github.io/WA/\", gitlink:\"https://github.com/aranavtiwari/Multiplayer-Snake-game\", link:\"linkweb\", iconweb:\"fas fa-globe\", nameweb:\"Web App\" ,icongit:\"fab fa-github\",gitname:\"Github Org\" , class:\"float-right\", img:imgone, heading:\"MPSG\", description:\"MPSG is real time multiplayer snake game where two user can play against each other . I developed the frontend with HTML5/CSS and backend with Socket.io\"},\r\n {iconweb:\"fas fa-globe\", nameweb:\"Web App\", weblink:\"https://github.com/aranavtiwari/AI-tictactoe\" ,icongit:\"fab fa-github\", gitname:\"Github Org\", gitlink:\"https://github.com/aranavtiwari/ast-website\",link:\"linkweb\", rolecss:\"role\", role:\"Minimax\", direction:\"reverse\", class:\"float-left\", img:imgtwo, heading:\"AITT\", description:\"Created AI with Minimax Algorithm in Game Theory where a user can play against a AI.It can be implemented on various game like chess, Tic Tac Toe. I choose Tictactoe \" },\r\n {iconweb:\"fas fa-globe\", nameweb:\"Web App\", weblink:\"#\" ,icongit:\"fab fa-github\", gitname:\"Github Org\", gitlink:\"https://github.com/aranavtiwari?tab=repositories\",link:\"linkweb\", class:\"float-right \", img:imgthree, heading:\"Templates\", description:\"Create various landing page templates, which can be used by various organization. All templated is pure HTML5 and SASS.The focus is on speed and minimalism\"},\r\n \r\n ];\r\n\r\n\r\n const projectShow = () => {\r\n return projectName.map((data) => {\r\n console.log(data.img)\r\n return (\r\n
--------------------------------------------------------------------------------
/src/components/Projects.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from "react";
2 | import Nav from './Nav'
3 | import imgone from '../img/worldaffairlogo.svg';
4 | import imgtwo from '../img/webpandlogo.svg';
5 | import imgthree from '../img/eventlogo.svg';
6 |
7 |
8 | import VanillaTilt from "vanilla-tilt";
9 |
10 | function Tilt(props) {
11 | const { options, ...rest } = props;
12 | const tilt = useRef(null);
13 |
14 | useEffect(() => {
15 | VanillaTilt.init(tilt.current, options);
16 | }, [options]);
17 |
18 | return ;
19 | }
20 |
21 |
22 |
23 | const Projects = () => {
24 |
25 | const options = {
26 | speed: 7000,
27 | scale: 2.4,
28 | max: 30,
29 | gyroscope: false,
30 |
31 | }
32 |
33 | const projectName = [
34 | { weblink:"https://aranavtiwari.github.io/WA/", gitlink:"https://github.com/aranavtiwari/WA", link:"linkweb", iconweb:"fas fa-globe", nameweb:"Web App" ,icongit:"fab fa-github",gitname:"Github Org" , class:"float-right", img:imgone, heading:"World Affair", description:`World Affair is Webapp where you can find most underrated news around the world.\
35 | I designed and developed the frontend with React/Sass from scratch `},
36 | {iconweb:"fas fa-globe", nameweb:"Web App", weblink:"https://webpanda.netlify.app/" ,icongit:"fab fa-github", gitname:"Github Org", gitlink:"https://github.com/aranavtiwari/ast-website",link:"linkweb", rolecss:"role", role:"Freelance Frontend", direction:"reverse", class:"float-left", img:imgtwo, heading:"Web Panda", description:"Web Panda was a startup which offers web development service to their client with source code.\
37 | I worked on the landing page and the entire website from scratch. I utilized react-static to generate static pages with instant navigation. I also organized Design Sprints to target specific audiences, started from scratch with UI/UX to develop a unique brand identity for the company. Made personalized icons. illustrations, animations, etc." },
38 | {iconweb:"fas fa-globe", nameweb:"Web App", weblink:"#" ,icongit:"fab fa-github", gitname:"Github Org", gitlink:"https://github.com/aranavtiwari/Events-MERN",link:"linkweb", class:"float-right ", img:imgthree, heading:"Events", description:"Events is a platform where you can views other's personal event's or memories, and you can also share your events and memories.You can give like if you like any events."},
39 |
40 | ];
41 |
42 |
43 | const projectShow = () => {
44 | return projectName.map((data) => {
45 | console.log(data.img)
46 | return (
47 |
82 | )
83 |
84 | }
85 |
86 | export default Random;
87 |
88 |
--------------------------------------------------------------------------------
/src/components/Resume.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from "react";
2 | import Nav from './Nav'
3 | import img from "../img/resumelogo.png";
4 | import VanillaTilt from "vanilla-tilt";
5 |
6 | function Tilt(props) {
7 | const { options, ...rest } = props;
8 | const tilt = useRef(null);
9 |
10 | useEffect(() => {
11 | VanillaTilt.init(tilt.current, options);
12 | }, [options]);
13 |
14 | return ;
15 | }
16 |
17 |
18 |
19 |
20 |
21 |
22 | const Resume = () => {
23 |
24 | const options = {
25 | speed: 7000,
26 | scale: 1.5,
27 | max: 30,
28 | gyroscope: false,
29 | }
30 |
31 | //const projectName = [
32 | // {class:"float-right", img:pone, heading:"World Affair", description:"I design the user experience and then style the user interface myself for almost all of the projects I work on.I am flexible in medium and rigid in quality."},
33 | //{ direction:"reverse", class:"float-left", img:ptwo, heading:"Web Panda", description:" Have experience in React, Next and HTML5/CSS/JS along with several templating systems.I prefer to write my own components, and styles that go with it. I want to have absolute control over all the pixels." },
34 | // {class:"float-right", img:pthree, heading:"MinmaxTT", description:"While I obsess over frontend, I also recognize that a lot of the functionality of an app is enabled by it's backend.I have worked with NodeJs,Exprss and MongoDB for backend, with databases, APIs, request handling, etc."},
35 | // { direction:"reverse", class:"float-left", img:pfour, heading:"General Programming", description:"Given my curious mindset, I have tested the waters of various fields: Databases, Scripting, Web Scraping, DS, Micro-services, CLI tools to name a few.The core of it all is the basic principle of identifying the problem and testing multiple focused approaches till I figure out the optimum solution."}
36 | //]
37 |
38 |
39 | return (
40 |
57 | )
58 | }
59 |
60 | export default Resume;
61 |
--------------------------------------------------------------------------------
/src/components/Skill.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from "react";
2 | import Nav from './Nav'
3 | import VanillaTilt from "vanilla-tilt";
4 | import img from '../img/skilllogo.png';
5 | import pone from '../img/p1.png';
6 | import ptwo from '../img/p2.png';
7 | import pthree from '../img/p3.png';
8 | import pfour from '../img/p4.png';
9 |
10 |
11 | function Tilt(props) {
12 | const { options, ...rest } = props;
13 | const tilt = useRef(null);
14 |
15 | useEffect(() => {
16 | VanillaTilt.init(tilt.current, options);
17 | }, [options]);
18 |
19 | return ;
20 | }
21 |
22 | function Skill() {
23 | const options = {
24 | speed: 7000,
25 | scale:2.2,
26 | max: 30,
27 | gyroscope: false,
28 |
29 | };
30 |
31 | const skillName = [
32 | {class:"float-right", img:pone, heading:"UX/UI", description:"I design the user experience and then style the user interface myself for almost all of the projects I work on.I am flexible in medium and rigid in quality."},
33 | { direction:"reverse", class:"float-left", img:ptwo, heading:"Frontend", description:" Have experience in React, Next and HTML5/CSS/JS along with several templating systems.I prefer to write my own components, and styles that go with it. I want to have absolute control over all the pixels." },
34 | {class:"float-right", img:pthree, heading:"Backend", description:"While I obsess over frontend, I also recognize that a lot of the functionality of an app is enabled by it's backend.I have worked with NodeJs,Exprss and MongoDB for backend, with databases, APIs, request handling, etc."},
35 | { direction:"reverse", class:"float-left", img:pfour, heading:"General Programming", description:"Given my curious mindset, I have tested the waters of various fields: Databases, Scripting, Web Scraping, DS, Micro-services, CLI tools to name a few.The core of it all is the basic principle of identifying the problem and testing multiple focused approaches till I figure out the optimum solution."}
36 | ];
37 |
38 | const skillShow = () => {
39 | return skillName.map((data) => {
40 | console.log(data.img)
41 | return (
42 |