reactivePortfolio

📍 GitHub it with reactivePortfolio: Your career, Reactively Powered!

🚀 Developed with the software and tools below.

---

📚 Table of Contents

• 📍Overview
• 🔮 Features
• ⚙️ Project Structure
• 🧩 Modules
• 🏎💨 Getting Started
• 🗺 Roadmap
• 🤝 Contributing
• 🪪 License
• 🙏 Acknowledgments

---

📍Overview

The predecessor of created using HTML5, CSS3, and vanilla JS is also deployed on gh-pages. Go and check it out. Maybe you can use it as a boilerplate for your own portfolio site.

---

🔮 Feautres

Distinctive Features

1. User-Centered Design: The project has a user-centered architecture that makes use of components to create reusable elements. This allows for a more efficient coding process and a more consistent user-experience.

2. Dark Mode Functionality: The project includes a dark mode feature that allows users to customize the color scheme of the website.

3. Responsive Layout: The project has a fully responsive layout, allowing the website to be displayed correctly on all devices, no matter the size or resolution.

4. Form Submission: The project includes a contact form, which allows users to submit messages directly to the developer.

5. Cross-Browser Compatibility: The project has been tested and is compatible with all major browsers.

6. Modern Technology Stack: The project uses a modern technology stack, including ReactJS and NodeJS, to create a dynamic web experience.

---

⚙️ Project Structure

repo
├── 100%.png
├── CNAME
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── 404.html
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── modernizr-custom.js
│   ├── precache-manifest.f9751c1cb65a903e5e35c0e57177d4d9.js
│   ├── robots.txt
│   ├── service-worker.js
└── src
    ├── App.js
    ├── components
    │   ├── AboutComponent.js
    │   ├── HomeComponent.js
    │   ├── Work
    │   │   ├── Highlighted
    │   │   │   ├── HighlightedApp.js
    │   │   │   ├── HighlightedDescription.js
    │   │   │   ├── HighlightedHeader.js
    │   │   │   └── HighlightedList.js
    │   │   ├── WorkComponent.js
    │   │   └── WrokTemplate.js
    │   ├── contactForm
    │   │   ├── ContactComponent.js
    │   │   ├── InputField.js
    │   │   └── SideLink.js
    │   ├── darkMode
    │   │   ├── DarkModeToggle.js
    │   │   ├── ThemeContext.js
    │   │   ├── ToggleContainer.js
    │   │   ├── ToggleTheme.js
    │   │   ├── Wrapper.js
    │   │   ├── basicTheme.js
    │   │   └── useTheme.js
    │   ├── helper
    │   │   ├── IconComponent.js
    │   │   ├── ImageComponent.js
    │   │   └── imageIndex.js
    │   └── layout
    │       ├── FooterComponent.js
    │       └── MenuComponent.js
    ├── config
    │   ├── config.js
    │   └── form-url.js
    ├── index.js
    ├── serviceWorker.js
    └── style
        ├── App.css
        ├── additionalStyles.css
        ├── animations.css
        ├── darkMode.css
        └── formStyle.css

21 directories, 214 files

---

---

🚀 Getting Started

✅ Prerequisites

Before you begin, ensure that you have the following prerequisites installed:

1. Installed the newest version of NodeJS and NPM (it comes included with the NodeJS installation)

2. Have CRA installed on your system or use the new (recommended approach) ➖ npx create-react-app my-app cd my-app

💻 Installation

1. Clone the reactivePortfolio repository:

git clone https://github.com/dzenis-h/reactivePortfolio

2. Change to the project directory:

cd reactivePortfolio

3. Install the dependencies:

npm install

The last command runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

🤖 Using reactivePortfolio

npm start.js

---

🛠 Future Development

• [📌 CREATE-A-COMPELLING-README-FILE]
• [📌 IMPROVE-THIS-README.md file]
• [📌 ADD-BLOG-COMPONENT]

---

🤝 Contributing

Contributions are always welcome! Please follow these steps:

1. Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
2. Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
3. Create a new branch with a descriptive name (e.g., new-feature-branch or bugfix-issue-123).

git checkout -b new-feature-branch

4. Make changes to the project's codebase.
5. Commit your changes to your local branch with a clear commit message that explains the changes you've made.

git commit -m 'Implemented new feature.'

6. Push your changes to your forked repository on GitHub using the following command:

git push origin new-feature-branch

7. Create a pull request to the original repository. Open a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary. The project maintainers will review your changes and provide feedback or merge them into the main branch.

---

🪪 License

This project is licensed under the MIT License. See the LICENSE file for additional info.

---

🙏 Acknowledgments

📌 Built by Dzenis H. with 💙 using create-react-app.

Deployed version:

www.dzenis.tech

Achieved a perfect 100% on the Google Lighthouse audit score:

If you like what you see, give it a ⭐

---