An interactive and dynamic portfolio website built using HTML and CSS animations, featuring a mobile-first design approach.
This portfolio website is developed using HTML5 and augmented with CSS3 for scroll-triggered animations, ensuring dynamic content presentation. JavaScript is utilized to construct an interactive navigation bar. It's optimized for mobile devices using a mobile-first approach. Future iterations will focus on integrating a parallax scrolling effect
- Node 14.16.0
- VSC code
- JavaScript
- HTML
- CSS
npm run startnpm install
document.addEventListener("scroll", () => {
const navBar = document.querySelector(".navbar");
if (window.scrollY > 0) {
navBar.classList.add("scrolled");
} else {
navBar.classList.remove("scrolled");
}
});@supports (animation-timeline: view()) {
.hero img {
transform-origin: top;
animation: hero-animation linear forwards;
animation-timeline: view();
animation-range: exit -200px;
}
}List of features ready and Todos for future development
- HTML5 and CSS
- CSS Scroll Animations
- JavaScript Navigation
- Mobile-First Design
To-do list:
- Parallax Scrolling Effect
- Accessibility Improvements
- Performance Optimization
Project is: done
CSS animations by Keven Powell
Getting Started
git clone git@github.com:HackYourFutureBelgium/template-markdown.gitcd template-markdownnpm install
npm run format: Makes sure all the code in this repository is well-formatted (looks good).npm run lint:ls: Checks to make sure all folder and file names match the repository conventions.npm run lint:md: Will lint all of the Markdown files in this repository.npm run lint:css: Will lint all of the CSS files in this repository.npm run validate:html: Validates all HTML files in your project.npm run spell-check: Goes through all the files in this repository looking for words it doesn't recognize. Just because it says something is a mistake doesn't mean it is! It doesn't know every word in the world. You can add new correct words to the ./.cspell.json file so they won't cause an error.npm run accessibility -- ./path/to/file.html: Runs an accessibility analysis on all HTML files in the given path and writes the report to/accessibility_report
When you open a PR to main/master in your repository, GitHub will
automatically do a linting check on the code in this repository, you can see
this in the./.github/workflows/lint.yml file.
If the linting fails, you will not be able to merge the PR. You can double check that your code will pass before pushing by running the code quality scripts locally.
- Give each member write access to the repo (if it's a group project)
- Turn on GitHub Pages and put a link to your website in the repo's description
- Go to General Section > check Discussions
- In the Branches section of your repo's settings make sure the
master/mainbranch must:- "Require a pull request before merging"
- "Require approvals"
- "Dismiss stale pull request approvals when new commits are pushed"
- "Require status checks to pass before merging"
- "Require branches to be up to date before merging"
- "Do not allow bypassing the above settings"