This project is based on the original Developer's Portfolio template by hashirshoaeb.
Check out the original repository.
It has been enhanced to include features tailored for researchers, such as research project highlights, updates integration, and more.
Site URL / Demo (Original) »
hashirshoaeb.github.io/portfolio
Report Bug
·
Request Feature
Table of Contents
This portfolio website serves as a personal showcase for projects, research, updates, and achievements. It is lightweight, responsive, and highly customizable.
In this enhanced version, we've added dedicated pages for research and updates, enabling you to document and share your professional journey in detail.
Features
- Easy to configure
- SEO-friendly
- Responsive design
- Lightweight
- Dedicated Research and Updates sections
- Integrated pagination for updates
- Linktree-style page
Advanced Features
- Google Analytics
- Sitemap.xml
- Google Search Console Verification
These features were included to showcase advanced functionality. Forkers should replace configurations (such as the Google Analytics Measurement ID) or remove them if not required (see Notes).
Built with Next.js & Bootstrap 5.
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 by filing an issue or emailing for help configuring your project.
You should have Node.js and Git installed on your PC. You should also own a GitHub account.
-
Fork this repository and clone it to your local machine.
git clone https://github.com/elcarrillo/portfolio.git
-
Edit the configuration files:
- Update the
config/config.js
file to customize profile, projects, research, and updates. - Replace
profile.png
inconfig/profile.png
with your image.
Note: Rename your image file as
profile.png
. - Update the
-
Install dependencies:
npm install npm run build
-
To test on your local server:
npm run dev
-
Open the browser to http://localhost:3000/
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>
. Choose the one that suits your needs.
Simply commit and push your changes to GitHub. GitHub Actions will handle the deployment. Your site will be available at https://<your-username>.github.io/portfolio
.
- Dedicated section to showcase ongoing and completed research projects.
- Support for project images and detailed descriptions.
- Alternating layouts for a modern, dynamic design.
- Chronicle your professional journey with a paginated updates feed.
- Separate featured updates section for highlights.
- Direct links to internal or external resources for more details.
- Easily update content for both Research and Updates sections through the
config/config.js
file. - Images and descriptions for research projects and updates are fully customizable.
If you find this Researcher’s Portfolio Project helpful or inspiring, I would greatly appreciate it if you could ⭐️ the repository on GitHub.
Your support keeps this project alive! Future updates include a dedicated personal page and plans for dark mode integration in the near future.
Thank you for supporting this journey!
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contribution you make would be appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT
License. See LICENSE for more information.
- Replace
<your-username>
with your GitHub username in the instructions. - Update the
config/config.js
file with your personal details and content for the new sections.
- Locate the
Measurement ID
(e.g.,G-LJYYDQTM1K
) in the_app.js
file or configuration. - Remove or comment out the Google Analytics tracking script.
- Delete the
sitemap.xml
file from the project directory if it’s not required. - Optionally, remove any references to the sitemap in the
robots.txt
file (if applicable).
- Since the verification meta tag is included in the
_app.js
file:- Open the
_app.js
file in thepages/
directory. - Locate the meta tag:
<meta name="google-site-verification" content="YOUR_VERIFICATION_CODE" />
- Remove the meta tag or replace
YOUR_VERIFICATION_CODE
with your own Google Search Console verification code. - If you no longer need custom meta tags, reset
_app.js
to its default structure:import '../styles/custom.global.scss' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp
- Open the
- Save the file and redeploy your project.