Maria Rodriguez's Portfolio is a unique and interactive website designed to resemble an old computer desktop screen. It features draggable icons that represent various applications and tabs, creating a nostalgic user experience. This portfolio showcases my work as a software developer, featuring various projects, a contact form, an about me section, and links to my resume and GitHub.
- Overview
- Languages & Frameworks Used
- Purpose
- Features
- Code Structure
- Installation
- Requirements
- Inspiration
- Contributing
- Contact
- HTML: Structure of the web pages
- CSS: Styling and layout of the website
- JavaScript: Interactivity and dynamic content
- Express: A web application framework for Node.js, used for building server-side applications
- Nodemailer: A library for sending emails from Node.js applications
- dotenv: A zero-dependency module that loads environment variables from a .env file into process.env
- body-parser: Middleware for parsing incoming request bodies in a middleware before your handlers, available under the req.body property
The purpose of this portfolio website is to:
- Provide a unique and engaging user interface that mimics an old computer desktop environment.
- Allow visitors to interact with my portfolio by opening and closing tabs, dragging icons, and exploring my work.
- Old Computer Desktop Design: The design is inspired by classic desktop interfaces, complete with draggable icons and interactive tabs.
- Draggable Icons: Users can move icons around the screen for a personalized experience.
- Modals for Content: Clicking on icons opens modals with detailed information, such as projects, contact forms, and downloadable content (like my resume).
- Interactive Calculator: An embedded calculator allows users to perform basic arithmetic operations.
- styles.css: Styles for the portfolio
- script.js: JavaScript for interactivity (Images, PDFs, and other media)
- index.html: Main HTML file for the portfolio
- server.js: Backend server using Express.js to handle email requests and serve static files
- Clone the repository:
gh repo clone mariarodr1136/Portfolio
- Alternatively, if you prefer to use HTTPS:
git clone https://github.com/mariarodr1136/Portfolio.git
- Navigate into the project directory:
cd Portfolio - Install any dependencies:
npm install express nodemailer dotenv body-parser
- Start the local server:
node server.js
- Open the Application in your browser:
http://localhost:3000/
- A modern web browser: Chrome, Firefox, Safari, etc., for the best user experience.
- Basic knowledge of HTML, CSS, and JavaScript: If you want to modify the code.
- Node.js and npm: Make sure Node.js and npm are installed on your machine.
- Dependencies to install: express, nodemailer, dotenv, body-parser.
The design of this portfolio website draws inspiration from an old computer desktop screen, allowing users to interact with the portfolio in a nostalgic and playful manner. Icons represent different applications, and users can drag and open them to explore content in a unique style.
Feel free to submit issues or pull requests for improvements or bug fixes. You can also open issues to discuss potential changes or enhancements. All contributions are welcome to enhance the app’s features or functionality!
To contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b feat/your-feature-name
- Alternatively, for bug fixes:
git checkout -b fix/your-bug-fix-name
- Make your changes and run all tests before committing the changes and make sure all tests are passed.
- After all tests are passed, commit your changes with descriptive messages:
git commit -m 'add your commit message' - Push your changes to your forked repository:
git push origin feat/your-feature-name.
- Submit a pull request to the main repository, explaining your changes and providing any necessary details.
If you have any questions or feedback, feel free to reach out at mrodr.contact@gmail.com.