Giter VIP home page Giter VIP logo

vivek9patel.github.io's Introduction

Web simulation of UbuntuOS

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

To run this on localhost type npm start and when u are done coding type npm run build to build your app.

NOTE: if you have yarn just replace npm start and npm run build with yarn start and yarn build.

Buy Me A Coffee

To make the contact form work

  • Create a account in emailjs create also new Outlook or Gmail account to be able to send email.
  • Create a new service, select and log in to your newly created outlook or gmail account on EmailJS.
  • Go back to the dashboard and get the Service ID copy it.
  • Create a .env file in your root folder and put

NEXT_PUBLIC_USER_ID = 'YOUR_USER_ID'
NEXT_PUBLIC_TEMPLATE_ID = 'template_fqqqb9g'
NEXT_PUBLIC_SERVICE_ID = 'YOUR_SERVICE_ID'

into it. Replace *your user id and your service ID with your values in your EmailJS service.

Star History

Star History Chart

This project was made using Create Next App! Here is the scripts that u can run.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributiors who wants to make this website better can make contribution,which will be greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Added some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

vivek9patel.github.io's People

Contributors

curioustushar avatar ericygu avatar fewwwww avatar imgbotapp avatar renovate-bot avatar rohan-naik07 avatar saivishnu725 avatar shubham-lal avatar sith-lord-vader avatar sunitapt avatar vivek9patel avatar zeetec20 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vivek9patel.github.io's Issues

Fix Grammer

The repo description has a error by react and tailwindcss should be using react and tailwindcss

terminal navigation features

The terminal doesn't have navigation commands to allow users to go to previous directories (ex. 'cd ..' does not work). In addition, it would be nice if there was an auto-complete feature.

[Features] Resizable Windows, Snap to border, Button Open in new tab

Hi, i think these features would be really great in this project.

Resizable Windows so the user can make one window bigger than the other.

Snap to Border would be fun if it works like on any modern os

and in the title bar on the left side a little button or link “open full” for opening an website in an new tab because not every application will perfectly work with every screen size like on mobile

and maybe the window border and buttons should be bigger on mobile

I really like this and would like to use it for an tool site, for tools like cyberchef, drawio because of such case’s windows need to be resizable.

Also it would be nice to pin applications to the desktop :)

if its not possible its no problem for me. But this were my ideas.

App Windows do not render properly on Safari

The application windows on your site do not render properly on the Safari browser on a mac or iPhone. You might want to look into that. They render in a very small portion of the window. Maybe a width or flex issue. Safari has this issue if you have overlapping or overriding flex-box rules in your CSS which other browsers like Chrome and FF just ignore. I face this issue often with my projects.

I would have provided a pull request for the fix but I don't work in React. (Angular cough cough)

Safari Version 14.0.3 (16610.4.3.1.7)
macOS Big Sur Version 11.2.3

By the way, insane website you got. Love it. Work perfectly fine on Chrome and FF.

I'm attaching screenshots for the issue.

Screenshot 2021-04-17 at 11 34 34 PM
Screenshot 2021-04-17 at 11 34 29 PM
Screenshot 2021-04-17 at 11 34 17 PM

Show Applications doesn't work

Hi
Thanks for providing such a wonderful project.

I figure out that Show applications at the bottom of the page don't work.

if you are ok, I can fix it.

Reflected XSS in terminal

Hey,

I found that this website uses a terminal module that allows users to echo text in the terminal. Unfortunately this terminal does not sanitize user input.

If a user enters the following command: echo <svg><svg onload=alert(0)>, a Javascript alert pops up on the screen as shown below.

1

This is obviously a non-priority issue because it is not "stored". But a good idea would be to sanitize all user input.

Hope this helps!

Toolbar bug

When you click on toolbar and the drawer opens, after that when you click on the same area above orange bottom border and close the drawer and it does successfully close the drawer. But when see that area it still displays active orange bottom border and also when you click on that area again, the drawer wont open until you click somewhere else on the screen.

chrome browser

in chrome, while you search your own website(vivek9patel.github.io) it will open your website but inside that chrome is not working.
(goto vivek9patel.github.io -----> open chrome ----> search for vivek9patel.github.io ---> open chrome now its(chrome) not working nothing )

Bad emailing

No emailing working with env set and emailjs configured

walpaper displaying as white image

when i try to add new walpaper in public/images/wallpapers then i add it to the walpepers map in components/apps/settings.js , it display as white image in the website , although its webp extension and also i make it same dimesnion of other pics

Bug: TypeError: this.props.screen is not a function

So in /components/base/window.js theres a bug:

Unhandled Runtime Error
TypeError: this.props.screen is not a function

Source
components/base/window.js (291:111) @ WindowMainScreen.render

289 | return (
290 | <div className={"w-full flex-grow z-20 max-h-full overflow-y-auto windowMainScreen" + (this.state.setDarkBg ? " bg-ub-drk-abrgn " : " bg-ub-cool-grey")}>

291 | {this.props.addFolder ? displayTerminal(this.props.addFolder, this.props.openApp) : this.props.screen()}
| ^
292 |
293 | )
294 | }
Call Stack
Desktop.eval [as focus]
components/screen/desktop.js (429:13)
eval
components/screen/desktop.js (392:91)
Show collapsed frames

Please fix it asap

Dark mode doesn't capture all text

Hey Vivek, quick issue I noticed that I wanted to point out. On the portfolio application, your GitHub Sponsor portion under the Projects section has black text on a black background:

black on black

Error while executing "yarn build"

Executing "yarn build" returns a error:-
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

I'm trying to figure it out for now. Will update y'all when it is fixed.🤞

The panel volume bug

The volume and brightness settings in the upper right corner, drag the mouse, the panel will disappear but the function is still valid

Bug: XSS due to lack of input sanitisation

Problem

Terminal input such as <input/onmouseover="alert('XSS')"> causes an alert to pop up on hovering over the white box.

Severity

This is currently a non issue but if a forker decides to make input persistent and/or tries to simulate creation of multiple users this will be very dangerous.

feat: Drag and select

You can add drag and select feature on the desktop. This will give a feel of the full operating system.
like this

image

Tab does not work

Pressing TAB shifts focus away from the terminal, and the keystrokes that follow aren't registered leading to a confusing UX.

Perhaps the keypress can be captured to override default behaviour?

Error while running your aplication

i download and run the code using npm start,but it shows the error message

Failed to compile.

./src/components/apps/spotify.js
SyntaxError: C:\Users\Lenovo\Downloads\vivek9patel.github.io-master\src\components\apps\spotify.js: Unexpected character ' '. (1:0)

Terminal at https://vivek9patel.github.io/

(1) Would it be possible for the "ls" implementation to also get -a option? Or any option to display one file per row?

(2) Would it be possible for mkdir() to be added too? It does not have to create a real directory; in ruby we'd probably
use tmpdir or something.

By the way, the idea is quite great. Would be nice if the default "ubuntu" log in at vivek could also show some
"about this project" or so, to detail some design goals you have had. And whether other projects inspired you
as well.

Thanks for reading!

error while publishing to GitHub pages

Here is my repo[https://github.com/Nabeelshar/ubantu] and here is error
`λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)

[email protected] deploy
gh-pages -d build

ENOENT: no such file or directory, stat 'C:\Users\nabeel\Documents\vivek9patel.github.io-master\build'`

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.


  • Check this box to trigger a request for Renovate to run again on this repository

Add NextJS support

I tried to switch from ReactJS to NextJS to this project but failed. Please make a NextJS version of this project because i want server-side rendering support and other nice benefits. Note:I use this project for my website

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.