Skip to content

Latest commit

 

History

History
105 lines (82 loc) · 5.97 KB

README.md

File metadata and controls

105 lines (82 loc) · 5.97 KB

Maria Rodriguez Portfolio 💻

Maria Rodriguez's Portfolio is an interactive website designed to replicate an old-school computer desktop environment, offering users a nostalgic and engaging experience. Built with HTML, CSS, and JavaScript, this portfolio showcases my development projects in an immersive format where users can interact with the interface by dragging icons and opening modals to explore detailed information about my work.

Interactive features, such as draggable icons and dynamic content loading, are powered by JavaScript. For an enhanced user experience, the site includes smooth CSS animations and transitions, with a modular code structure that ensures scalability and maintainability.

By combining nostalgic design with modern web development practices, this portfolio effectively showcases my technical expertise and attention to detail, all while offering an enjoyable and interactive experience. 👾

Languages Languages Languages Frameworks Libraries

Live Demo Link

Screenshot 2024-10-22 at 9 02 15 PM Screenshot 2024-11-01 at 11 12 16 AM

Table of Contents

Languages & Frameworks Used

  • HTML: Structuring the portfolio with semantic elements for better accessibility.
  • CSS: Styling the portfolio to create a visually appealing and responsive layout.
  • JavaScript: Adding interactivity, managing dynamic elements, and ensuring smooth transitions for a desktop-like experience.

Purpose

This portfolio was created to:

  • Offer a modern, visually-stimulating, and user-centric interface that simulates a classic computer desktop environment.
  • Engage users with interactive elements like draggable icons, clickable "applications," and dynamic content loading to explore my work.
  • Showcase technical expertise in web development, UI/UX design, and backend integration, using clean, modular code with an eye for performance and maintainability.

Features

  • Old Computer Desktop Design: The UI emulates a vintage desktop screen with draggable icons and modals, blending nostalgic design with modern web technologies.
  • Draggable Icons: Users can click and drag icons around the screen, personalizing their experience with a touch of interactivity and fun.
  • Modals for Content: Clicking on icons opens responsive modals that display detailed project information, an about me section, and links to my professional resume and GitHub repositories.
  • Performance Optimization: The application is optimized for fast load times with minimal assets and efficient use of resources.
  • Scalable and Modular Code: The portfolio is built with scalability in mind, making it easy to add future features or expand content without disrupting the user experience.

Code Structure

  • styles.css: Defines all the styles for the portfolio, including layout, animations, and responsive design. Utilizes modern CSS techniques to create a fluid, dynamic interface.
  • script.js: Handles interactivity, such as opening and closing modals, dragging icons, and loading dynamic content. Features modular functions for easy updates and maintenance.
  • index.html: The main structure of the portfolio page, organizing content and linking external styles and scripts.
  • server.js: A simple Node.js server built with Express.js to serve static assets and handle any API requests (if applicable). It can be easily extended for additional backend functionality.

Installation

  1. Clone the repository: 
    gh repo clone mariarodr1136/Portfolio
  • Alternatively, if you prefer to use HTTPS: 
    git clone https://github.com/mariarodr1136/Portfolio.git
  1. Navigate into the project directory: 
    cd Portfolio
  2. Install any dependencies: 
    npm install express dotenv body-parser
  3. Start the local server: 
    node server.js
  4. Open the Application in your browser: 
    http://localhost:3000/

Requirements

  • 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.

Contributing

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:

  1. Fork the repository.
  2. 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
  1. Make your changes and run all tests before committing the changes and make sure all tests are passed.
  2. After all tests are passed, commit your changes with descriptive messages: 
    git commit -m 'add your commit message'
  3. Push your changes to your forked repository: 
    git push origin feat/your-feature-name.
  4. Submit a pull request to the main repository, explaining your changes and providing any necessary details.

Contact

If you have any questions or feedback, feel free to reach out at mrodr.contact@gmail.com.