https://github.com/a7bari/portfolio_template
portfolio Template, ready to use
https://github.com/a7bari/portfolio_template
Last synced: 3 months ago
JSON representation
portfolio Template, ready to use
- Host: GitHub
- URL: https://github.com/a7bari/portfolio_template
- Owner: A7bari
- License: mit
- Created: 2022-03-25T16:11:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-25T18:38:59.000Z (over 3 years ago)
- Last Synced: 2025-04-09T23:10:45.610Z (6 months ago)
- Language: CSS
- Size: 9.66 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Portfolio
## A simple portfolio template
**To view the demo:** [click here](https://ahbari-m.github.io/Portfolio_template/)
## mobile vesion
## Features
- Modern UI Design + Reveal Animations
- One Page Layout
- Styled with Custom CSS
- Fully Responsive
- Valid HTML5 & CSS3
## How To Use
From your command line :
```
# Clone the repository
$ git clone https://github.com/Ahbari-M/Portfolio_template.git
# Move into the repository
$ cd portfolio
# Remove the current origin repository
$ git remote remove origin
```
After that, you can modify the portfolio as you like.
# Template Instructions:
**Go to `/source/index.html` and put your information, there are 5 sections:**
## 0- logo
- in ` `tag, add your logo inside `
`
## 1- HOME section
- put your custom portfolio `title`.
- Put your Social Media URL on each href attribute of the `` tags.
- On `![]()
` tag, fill the src property with your profile picture path, your picture must be located inside `source/src/img/` folder.
```html
HELLO, MY NAME IS JULIA
I am Front-end developer and UI/UX Designer
```
## 2- ABOUT section
- On `![]()
` tag, fill the src property with your profile picture path, your picture must be located inside `source/src/img/` folder.
- put your `description` on `
` tag.
- On last `` tag, include your CV (.pdf) path on href property, your resume CV must be located inside `/source/img/` folder..
```html
ABOUT ME
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad consequatur laudantium optio recusandae mollitia voluptate velit magni autem cupiditate. Aliquid dolorem sit laudantium fuga, autem natus magnam molestias consequuntur, non et accusantium? Quam consequuntur voluptatibus incidunt maiores consectetur harum ab minima, provident commodi distinctio corporis reprehenderit, officia sit deleniti excepturi molestias hic animi eos. Reiciendis facilis at voluptates possimus voluptatem.
My Resume
```
## 3- PROJECTS section
- Each project lives inside a `div template` like :
- each project has `title, description and img`
- the image must be located inside `/source/img/` folder..
**Note :** you can add as many projects as you want as long as you respect the template below.
```html
first project title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste autem velit cumque dignissimos voluptate, sit ipsum atque totam cum doloribus similique, eos libero, natus vero molestias minima nesciunt laborum excepturi minus fuga debitis veritatis dolore iure asperiores? Non dignissimos neque laboriosam est nulla iusto reiciendis fuga maxime, nisi molestiae beatae error! Sequi consectetur vitae necessitatibus ipsum minus molestias mollitia nisi, eos harum unde cumque! Ducimus maxime dicta nisi minima sequi.
```
## 4- SERVICES section
- add icon, title and description for your services
**Note :** you can add as many cards as you want.
```html
SERVICES
first service title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi ipsum cupiditate? In, temporibus dicta quia quae accusantium minus omnis!
sec service title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi ipsum cupiditate? In, temporibus dicta quia quae accusantium minus omnis!
third service title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi ipsum cupiditate? In, temporibus dicta quia quae accusantium minus omnis!
```
## 5- footer
- add content in `
` tag.
- Put your Social Media URL on each href attribute of the `` tags.
- You can delete or add as many`` tags your want.
```html
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est repellat at eaque architecto similique numquam cupiditate!
© copyright 2022 Mohammed AHBARI
```
## image license
the image is taken from : [pexels](https://www.pexels.com/photo/looking-up-woman-wearing-blue-v-neck-top-1674752/)
[license](https://www.pexels.com/license/)