Skip to content

Commit b5cc4dd

Browse files
author
Ammara Yasin
committed
template re-added
1 parent e17666e commit b5cc4dd

21 files changed

+11152
-0
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 hashirshoaeb
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!-- PROJECT LOGO -->
2+
<br />
3+
<p align="center">
4+
<h1 align="center">Developer's Portfolio ✨</h1>
5+
6+
<p align="center">
7+
It is a personal static website/portfolio template hosted with GitHub Pages, built to showcase my recent projects.
8+
<br />
9+
<strong>Site URL / Demo » </strong>
10+
<a href="https://hashirshoaeb.github.io/portfolio"> hashirshoaeb.github.io/portfolio</a>
11+
<br />
12+
<br />
13+
<a href="https://hashirshoaeb.com">About Me</a>
14+
·
15+
<a href="https://github.com/hashirshoaeb/portfolio/issues">Report Bug</a>
16+
·
17+
<a href="https://github.com/hashirshoaeb/portfolio/issues">Request Feature</a>
18+
</p>
19+
</p>
20+
21+
[![GitHub forks](https://img.shields.io/github/forks/hashirshoaeb/portfolio?style=for-the-badge)](https://github.com/hashirshoaeb/portfolio/network)
22+
[![GitHub license](https://img.shields.io/github/license/hashirshoaeb/portfolio?style=for-the-badge)](https://github.com/hashirshoaeb/portfolio/blob/master/LICENSE)
23+
[![Twitter Follow](https://img.shields.io/twitter/follow/hashirshoaeb?color=ffcc66&logo=twitter&logoColor=ffffff&style=for-the-badge)](https://twitter.com/hashirshoaeb)
24+
[![Node Version](https://img.shields.io/static/v1?label=Node&message=16.16.0&color=026e00&style=for-the-badge)](https://nodejs.org)
25+
[![npm Version](https://img.shields.io/static/v1?label=npm&message=8.11.0&color=cb0000&style=for-the-badge)](https://nodejs.org)
26+
27+
28+
<!-- TABLE OF CONTENTS -->
29+
<details>
30+
<summary>Table of Contents</summary>
31+
<ol>
32+
<li>
33+
<a href="#about-the-project">About The Project</a>
34+
</li>
35+
<li>
36+
<a href="#getting-started">Getting Started</a>
37+
<ul>
38+
<li><a href="#prerequisites">Prerequisites</a></li>
39+
<li><a href="#setup">Setup</a></li>
40+
</ul>
41+
</li>
42+
<li><a href="#support-my-work">Support my work</a></li>
43+
<li><a href="#contributing">Contributing</a></li>
44+
<li><a href="#license">License</a></li>
45+
</ol>
46+
</details>
47+
48+
49+
50+
<!-- ABOUT THE PROJECT -->
51+
# About The Project
52+
53+
[![Product Name Screen Shot](/READMEdocs/screenshot.gif)](https://example.com)
54+
55+
There are many portfolio website templates available on Github, however, I didn't find one that really suit my needs so I created this one. A simple, easy to configure, lightweight, and responsive static portfolio website.
56+
57+
I know one template doesn't fulfill everyone's needs. So I'll try adding more features in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue.
58+
59+
**Features**
60+
61+
- [x] Easy to configure
62+
- [x] SEO friendly
63+
- [x] Responsive
64+
- [x] Lightweight
65+
- [x] Linktree Page
66+
67+
**Built with** [Nextjs](https://nextjs.org/) & [Bootstrap5](https://getbootstrap.com).
68+
69+
70+
71+
<!-- GETTING STARTED -->
72+
# Getting Started
73+
74+
Building your own personal website from this project can take as little as 30 minutes. Follow the setup instructions below. Please feel free to reach out to me by filing an [issue](https://github.com/hashirshoaeb/portfolio/issues) or emailing me at hashirshoaeb@gmail.com for help configuring your project.
75+
76+
## Prerequisites
77+
78+
You should have [Nodejs](https://nodejs.org/en/) and [Git](https://git-scm.com/downloads) installed on your PC. You should also own a GitHub account.
79+
80+
## Setup
81+
82+
1. Fork this repoistory and clone it to your local machine.
83+
```sh
84+
git clone https://github.com/<your-username>/portfolio.git
85+
```
86+
87+
2. Edit the [config/config.js](https://github.com/hashirshoaeb/portfolio/blob/main/config/config.js) file. Replace [config/profile.png](https://github.com/hashirshoaeb/portfolio/blob/main/config/profile.png) with your image.
88+
>Note: You need to rename your image file as `profile.png`.
89+
90+
3. Run following scripts in terminal/command prompt to install dependencies.
91+
```sh
92+
npm install
93+
npm run build
94+
```
95+
## Testing
96+
97+
1. To test on your local server, run the following command:
98+
```sh
99+
npm run dev
100+
```
101+
102+
2. Open the browser to http://localhost:3000/
103+
104+
## Deployment
105+
106+
If it works locally, you can deploy your project to GitHub Pages. GitHub Pages provides two types of free domains, `<username>.github.io` and `<username>.github.io/<repository>`. You can choose the one that suits your needs. You can learn more about domain types from [here](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites).
107+
108+
### Deploy to \<your-username>.github.io/portfolio
109+
110+
Simply you just need to commit and push your changes to github. And [GitHub Actions](https://docs.github.com/en/actions/learn-github-actions/introduction-to-github-actions#overview) will take care of the deployment. Your site will be available at `https://<your-username>.github.io/portfolio`
111+
112+
### Deploy to \<your-username>.github.io
113+
114+
Create a new repository with your username as `<your-username>.github.io`. And let the following command do the job for you.
115+
116+
```sh
117+
npm run predeploy
118+
node scripts/pages.js <your-username> master
119+
```
120+
121+
Your site will be available at `https://<your-username>.github.io`
122+
123+
>Note: You need to replace `<your-username>` with your username. To add CNAME for custom domain, see [scripts/cname.js](https://github.com/hashirshoaeb/portfolio/blob/main/scripts/cname.js)
124+
125+
# Support my work
126+
127+
If you found this project valuable, please consider giving it a ⭐️ on GitHub. Your support keeps me motivated! If you'd like to further support my work, you can buy me a book. Thank you for your generosity!
128+
129+
<div>
130+
<a href="https://www.buymeacoffee.com/hashirshoaeb"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a book&emoji=📖&slug=hashirshoaeb&button_colour=5F7FFF&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00" /></a>
131+
</div>
132+
133+
<!-- CONTRIBUTING -->
134+
# Contributing
135+
136+
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contribution you make would be **appreciated**.
137+
138+
1. Fork the Project
139+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
140+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
141+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
142+
5. Open a Pull Request
143+
144+
145+
146+
<!-- LICENSE -->
147+
# License
148+
149+
Distributed under the `MIT` License. See [LICENSE](https://github.com/hashirshoaeb/portfolio/blob/main/LICENSE) for more information.

‎READMEdocs/screenshot.gif

15.9 MB
Loading

‎components/Footer.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import Link from 'next/link'
3+
4+
export const Contact = ({ title, description, buttons }) => {
5+
return (
6+
<div id="contact" className="bg-white py-5 px-5">
7+
<div className="container">
8+
<h1 className="text-primary fw-bold">{title}</h1>
9+
<div className="px-sm-5">
10+
<p>{description}</p>
11+
<div className="">
12+
{buttons.map((value, index) => (
13+
(value.isPrimary) ?
14+
<Link key={index} href={value.link}>
15+
<a className="btn btn-primary my-1 mx-3">
16+
{value.title}
17+
</a>
18+
</Link>
19+
:
20+
<Link key={index} href={value.link}>
21+
<a className="btn btn-outline-primary my-1 mx-3">
22+
{value.title}
23+
</a>
24+
</Link>
25+
))}
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
);
31+
}
32+
33+
export const Footer = () => {
34+
return (
35+
<footer className="bg-secondary text-center py-2 px-5">
36+
<div className="container text-muted">
37+
<small>&copy; 2021 {" "}
38+
<Link href="https://github.com/hashirshoaeb">
39+
<a>hashirshoaeb</a>
40+
</Link>
41+
. Open sourced with love under {" "}
42+
<Link href="https://github.com/hashirshoaeb/portfolio/blob/main/LICENSE">
43+
<a>MIT</a>
44+
</Link>
45+
{" "} License
46+
</small>
47+
</div>
48+
</footer>
49+
);
50+
}

‎components/Header.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Head from 'next/head'
2+
3+
export const Header = ({ seo }) => {
4+
return (
5+
<Head>
6+
<title>{seo.title}</title>
7+
<meta name="description" content={seo.description} />
8+
<meta property="og:title" content={seo.title} />
9+
<meta property="og:description" content={seo.description} />
10+
<meta property="og:image" content={seo.image} />
11+
<meta property="og:type" content="website" />
12+
</Head>
13+
)
14+
}

‎components/Intro.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import getConfig from 'next/config'
3+
import Link from 'next/link'
4+
5+
const { publicRuntimeConfig } = getConfig()
6+
7+
export const Intro = ({ title, description, image, buttons }) => {
8+
return (
9+
<div className="bg-secondary py-5 px-5">
10+
<div className="container">
11+
<div className=" row align-items-center">
12+
<div className="col-sm-6">
13+
<h1 className="text-primary fw-bold display-3">{title}</h1>
14+
<p>{description}</p>
15+
<div className="text-center">
16+
{buttons.map((value, index) => (
17+
(value.isPrimary) ?
18+
<Link key={index} href={value.link}>
19+
<a className="btn btn-primary my-1 mx-3">{value.title}</a>
20+
</Link>
21+
:
22+
<Link key={index} href={value.link}>
23+
<a target="_blank" rel="noreferrer" className="btn btn-outline-primary my-1 mx-3">{value.title}</a>
24+
</Link>
25+
))}
26+
</div>
27+
</div>
28+
<div className="col-sm-6 text-center">
29+
<img
30+
className="img-fluid my-3 card-image" width="250"
31+
height="250" src={image}
32+
alt="profile of hashirshoaeb"
33+
/>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
);
39+
}
40+
41+
export const About = ({ title, description }) => {
42+
return (
43+
<div id="about" className="bg-white py-5 px-5">
44+
<div className="container">
45+
<h1 className="text-primary fw-bold">{title}</h1>
46+
<div className="px-sm-5">
47+
{description.map((value, index) => (
48+
<p key={index} >{value}</p>
49+
))}
50+
</div>
51+
</div>
52+
</div>
53+
);
54+
}

‎components/Navbar.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useEffect, useState } from 'react';
2+
import Link from 'next/link'
3+
4+
export const Nav = ({ title, links }) => {
5+
6+
const [isNavCollapsed, setIsNavCollapsed] = useState(true);
7+
8+
const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
9+
10+
return (
11+
<nav className="navbar navbar-expand-sm navbar-light bg-secondary">
12+
<div className="container">
13+
<Link href="/">
14+
{/* <Image src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" /> */}
15+
<a className="navbar-brand">
16+
<span className="">{title}</span>
17+
</a>
18+
</Link>
19+
<button
20+
className="custom-toggler navbar-toggler"
21+
type="button" data-toggle="collapse"
22+
data-target="#navbarsExample09"
23+
aria-controls="navbarsExample09"
24+
aria-expanded={!isNavCollapsed ? true : false}
25+
aria-label="Toggle navigation"
26+
onClick={handleNavCollapse}
27+
>
28+
<span className="navbar-toggler-icon"></span>
29+
</button>
30+
31+
<div
32+
className={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`}
33+
id="navbarsExample09"
34+
>
35+
<div className="navbar-nav">
36+
{links.map((value, index) => (
37+
<Link key={index} href={value.link} >
38+
<a className="nav-link">{value.title}</a>
39+
</Link>
40+
))}
41+
</div>
42+
</div>
43+
</div>
44+
</nav>
45+
);
46+
}

0 commit comments

Comments
 (0)