react-portfolio-website

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

react-portfolio-website

★ 16 Open GitHub ↗

Photograph portfolio-website using react. Content api powered by Cosmic JS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Portfolio Website

![Full](https://github.com/3ndrius/portfolio/blob/master/public/4.jpg?raw=true)

# Proudly powered by [Cosmic JS](https://cosmicjs.com/)
Cosmic JS
Portfolio was created to expirement and demonstrate the Cosmic JS multiple options Backend data is stored, management, and recieved from Cosmic JS.

- ReactJS
- Styled-Components
- HTML
- AdobeXD
- (RWD - mobile, tablet, desktop) / css-grid, media 
- CMS from [Cosmic JS](https://cosmicjs.com/)

<hr/>

### Getting Started / Download

```
git clone https://github.com/3ndrius/portfolio.git
cd portfolio
npm install
```

## Run

```
npm start
```

### Develop

```
After install app, add your own bucket slug to app in
- App
- PartGrid
- Single
- Contact

```

### Run in build react mode

```
npm run build
```

# [DEMO](https://portfolio-cosmic.netlify.com/)
![Desktop](https://github.com/3ndrius/portfolio/blob/master/public/5.jpg?raw=true)
![Tablet](https://github.com/3ndrius/portfolio/blob/master/public/6.jpg?raw=true)
![Mobile](https://github.com/3ndrius/portfolio/blob/master/public/1.jpg?raw=true)

<hr/>

## File structure

```bash
  App.js
│   index.js
│   serviceWorker.js
│
├───components
│   ├───buttons
│   │       Button.js
│   │
│   ├───headers
│   │       H1.js
│   │       H2.js
│   │
│   ├───page
│   │       Contact.js
│   │
│   ├───parts
│   │       Anchor.js
│   │       Caption.js
│   │       Card.js
│   │       CategoryCard.js
│   │       Center.js
│   │       Contain.js
│   │       Figure.js
│   │       Paragraph.js
│   │       PositionContainer.js
│   │
│   └───section
│           Category.js
│           Footer.js
│           Nav.js
│           PartGrid.js
│           Single.js
│           Wrap.js
│
├───font-awesome-4.7.0
│   │   HELP-US-OUT.txt
│   │
│   ├───css
│   │       font-awesome.css
│   │       font-awesome.min.css
│   │
│   ├───fonts
│   │       fontawesome-webfont.eot
│   │       fontawesome-webfont.svg
│   │       fontawesome-webfont.ttf
│   │       fontawesome-webfont.woff
│   │       fontawesome-webfont.woff2
│   │       FontAwesome.otf
│   │
│   ├───less
│   │       animated.less
│   │       bordered-pulled.less
│   │       core.less
│   │       fixed-width.less
│   │       font-awesome.less
│   │       icons.less
│   │       larger.less
│   │       list.less
│   │       mixins.less
│   │       path.less
│   │       rotated-flipped.less
│   │       screen-reader.less
│   │       stacked.less
│   │       variables.less
│   │
│   └───scss
│           font-awesome.scss
│           _animated.scss
│           _bordered-pulled.scss
│           _core.scss
│           _fixed-width.scss
│           _icons.scss
│           _larger.scss
│           _list.scss
│           _mixins.scss
│           _path.scss
│           _rotated-flipped.scss
│           _screen-reader.scss
│           _stacked.scss
│           _variables.scss
│
├───layout
│       Layout.js
│
└───utils
        colors.js
        theme.js
```

<hr/>

### This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

react-portfolio-website

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-portfolio-website

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README