Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dzenis-h/reactiveportfolio
I have a dynamic HTML\ CSS (.scss) \ Vanilla JS portfolio website. 🗿 -This would be the upgraded React version of the same site. ⚛
https://github.com/dzenis-h/reactiveportfolio
css3 es6 es7 express flexbox grid-layout html5 javascript nodejs portfolio react reactjs responsive-design scss styled-components wip
Last synced: about 14 hours ago
JSON representation
I have a dynamic HTML\ CSS (.scss) \ Vanilla JS portfolio website. 🗿 -This would be the upgraded React version of the same site. ⚛
- Host: GitHub
- URL: https://github.com/dzenis-h/reactiveportfolio
- Owner: dzenis-h
- Created: 2019-08-17T03:40:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-02T12:24:15.000Z (over 1 year ago)
- Last Synced: 2023-07-02T13:35:58.342Z (over 1 year ago)
- Topics: css3, es6, es7, express, flexbox, grid-layout, html5, javascript, nodejs, portfolio, react, reactjs, responsive-design, scss, styled-components, wip
- Language: CSS
- Homepage: https://www.dzenis.tech
- Size: 19.3 MB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
reactivePortfolio
📍 GitHub it with reactivePortfolio: Your career, Reactively Powered!
🚀 Developed with the software and tools below.
---
## 📚 Table of Contents
- [📍Overview](#-introdcution)
- [🔮 Features](#-features)
- [⚙️ Project Structure](#project-structure)
- [🧩 Modules](#modules)
- [🏎💨 Getting Started](#-getting-started)
- [🗺 Roadmap](#-roadmap)
- [🤝 Contributing](#-contributing)
- [🪪 License](#-license)
- [🙏 Acknowledgments](#-acknowledgments)
---
## 📍Overview
#### The predecessor of created using HTML5, CSS3, and vanilla JS is also [deployed on gh-pages](https://dzenis-h.github.io/digitalCV). 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
```bash
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:
```sh
git clone https://github.com/dzenis-h/reactivePortfolio
```
2. Change to the project directory:
```sh
cd reactivePortfolio
```
3. Install the dependencies:
```sh
npm install
```
#### The last command runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
### 🤖 Using reactivePortfolio
```sh
npm start.js
```
## 🛠 Future Development
- [X] [📌 CREATE-A-COMPELLING-README-FILE]
- [X] [📌 IMPROVE-THIS-README.md file]
- [X] [📌 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`).
```sh
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.
```sh
git commit -m 'Implemented new feature.'
```
6. Push your changes to your forked repository on GitHub using the following command:
```sh
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](https://docs.google.com/document/d/1vbHFYVpD7ATEBnxBeH3pU5OTmYkd_Whhndb0rSeE5ig/edit?usp=sharing) file for additional info.
---
## 🙏 Acknowledgments
📌 Built by [Dzenis H.](https://www.dzenis.tech) 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 ⭐
---