https://github.com/java-s12138/blog

https://github.com/java-s12138/blog

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/java-s12138/blog
• Owner: Java-S12138
• License: mit
• Created: 2023-12-09T15:13:31.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-10T11:43:15.000Z (about 1 year ago)
• Last Synced: 2023-12-10T16:27:47.424Z (about 1 year ago)
• Language: TypeScript
• Size: 2.61 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## SYJUN

[Live Demo](https://syjun.vip/)

[Original Github](https://github.com/ayush013/folio/)

To cater to my goal of having my own portfolio website since 2016 By Ayush🚀

## How did I create this?

1. UI/UX is brainstormed using inspiration from winning portfolios from awwwards. High-fidelity mockup aggregating the ideas using Figma.

2. This project uses React for simplicity to break down sections as components. Also uses next.js to achieve SSG. SVGs have been animated using CSS.

3. Section scrolling and reveal animations uses GSAP. Card interactions use Tilt js. The timeline section was built using JS/SVGs and animated via GSAP.

4. Optimised animations, layer management, repaints, and re-layouts using Chrome dev tools.

## How to run on local?

First, run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## A note on re-sharing

I have been refining the project using 7+ years of my learnings. While I appreciate the beauty of open source, due credits to the project will be appreciated if you plan to re-share the template. Copyright headers with author name should be included under the forked versions as well. Happy coding :)