https://github.com/mehmet-github06/react-sample-portfolio-app
The project aims to create a Sass Portfolio with Router. For example, the Wednesday series was created.
https://github.com/mehmet-github06/react-sample-portfolio-app
html-css-javascript mock-data react router sass
Last synced: about 1 year ago
JSON representation
The project aims to create a Sass Portfolio with Router. For example, the Wednesday series was created.
- Host: GitHub
- URL: https://github.com/mehmet-github06/react-sample-portfolio-app
- Owner: Mehmet-github06
- Created: 2023-12-20T13:34:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-16T20:45:50.000Z (about 2 years ago)
- Last Synced: 2025-01-16T05:25:35.477Z (about 1 year ago)
- Topics: html-css-javascript, mock-data, react, router, sass
- Language: JavaScript
- Homepage: https://react-potfolio-sass-router.vercel.app
- Size: 15.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Mehmet Doğan
# Portfolio Wednesday
## Description
The project aims to create a Sass Portfolio with Router. For example, the Wednesday series was created.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
006 - Sass Portfolio with React Router (folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── App.js
│ ├── App.scss
│ ├── assets
│ │ └── img
│ ├── components
│ │ ├── Error
│ │ │ ├── NotFound.css
│ │ │ └── NotFound.jsx
│ │ ├── Footer
│ │ │ ├── Footer.jsx
│ │ │ └── Footer.scss
│ │ ├── Navbar
│ │ │ ├── Navbar.jsx
│ │ │ └── Navbar.scss
│ │ └── ProjectCards.jsx
│ ├── helper
│ │ └── imageData.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ ├── about
│ │ │ ├── About.jsx
│ │ │ └── About.scss
│ │ ├── contact
│ │ │ ├── Contact.jsx
│ │ │ └── Contact.scss
│ │ ├── home
│ │ │ ├── Home.jsx
│ │ │ └── Home.scss
│ │ └── projects
│ │ ├── Projects.jsx
│ │ └── Projects.scss
│ ├── router
│ │ └── router.js
│ └── scss
│ ├── _mixins.scss
│ ├── _reset.scss
│ └── _variables.scss
├── package.json
└── yarn.lock
```
## Expected Outcome
## Objective
Build a Sass Portfolio with using ReactJS, react-router and sass.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- SASS
- JS
- ReactJS
### At the end of the project, students will be able to;
- Improve coding skills within HTML & CSS & JS & ReactJS.
- Use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Steps to Solution
- Step 1: Create React App using `npx create-react-app sass-portfolio-router`.
- Step 2: Convert the provided [template](./template) into a React project.
- Step 3: Build Project with using ReactJS, react-router and sass.
- Step 4: Push your application into your own public repo on Github.
- Step 5: Add project gif to your project and README.md file.
- Note: The solution codes will be shared.
## Notes
- You can add additional functionalities and design to your app.
## Demo
**
☺ Happy Coding ✍
**