https://github.com/teotimepacreau/brutalist-portfolio-landing-page-day7-of-100daysofcode

Brutalist portfolio landing page built with Vanilla JS, CSS, HTML
https://github.com/teotimepacreau/brutalist-portfolio-landing-page-day7-of-100daysofcode

animation-css brutalist css designer-website html intersection-observer keyframes portfolio singlepage swissstyle vanillajs vibrantcolors

Last synced: 3 months ago
JSON representation

Brutalist portfolio landing page built with Vanilla JS, CSS, HTML

• Host: GitHub
• URL: https://github.com/teotimepacreau/brutalist-portfolio-landing-page-day7-of-100daysofcode
• Owner: teotimepacreau
• Created: 2023-03-10T07:13:24.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-10T07:19:41.000Z (about 2 years ago)
• Last Synced: 2025-01-15T10:32:46.064Z (5 months ago)
• Topics: animation-css, brutalist, css, designer-website, html, intersection-observer, keyframes, portfolio, singlepage, swissstyle, vanillajs, vibrantcolors
• Language: CSS
• Homepage: https://teotimepacreau.github.io/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode/
• Size: 629 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Brutalist portfolio landing page

![Brutalist portfolio demo](https://github.com/teotimepacreau/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode/blob/main/Brutalist%20portfolio%20landing%20page.gif)

# Project goal

- IntersectionObserver of VanillaJS to rerecreate the scroll trigger without GSAP

- different CSS transition-delay on each line element to give the stagger feel

- CSS translateY, opacity and cubic-bezier transition for smooth effect

- keyframes and position absolute to create the progress bar

# 🛠️

Vanilla JS, CSS, HTML