Personal portfolio website of theme Ubuntu 20.04, made using NEXT.js & tailwind CSS

  • By Vivek Patel
  • Last update: Jan 8, 2023
  • Comments: 11

Web simulation of UbuntuOS

This is a personal portfolio website of theme Ubuntu 20.04, made using React.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.

This project was made using Create React 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

Github

https://github.com/vivek9patel/vivek9patel.github.io

Comments(11)

  • 1

    feat : Implemented Calculator app, added 'pwd' command, open all apps from terminal command, fixed Responsive design

    Hey! I have implemented Three features.

    1. Added Terminal-Calculator app (#44)

    • Evaluate mathematical expressions:

      1920/16*9
2^32 
12/5*9+9.4*2  
19*(45%5)*((2/3)-(2/3))
sqrt(1.4^2 + 1.5^2)

      • Operators: addition (+), subtraction (-), multiplication (*), division (/), modulo (%)exponentiation (^).

      • Mathematical functions: abs, acos, acosh, asin, asinh, atan, atan2, atanh, ceil, cos, cosh, exp, floor, ln, log,log10, log2,round, sin, sinh,sqrt,cbrt,tan, tanh, max, min, fac, random,pow.

      • High-precision numeric type with 20 significant digits.

      • Exponential notation: 3.4142787736421956e+29.

      • Variable assignments and use in futher evaluation : x=1 x+2

      • clear command for clearing calculator app

      • exit command for exit from calculator app

    2. Added pwd command for terminal and other commands to open all apps from the terminal like (#24 )

    • spotify & spotify . to open spotify app, chrome & chrome . to open google chrome app, todoist & todoist . to open todo-ist app, trash & trash . to open trash app, settings & settings . to open settings app, sendmsg & sendmsg . to open sendmsg , about-vivek & about-vivek . to open about-vivek folder.

    3. Did responsive design fix for the all-application screen (#39)

    • Added app slicing for titles of apps
    • Before (Laptop Screen) : Screenshot from 2021-08-31 14-55-17
    • After (Laptop Screen) : Screenshot from 2021-08-31 14-55-35
    • Before (Mobile Screen) : Screenshot_20210831-145655
    • After (Mobile Screen) : Screenshot_20210831-145613
  • 2

    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

  • 3

    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)

  • 4

    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

  • 5

    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

  • 6

    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.

  • 7

    Added mkdir command implementation in terminal

    Hey, I am Rohan from Pune. I am interested in your codebase and like to contribute to improve the project. As a start I have implemented "mkdir" ubuntu command in your terminal implementation. On running command "mkdir {folder-name}" a new folder gets added in the desktop. Please go through the implementation, suggest changes if any, else I would be happy if you merge this in your main codebase :)

  • 8

    To Do app

    Hello Vivek!

    • I want to say that, If you like, Can you add my To do app as a app in this Ubuntu web experience? I tried to add to my ubuntu web repo, but it didn't work. Can you add it? If it supports the frame.

    Link to my repo : https://github.com/RedEdge967/ubuntu-folio Link to the To-do app : https://to-do-app-jquery.vercel.app Link to the preview deployment : https://ubuntu-e8fwz4pqu-chandula-janith.vercel.app/ (This link is the one I tried to add to-do app to my ubuntu web)

    please

  • 9

    Configure Renovate

    WhiteSource Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.

    Detected Package Files

    • package.json (npm)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Enable Renovate Dependency Dashboard creation
    • If semantic commits detected, use semantic commit type fix for dependencies and chore for all others
    • Ignore node_modules, bower_components, vendor and various test/tests directories
    • Autodetect whether to pin dependencies or maintain ranges
    • Rate limit PR creation to a maximum of two per hour
    • Limit to maximum 20 open PRs at any time
    • Group known monorepo packages together
    • Use curated list of recommended non-monorepo package groupings
    • Ignore spring cloud 1.x releases
    • Ignore http4s digest-based 1.x milestones
    • Use node versioning for @types/node
    • Limit concurrent requests to reduce load on Repology servers until we can fix this properly, see issue 10133

    🔡 Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.

    What to Expect

    With your current configuration, Renovate will create 15 Pull Requests:

    fix(deps): pin dependencies
    fix(deps): pin dependencies
    • Schedule: ["at any time"]
    • Branch name: renovate/react-monorepo
    • Merge into: master
    • Pin react to 17.0.2
    • Pin react-dom to 17.0.2
    chore(deps): update dependency @​tailwindcss/postcss7-compat to v2.2.9
    • Schedule: ["at any time"]
    • Branch name: renovate/tailwindcss-postcss7-compat-2.x
    • Merge into: master
    • Upgrade @tailwindcss/postcss7-compat to 2.2.9
    fix(deps): update dependency browserslist to v4.16.8
    • Schedule: ["at any time"]
    • Branch name: renovate/browserslist-4.x
    • Merge into: master
    • Upgrade browserslist to 4.16.8
    fix(deps): update dependency react-draggable to v4.4.4
    • Schedule: ["at any time"]
    • Branch name: renovate/react-draggable-4.x
    • Merge into: master
    • Upgrade react-draggable to 4.4.4
    fix(deps): update dependency ws to v7.5.4
    • Schedule: ["at any time"]
    • Branch name: renovate/ws-7.x
    • Merge into: master
    • Upgrade ws to 7.5.4
    chore(deps): update dependency autoprefixer to v10
    • Schedule: ["at any time"]
    • Branch name: renovate/autoprefixer-10.x
    • Merge into: master
    • Upgrade autoprefixer to 10.3.3
    chore(deps): update dependency postcss to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/postcss-8.x
    • Merge into: master
    • Upgrade postcss to 8.3.6
    fix(deps): update dependency @testing-library/react to v12
    • Schedule: ["at any time"]
    • Branch name: renovate/testing-library-react-12.x
    • Merge into: master
    • Upgrade @testing-library/react to 12.0.0
    fix(deps): update dependency @testing-library/user-event to v13
    • Schedule: ["at any time"]
    • Branch name: renovate/testing-library-user-event-13.x
    • Merge into: master
    • Upgrade @testing-library/user-event to 13.2.1
    fix(deps): update dependency emailjs-com to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/emailjs-com-3.x
    • Merge into: master
    • Upgrade emailjs-com to 3.2.0
    fix(deps): update dependency glob-parent to v6
    • Schedule: ["at any time"]
    • Branch name: renovate/glob-parent-6.x
    • Merge into: master
    • Upgrade glob-parent to 6.0.1
    fix(deps): update dependency normalize-url to v7
    • Schedule: ["at any time"]
    • Branch name: renovate/normalize-url-7.x
    • Merge into: master
    • Upgrade normalize-url to 7.0.1
    fix(deps): update dependency web-vitals to v2
    • Schedule: ["at any time"]
    • Branch name: renovate/web-vitals-2.x
    • Merge into: master
    • Upgrade web-vitals to 2.1.0
    fix(deps): update dependency ws to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/ws-8.x
    • Merge into: master
    • Upgrade ws to 8.2.1

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.

    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.

    This PR has been generated by WhiteSource Renovate. View repository job log here.

  • 10

    Feature/show applications

    Hey! I have implemented two features.

    1. code . command for opening vs code.
    2. Show Applications panel with following features a) Show all applications b) Search Applications c) Frequent Applications used are displayed ( the data indicating frequency of each app is stored in local storage)

    Issues to be solved->

    1. I have made the interface of the feature as Ubuntu like as possible. But still some minute changes are required such as size of the bottom bars below "Frequent" and "All".
    2. I have noticed a bug that when you try to open an application again after closing it , it does not open. Please help me fix it.
  • 11

    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!

    • Popular Tag

    Related