Comments (7)
oh, thanks a lot. I have never forked any repo. Guess one more thing learned. pr done. feel free to comment, reject, or anything you see fit
from home.
Sure, I'll test this locally. 🔥
that is terrible code, discard it. i have learned a lot. thank you though
from home.
Hi @xunxdd,
I'm glad to see your version of portfolio. It's really tempting. 😃 I'll probably showcase your version in my readme.
Yess, setting an active tab in navigation bar would be a nice contribution. ✨
Best,
Hashir
from home.
Thanks. @hashirshoaeb . I tried to do a pr, however found that I am not permissioned.
`
const sections = document.querySelectorAll(".target-section");
sections.forEach(function(current) {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 50;
const sectionId = current.getAttribute("id");
const pos = navBottom - scrollPosition;
/* If our current scroll position enters the space where current section
* on screen is, set active section
*/
if (pos > sectionTop && pos <= sectionTop + sectionHeight) {
setActive(sectionId);
} `
I basically add a class to each relevant section and onScroll did the above, it is also done here
https://github.com/xunxdd/portfolio/blob/master/src/components/Navbar.jsx
Though since your menu is light-gray colored, the active menu style is not very obvious, so the pr is probably not necessary anyway
Please let me know if the above is the right approach though. I'd appreciate. Thanks
from home.
hmm, seems like you have not forked this repo.
- fork this repo.
- clone your forked repo into your computer.
- create a branch.
- make changes in that branch.
- push the branch to your forked repo.
- create a pull request.
learn more from, here https://www.neonscience.org/resources/learning-hub/tutorials/version-control-github
Feel free to ping me via email or linkedin, if you face any issues.
Best,
Hashir
from home.
Sure, I'll test this locally. 🔥
from home.
Adding your portfolio link in my Readme.
from home.
Related Issues (20)
- Uneven boxes HOT 1
- Deployment issue HOT 1
- sh: react-scripts: command not found HOT 4
- Make recent projects card height consistent HOT 1
- Add Preview thumbnails to recent projects cards HOT 2
- Add all of your technical skills that you currently know under the skills section HOT 1
- Unable to update the website after a few months of deployment HOT 7
- hi HOT 2
- Failed to compile 'jumbotron', this is depreciated as of bootstrap 5? HOT 4
- [Migration] React 16 -> 18
- error due to build HOT 2
- Primeiro issue
- Migrate to node v18 HOT 1
- Could you please help me with this error? HOT 4
- On the main screen, the particle effect is not visible on the left side. Zoom in to see the error HOT 1
- Fix Auto-Closing of Navbar Menu on Navigation Item Selection
- Migrate to node v20
- Only main page with social icons and resume/blog buttons HOT 1
- Blog section HOT 10
- Education Section missing HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from home.