Welcome to the documentation for my Sci-fi Portfolio Project, developed as part of my summer internship in web development. This project is a showcase of my skills, projects, and personal style, presented through a unique sci-fi retro theme. It incorporates modern web development practices, interactive features, and a blend of creative and technical design.

---

Table of Contents

1. Overview
2. Features
3. Tech Stack
4. Installation and Setup
5. Usage
6. Development Process

---

Overview

This portfolio website serves as a personal space to:

• Entertain visitors with an integrated retro-themed game.
• Provide a terminal-like interactive experience for users.

The project reflects my creativity and technical skills while allowing users to explore my work in a dynamic and engaging way.

---

Features

• Sci-Fi Retro Theme: The site is styled like a vintage computer terminal, giving users a nostalgic yet futuristic experience.
• Command-Line Interface (CLI): Users can interact with the site using custom commands for navigation.
• Interactive Game: Includes a space-themed game inspired by classic arcade gameplay.
• Live Data Display: A real-time widget on the homepage shows:
  • Current date and time.
  • A world map for more sci-fi look
• Design: Optimized for desktop only at the moment.
• Dynamic Achievements Section: Showcases milestones as “quests” or “achievements.”

---

Tech Stack

• Frontend: React.js (with Hooks and Components)
• Styling: CSS Modules for scoped styles and a linear gradient retro aesthetic
• Game: Developed using HTML, CSS & Js
• State Management: useState and useEffect hooks for dynamic updates
• Version Control: Git and GitHub for project collaboration and history tracking

---

Installation and Setup

To run this project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/Eyad3skr/Portfolio
   cd src

2. Install Dependencies:

   npm install

3. Run the Development Server:

   npm start

4. Build for Production:

   npm run build

---

Usage

Homepage

• Displays the terminal interface.
• Use custom commands (e.g., about, pgallery, conus) to explore the site.

Game

• Accessible via the game command or a direct link.
• Use arrow keys to control the spaceship and enjoy retro-style gameplay.

Dynamic Widgets

• A sidebar displays:
  • Current time and date.
  • An interactive world map.

---

Development Process

• Planning: Defined the overall design and identified essential features (interactive game, CLI, widgets).
• Learning and Experimentation: Gained hands-on experience with ReactJS, hooks, and CSS Modules.
• Iterative Development: Used Agile-like practices for feature development and bug fixes.
• Challenges:
  • Integrating game mechanics with React components.
  • Achieving the desired sci-fi aesthetic with CSS.
  • Implementing scoped styles for modular and maintainable code.

---

Contributing

Contributions are welcome! If you have suggestions or want to improve the project:

1. Fork the repository.
2. Create a feature branch.
3. Submit a pull request.

---

Acknowledgments

This project was built during a summer internship focused on web development and ReactJS. Special thanks to mentors and teammates for their guidance and support.

---

Contact

Feel free to reach out for feedback or collaboration opportunities:

• LinkedIn: Your LinkedIn Profile