vivek9patel.github.io

vivek9patel.github.io is an open-source personal portfolio template that recreates the Ubuntu 20.04 desktop environment as an interactive web experience, built with Next.js and Tailwind CSS.

What is vivek9patel.github.io?

It is a portfolio website theme that simulates the Ubuntu 20.04 operating system inside the browser, using a desktop metaphor with windows, menus, and icons for presenting a developer's projects and contact information. The project is written in Next.js with Tailwind CSS, is maintained on GitHub under the repository vivek9patel/vivek9patel.github.io, and has collected over 4,300 stars. Input is your content in the component files, and output is a deployable static portfolio site.

Key Features

• Ubuntu 20.04 desktop simulation — The interface mimics a GNOME-style desktop, giving your portfolio the look of a real Linux environment.
• Next.js framework — Built with Next.js, enabling React-based development and static site generation.
• Tailwind CSS styling — Utility-first Tailwind CSS handles layout and responsive design without custom CSS files.
• Contact form via EmailJS — The form is wired to EmailJS; you connect it by creating a service and setting three environment variables: NEXT_PUBLIC_USER_ID, NEXT_PUBLIC_TEMPLATE_ID, and NEXT_PUBLIC_SERVICE_ID in a .env file.
• Simple editing structure — All components live in /src/components, so you edit content and layout in one directory.
• Development and production scripts — npm start runs the development server with live reload, and npm run build creates a minified production bundle with hashed filenames.
• Open source and community friendly — Contributions are accepted via the standard fork, feature branch, and pull request workflow.

Who is it for?

• Frontend developers looking for a distinctive portfolio that shows off front-end skills through a simulated OS interface.
• Open source contributors who want to improve the theme by fixing issues or adding new desktop-like features.
• Tech job seekers who need a memorable personal site to highlight projects, résumé, and a working contact form.

What can you do with it?

• Developers: Deploy this portfolio to any Next.js-compatible host and replace the default content with your own projects and bio.
• Hobbyists: Use the simulated desktop as a creative way to experiment with windowed UI interactions in React.
• Educators: Walk through the EmailJS integration as a practical example of connecting a front-end form to an external email service.

How does the template work?

To run it locally, clone the repository, run npm start (or yarn start), and open http://localhost:3000. Edit the files in /src/components to change your portfolio's content, then run npm run build to produce a production-ready build with minified assets. For the contact form, you must create an EmailJS account, set up a service, and paste your user ID and service ID plus a template ID into a .env file.

FAQ

Is this template free?

Yes, the repository is publicly available on GitHub as open source, and the author accepts contributions and donations through Buy Me A Coffee.

How do I customize the portfolio?

Clone the project and edit the files in /src/components. Each component corresponds to a part of the simulated desktop, so you can change text, colors, and layout there.

How do I set up the contact form?

Create an account at EmailJS, create a new service using a Gmail or Outlook account, then copy your service ID. Add a .env file with your user ID, service ID, and a template ID, and the form will send messages to your email.

What tech stack is used?

The template uses Next.js as the React framework and Tailwind CSS for styling. It is based on Create Next App and includes standard development and build scripts.