Skip to content

Commit 109050a

Browse files
vivek9patelvivek9patel
committed
update: converts to NEXT.js
1 parent 245e9d5 commit 109050a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+2147
-11515
lines changed

‎.gitignore

+14-4
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,29 @@
77

88
# testing
99
/coverage
10-
/public/google0a96dbd95c3b1e13.html
10+
11+
# next.js
12+
/.next/
13+
/out/
1114

1215
# production
1316
/build
1417

1518
# misc
1619
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
1728
.env
1829
.env.local
1930
.env.development.local
2031
.env.test.local
2132
.env.production.local
2233

23-
npm-debug.log*
24-
yarn-debug.log*
25-
yarn-error.log*
34+
# vercel
35+
.vercel

‎README.md

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
# Web simulation of UbuntuOS
2-
This is a personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS.
3-
If you want to edit this. Clone this project and edit the files in ```/src/components```.
4-
52

3+
This is a personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS.
4+
If you want to edit this. Clone this project and edit the files in `/src/components`.
65

76
To run this on localhost
8-
type ```npm start``` and when u are done coding type ```npm run build``` to build your app.
9-
10-
*NOTE: if you have yarn just replace ```npm start``` and ```npm run build``` with ```yarn start``` and ```yarn build```.*
7+
type `npm start` and when u are done coding type `npm run build` to build your app.
118

9+
_NOTE: if you have yarn just replace `npm start` and `npm run build` with `yarn start` and `yarn build`._
1210

1311
### To make the contact form work
1412

1513
- Create a account in [emailjs](https://www.emailjs.com/) create also new Outlook or Gmail account to be able
16-
to send email.
14+
to send email.
1715
- Create a new service, select and log in to your newly created outlook or gmail account on EmailJS.
1816
- Go back to the dashboard and get the Service ID copy it.
19-
- Create a .env file in your root folder and put
17+
- Create a .env file in your root folder and put
18+
2019
```
2120
22-
REACT_APP_USER_ID = 'YOUR_USER_ID'
23-
REACT_APP_TEMPLATE_ID = 'template_fqqqb9g'
24-
REACT_APP_SERVICE_ID = 'YOUR_SERVICE_ID'
21+
NEXT_PUBLIC_USER_ID = 'YOUR_USER_ID'
22+
NEXT_PUBLIC_TEMPLATE_ID = 'template_fqqqb9g'
23+
NEXT_PUBLIC_SERVICE_ID = 'YOUR_SERVICE_ID'
2524
2625
```
27-
into it. Replace *your user id and your service ID with your values in your EmailJS service.
28-
2926

27+
into it. Replace \*your user id and your service ID with your values in your EmailJS service.
3028

3129
## This project was made using Create React App! Here is the scripts that u can run.
30+
3231
### `npm start`
3332

3433
Runs the app in the development mode.\

‎src/apps.config.js ‎apps.config.js

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import displayTodoist from './components/apps/todoist';
21
import displaySpotify from './components/apps/spotify';
32
import displayVsCode from './components/apps/vscode';
43
import { displayTerminal } from './components/apps/terminal';
@@ -19,15 +18,6 @@ const apps = [
1918
desktop_shortcut: true,
2019
screen: displayChrome,
2120
},
22-
{
23-
id: "todo-ist",
24-
title: "Todoist",
25-
icon: './themes/Yaru/apps/todoist.png',
26-
disabled: false,
27-
favourite: true,
28-
desktop_shortcut: false,
29-
screen: displayTodoist,
30-
},
3121
{
3222
id: "calc",
3323
title: "Calc",
@@ -93,7 +83,7 @@ const apps = [
9383
},
9484
{
9585
id: "gedit",
96-
title: "Contact",
86+
title: "Contact Me",
9787
icon: './themes/Yaru/apps/gedit.png',
9888
disabled: false,
9989
favourite: false,

‎components/SEO/Meta.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react'
2+
import Head from 'next/head';
3+
4+
export default function Meta() {
5+
return (
6+
<Head>
7+
/* Primary Meta Tags */
8+
<title>Vivek Patel Portfolio - Computer Engineering Student</title>
9+
<meta charSet="utf-8" />
10+
<meta name="title" content="Vivek Patel Portfolio - Computer Engineering Student" />
11+
<meta name="description"
12+
content="Vivek Patel's (vivek9patel) Personal Portfolio Website. Made with Ubuntu 20.4 (Linux) theme by Next.js and Tailwind CSS." />
13+
<meta name="author" content="Vivek Patel (vivek9patel)" />
14+
<meta name="keywords"
15+
content="vivek9patel, vivek9patel's portfolio, vivek9patel linux, ubuntu portfolio, vivek patel protfolio,vivek patel computer, vivek patel, vivek ubuntu, vivek patel ubuntu portfolio" />
16+
<meta name="robots" content="index, follow" />
17+
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
18+
<meta name="language" content="English" />
19+
<meta name="viewport" content="width=device-width, initial-scale=1" />
20+
<meta name="theme-color" content="#E95420" />
21+
22+
/* Search Engine */
23+
<meta name="image" content="images/logos/fevicon.png" />
24+
/* Schema.org for Google */
25+
<meta itemProp="name" content="Vivek Patel Portfolio - Computer Engineering Student" />
26+
<meta itemProp="description"
27+
content="Vivek Patel's (vivek9patel) Personal Portfolio Website. Made with Ubuntu 20.4 (Linux) theme by Next.js and Tailwind CSS." />
28+
<meta itemProp="image" content="images/logos/fevicon.png" />
29+
/* Twitter */
30+
<meta name="twitter:card" content="summary" />
31+
<meta name="twitter:title" content="Vivek Patel Portfolio - Computer Engineering Student" />
32+
<meta name="twitter:description"
33+
content="Vivek Patel's (vivek9patel) Personal Portfolio Website. Made with Ubuntu 20.4 (Linux) theme by Next.js and Tailwind CSS." />
34+
<meta name="twitter:site" content="vivek9patel" />
35+
<meta name="twitter:creator" content="vivek9patel" />
36+
<meta name="twitter:image:src" content="images/logos/logo_1024.png" />
37+
/* Open Graph general (Facebook, Pinterest & Google+) */
38+
<meta name="og:title" content="Vivek Patel Portfolio - Computer Engineering Student" />
39+
<meta name="og:description"
40+
content="Vivek Patel's (vivek9patel) Personal Portfolio Website. Made with Ubuntu 20.4 (Linux) theme by Next.js and Tailwind CSS." />
41+
<meta name="og:image" content="images/logos/logo_1200.png" />
42+
<meta name="og:url" content="http://vivek9patel.github.io/" />
43+
<meta name="og:site_name" content="Vivek Patel Personal Portfolio" />
44+
<meta name="og:locale" content="en_IN" />
45+
<meta name="og:type" content="website" />
46+
47+
<link rel="icon" href="images/logos/fevicon.svg" />
48+
<link rel="apple-touch-icon" href="images/logos/logo.png" />
49+
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" as="style" />
50+
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet"></link>
51+
</Head>
52+
)
53+
}

‎src/components/apps/calc.js ‎components/apps/calc.js

File renamed without changes.

‎src/components/apps/chrome.js ‎components/apps/chrome.js

File renamed without changes.

‎src/components/apps/gedit.js ‎components/apps/gedit.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class Gedit extends Component {
1313
}
1414

1515
componentDidMount() {
16-
emailjs.init(process.env.REACT_APP_USER_ID);
16+
emailjs.init(process.env.NEXT_PUBLIC_USER_ID);
1717
}
1818

1919
sendMessage = async () => {
@@ -42,8 +42,8 @@ export class Gedit extends Component {
4242

4343
this.setState({ sending: true });
4444

45-
const serviceID = process.env.REACT_APP_SERVICE_ID;
46-
const templateID = process.env.REACT_APP_TEMPLATE_ID;
45+
const serviceID = process.env.NEXT_PUBLIC_SERVICE_ID;
46+
const templateID = process.env.NEXT_PUBLIC_TEMPLATE_ID;
4747
const templateParams = {
4848
'name': name,
4949
'subject': subject,

‎src/components/apps/settings.js ‎components/apps/settings.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import $ from 'jquery';
33

44
export function Settings(props) {
55
const wallpapers = {
6-
"wall-1": "./images/wallpapers/wall-1.jpg",
7-
"wall-2": "./images/wallpapers/minified/wall-2.jpeg",
8-
"wall-3": "./images/wallpapers/minified/wall-3.jpg",
9-
"wall-4": "./images/wallpapers/minified/wall-4.jpg",
10-
"wall-5": "./images/wallpapers/minified/wall-5.jpg",
11-
"wall-6": "./images/wallpapers/minified/wall-6.jpeg",
12-
"wall-7": "./images/wallpapers/minified/wall-7.jpeg",
13-
"wall-8": "./images/wallpapers/minified/wall-8.jpg",
6+
"wall-1": "./images/wallpapers/wall-1.webp",
7+
"wall-2": "./images/wallpapers/wall-2.webp",
8+
"wall-3": "./images/wallpapers/wall-3.webp",
9+
"wall-4": "./images/wallpapers/wall-4.webp",
10+
"wall-5": "./images/wallpapers/wall-5.webp",
11+
"wall-6": "./images/wallpapers/wall-6.webp",
12+
"wall-7": "./images/wallpapers/wall-7.webp",
13+
"wall-8": "./images/wallpapers/wall-8.webp",
1414
};
1515

1616
let changeBackgroundImage = (e) => {

‎src/components/apps/spotify.js ‎components/apps/spotify.js

File renamed without changes.

‎src/components/apps/terminal.js ‎components/apps/terminal.js

+28-28
Original file line numberDiff line numberDiff line change
@@ -238,73 +238,73 @@ export class Terminal extends Component {
238238
}
239239
break;
240240
case "pwd":
241-
let str = this.current_directory;
242-
result = str.replace("~","/home/vivek")
241+
let str = this.current_directory;
242+
result = str.replace("~", "/home/vivek")
243243
break;
244244
case "code":
245-
if(words[0]==="." || words.length === 0){
245+
if (words[0] === "." || words.length === 0) {
246246
this.props.openApp("vscode");
247247
} else {
248-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands:[ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg]";
248+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands:[ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg]";
249249
}
250250
break;
251251
case "echo":
252252
result = this.xss(words.join(" "));
253253
break;
254254
case "spotify":
255-
if(words[0]==="." || words.length === 0){
255+
if (words[0] === "." || words.length === 0) {
256256
this.props.openApp("spotify");
257257
} else {
258-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
258+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
259259
}
260260
break;
261261
case "chrome":
262-
if(words[0]==="." || words.length === 0){
262+
if (words[0] === "." || words.length === 0) {
263263
this.props.openApp("chrome");
264264
} else {
265-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
265+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
266266
}
267267
break;
268268
case "todoist":
269-
if(words[0]==="." || words.length === 0){
269+
if (words[0] === "." || words.length === 0) {
270270
this.props.openApp("todo-ist");
271271
} else {
272-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
272+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
273273
}
274-
break;
274+
break;
275275
case "trash":
276-
if(words[0]==="." || words.length === 0){
276+
if (words[0] === "." || words.length === 0) {
277277
this.props.openApp("trash");
278-
}else{
279-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
278+
} else {
279+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
280280
}
281281
break;
282282
case "about-vivek":
283-
if(words[0]==="." || words.length === 0){
283+
if (words[0] === "." || words.length === 0) {
284284
this.props.openApp("about-vivek");
285-
}else{
286-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
285+
} else {
286+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
287287
}
288288
break;
289289
case "terminal":
290-
if(words[0]==="." || words.length === 0){
290+
if (words[0] === "." || words.length === 0) {
291291
this.props.openApp("terminal");
292-
}else{
293-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
292+
} else {
293+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
294294
}
295295
break;
296296
case "settings":
297-
if(words[0]==="."|| words.length === 0){
297+
if (words[0] === "." || words.length === 0) {
298298
this.props.openApp("settings");
299-
}else{
300-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
299+
} else {
300+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
301301
}
302302
break;
303303
case "sendmsg":
304-
if(words[0]==="." || words.length === 0){
304+
if (words[0] === "." || words.length === 0) {
305305
this.props.openApp("gedit");
306-
}else{
307-
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
306+
} else {
307+
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
308308
}
309309
break;
310310
case "clear":
@@ -320,7 +320,7 @@ export class Terminal extends Component {
320320
action: "lol",
321321
});
322322

323-
result = "<img class=' w-2/5' src='./images/memes/used-sudo-command.jpg' />";
323+
result = "<img class=' w-2/5' src='./images/memes/used-sudo-command.webp' />";
324324
break;
325325
default:
326326
result = "Command '" + main + "' not found, or not yet implemented.<br>Available Commands: [ cd, ls, pwd, echo, clear, exit, mkdir, code, spotify, chrome, about-vivek, todoist, trash, settings, sendmsg ]";
@@ -364,6 +364,6 @@ export class Terminal extends Component {
364364

365365
export default Terminal
366366

367-
export const displayTerminal = (addFolder,openApp) => {
367+
export const displayTerminal = (addFolder, openApp) => {
368368
return <Terminal addFolder={addFolder} openApp={openApp}> </Terminal>;
369369
}

‎src/components/apps/todoist.js ‎components/apps/todoist.js

File renamed without changes.

‎src/components/apps/trash.js ‎components/apps/trash.js

File renamed without changes.

‎src/components/apps/vivek.js ‎components/apps/vivek.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export class AboutVivek extends Component {
9191
{this.renderNavLinks()}
9292
</div>
9393
</div>
94-
<div className="flex flex-col w-3/4 md:w-4/5 justify-start items-center flex-grow bg-ub-grey overflow-y-auto windowMainScreen ubuntu-font">
94+
<div className="flex flex-col w-3/4 md:w-4/5 justify-start items-center flex-grow bg-ub-grey overflow-y-auto windowMainScreen">
9595
{this.state.screen}
9696
</div>
9797
</div>
@@ -200,6 +200,7 @@ function Skills() {
200200
</div>
201201
<div className="px-2 flex flex-wrap items-start w-1/2">
202202
<div className="flex flex-wrap justify-center items-start w-full mt-2">
203+
<img className=" m-1" src="https://img.shields.io/badge/Next-black?style=flat&logo=next.js&logoColor=ffffff" alt="vivek next" />
203204
<img className=" m-1" src="https://img.shields.io/badge/-React-61DAFB?style=flat&logo=react&logoColor=ffffff" alt="vivek react" />
204205
<img className="m-1" src="https://img.shields.io/badge/Flutter-02569B?style=flat&logo=flutter&logoColor=white" alt="vivek flutter" />
205206
<img className="m-1" src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat&logo=tailwind-css&logoColor=white" alt="vivek tailwind css" />

‎src/components/apps/vscode.js ‎components/apps/vscode.js

File renamed without changes.

‎src/components/base/side_bar_app.js ‎components/base/side_bar_app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ export class SideBarApp extends Component {
4040
onMouseLeave={() => {
4141
this.setState({ showTitle: false });
4242
}}
43-
className={(this.props.isClose[this.id] === false && this.props.isFocus[this.id] ? "bg-white bg-opacity-10 " : null) + " w-auto p-2 outline-none relative transition hover:bg-white hover:bg-opacity-10 rounded m-1"}
43+
className={(this.props.isClose[this.id] === false && this.props.isFocus[this.id] ? "bg-white bg-opacity-10 " : "") + " w-auto p-2 outline-none relative transition hover:bg-white hover:bg-opacity-10 rounded m-1"}
4444
id={"sidebar-" + this.props.id}
4545
>
46-
<img className="w-7" src={this.props.icon} alt="Ubuntu App Icon" />
46+
<img width="28px" height="28px" className="w-7" src={this.props.icon} alt="Ubuntu App Icon" />
4747
<img className={(this.state.scaleImage ? " scale " : "") + " scalable-app-icon w-7 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"} src={this.props.icon} alt="" />
4848
{
4949
(

‎src/components/base/ubuntu_app.js ‎components/base/ubuntu_app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class UbuntuApp extends Component {
1414
onDoubleClick={this.openApp}
1515
tabIndex={0}
1616
>
17-
<img className="mb-1 w-10" src={this.props.icon} alt={"Ubuntu " + this.props.name} />
17+
<img width="40px" height="40px" className="mb-1 w-10" src={this.props.icon} alt={"Ubuntu " + this.props.name} />
1818
{this.props.name}
1919

2020
</div>

0 commit comments

Comments
 (0)