Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mariarodr1136/portfolio
Maria Rodriguez's Portfolio is an interactive website that mimics an old computer desktop, providing a fun and engaging experience as users navigate through draggable icons representing various applications, making it feel like a playful retro computer adventure. 👾
https://github.com/mariarodr1136/portfolio
creative-web-design expressjs interactive javascript old-school-project retro retrocomputing web-development
Last synced: 5 days ago
JSON representation
Maria Rodriguez's Portfolio is an interactive website that mimics an old computer desktop, providing a fun and engaging experience as users navigate through draggable icons representing various applications, making it feel like a playful retro computer adventure. 👾
- Host: GitHub
- URL: https://github.com/mariarodr1136/portfolio
- Owner: mariarodr1136
- Created: 2024-10-02T20:15:07.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-17T03:17:54.000Z (5 days ago)
- Last Synced: 2025-01-17T03:26:26.959Z (5 days ago)
- Topics: creative-web-design, expressjs, interactive, javascript, old-school-project, retro, retrocomputing, web-development
- Language: JavaScript
- Homepage: https://mariarodr1136.github.io/Portfolio/
- Size: 79 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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. 👾
    
---
## Table of Contents
- [Languages & Frameworks Used](#languages--frameworks-used)
- [Purpose](#purpose)
- [Features](#features)
- [Code Structure](#code-structure)
- [Installation](#installation)
- [Requirements](#requirements)
- [Contributing](#contributing)
- [Contact](#contact)
## 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:
```bash
gh repo clone mariarodr1136/Portfolio
- Alternatively, if you prefer to use HTTPS:
```bash
git clone https://github.com/mariarodr1136/Portfolio.git
2. Navigate into the project directory:
```bash
cd Portfolio
3. Install any dependencies:
```bash
npm install express dotenv body-parser
4. Start the local server:
```bash
node server.js
5. Open the Application in your browser:
```bash
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:
```bash
git checkout -b feat/your-feature-name
- Alternatively, for bug fixes:
```bash
git checkout -b fix/your-bug-fix-name
3. Make your changes and run all tests before committing the changes and make sure all tests are passed.
4. After all tests are passed, commit your changes with descriptive messages:
```bash
git commit -m 'add your commit message'
5. Push your changes to your forked repository:
```bash
git push origin feat/your-feature-name.
6. 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 [[email protected]](mailto:[email protected]).