https://github.com/andrase/port
Dynamic Portfolio Webpage Vanilla JavaScript and CSS
https://github.com/andrase/port
css css-animation-effects embeds event-listeners hammerjs html javascript lazy-loading
Last synced: about 1 year ago
JSON representation
Dynamic Portfolio Webpage Vanilla JavaScript and CSS
- Host: GitHub
- URL: https://github.com/andrase/port
- Owner: AndrasE
- Created: 2022-07-15T18:13:24.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-16T11:14:35.000Z (about 1 year ago)
- Last Synced: 2025-04-03T03:22:52.614Z (about 1 year ago)
- Topics: css, css-animation-effects, embeds, event-listeners, hammerjs, html, javascript, lazy-loading
- Language: EJS
- Homepage: https://andrasegyed.netlify.app/
- Size: 13.1 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Dynamic Portfolio Webpage Vanilla JavaScript and CSS
## Hello there 👋
This webpage showcases my proficiency in crafting dynamic web experiences using only vanilla JavaScript and CSS. While inspired by a YouTube **[tutorial](https://youtu.be/zJE-ze4TfXc)** via **[CrypticalCoder](https://www.youtube.com/@CrypticalCoder)**. I've extensively customized and enhanced the original design to align with my personal vision.
I began by meticulously analyzing the tutorial's code, gaining a deep understanding of its structural and design principles. From there, I tailored the project to my specific requirements, incorporating new elements and features such us "swipe and tap" functionalities with lazy loading.
As the project expanded, I aimed to improve navigation on this single-page site. To achieve this, I organized the website into distinct sections using EJS templates. Netlify then dynamically compiles these templates into a complete HTML file during deployment, ensuring a seamless and efficient browsing experience.
For a more detailed exploration of the project's journey and capabilities, please visit the 'Read More' section at the project page.
### Key Features
- **Lazy Loading** - Optimizes page performance by deferring the loading of non-essential elements until they are needed.
- **Embeds** - The website includes embeds to display external content including Youtube, Codesandbox and Github pages.
- **Swipe Functionality** - Using **[hammer.js](https://hammerjs.github.io/)** can recognize gestures made by touch, mouse and pointerEvents.
- **Custom Animations** - Smooth transitions and effects enhance the overall user experience.
- **Enhanced Functionality** - Additional features and interactions have been added to provide a more engaging experience.
## Run 🚀
### HTML, CSS, and Vanilla JS Setup
To use the plain HTML version of this project, follow these steps:
Clone the repository:
`git clone https://github.com/AndrasE/port`
Navigate to the public folder:
`cd PROJECTNAME/public`
Open index.html in your browser:
`open index.html`
### Running the Project with EJS
Install the project dependencies:
`
$ npm install
`
Install nodemon globally (if not already installed):
`
$ npm install -g nodemon
`
Serve and compile the EJS templates:
`
$ nodemon render-ejs.js
`
The command above will automatically compile your EJS templates and generate an HTML file in the `public` folder.