A blast from the past! If you’re ready to transport your portfolio back to the nostalgic era of Windows 95, then you’re in the right place. This guide will help you set up your very own Windows 95 themed portfolio using modern frameworks and libraries like Vue 3, Nuxt 3, Pinia, and Tailwind CSS. Let’s dive in!

Frameworks and Libraries Used

• Vue 3: A progressive JavaScript framework for building user interfaces.
• Nuxt 3: A powerful framework built on Vue.js for server-side rendering and generating static websites.
• Pinia: A state management library for Vue.js applications.
• Tailwind CSS: A utility-first CSS framework for creating custom designs without leaving your HTML.

Setup Instructions

Follow these steps to get your portfolio up and running:

1. Step 1: Git Clone the Project
   To get started, you’ll want to clone the project from GitHub. Open your terminal and run:

   git clone https://github.com/dhs17y2adonchiawin95.git

2. Step 2: Install Vue
   Make sure you’ve installed Vue on your machine. For detailed installation guides, refer to the Official documentation.
3. Step 3: Install Packages
   Navigate to your cloned project directory and run the following command to install all necessary packages:

   npm install

4. Step 4: Compile Project and Serve
   Finally, compile the project and serve it using:

   npm run serve

Understanding the Code – An Analogy

Think of the code behind this portfolio as constructing a little LEGO town. Each component (like Vue components) represents a different building in your town.

• Your Vue 3 components are like individual houses; they can be connected but serve different purposes.
• Nuxt 3 acts as the infrastructure of this town, ensuring there are roads (routing) so that you can seamlessly travel from one house to another.
• Pinia is the town hall that stores important records (state management) about who lives in each house, allowing you to keep track of everything.
• Tailwind CSS is like the paint and decorations for each house, giving them a unique and appealing look without the clutter of unnecessary items.

FAQ

Is this open source?

Yes and no…? Most of the image assets are stored within the project, and I haven’t had the time to host them externally. Feel free to clone the project for your personal exploration, but be warned that it might be quite large due to the images.

Is there an open source variant of this project?

Absolutely! Check out the Vue.js OS Template Project—a barebones MVP version of this project where you can implement your own styling!

Did you use any external CSS libraries to create the UI?

No external libraries used! Most of the UI was handcrafted by referencing a Windows 95 emulator and was built entirely with pure CSS.

How long did it take you?

Approximately one week for the styling. The logic was previously built in an older project—a MacOS variant available at this link.

Does the mail app work?

Yes, the mail app in this portfolio is linked to my Google Forms for easy contact.

Can I contact you?

Of course! Feel free to reach out via email.

Troubleshooting Tips

If you encounter issues during the setup process, consider the following troubleshooting tips:

• Ensure that you have Node.js installed on your system, as it is essential for running npm.
• If you receive an error while running npm install, check your internet connection or try clearing your npm cache.
• For any other unexpected errors, refer to the project’s repository for issues and discussions; they may offer solutions.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.