https://github.com/smolthing/landing-page-landy

https://github.com/smolthing/landing-page-landy

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/smolthing/landing-page-landy
• Owner: smolthing
• Created: 2024-07-28T17:34:49.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-05T13:48:05.000Z (5 months ago)
• Last Synced: 2024-08-05T15:54:25.221Z (5 months ago)
• Language: TypeScript
• Size: 97.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Build your own landing page

## Goal

In this exercise, you will customize your own landing page using the beautiful [Landy template](https://github.com/issaafalkattan/react-landing-page-template-2021). Landy template is built on top of [Create React App](https://create-react-app.dev/).

[Demo Website](https://smolthing.github.io/landing-page-landy/)

## Exercise

1. [Change Colors](https://github.com/smolthing/landing-page-landy/commit/8dee3f7bb0b5fe8b7b7d3ea6715ee6d24bf1ba8a)

 - Replace hardcoded colors with reusable colors.

2. [Adjust Transitions](https://github.com/smolthing/landing-page-landy/commit/adf430015e4110db7bd1881c62fd4853ae9dbc18)

 - Reduce transition distance from [react-awesome-reveal](https://react-awesome-reveal.morello.dev/) library using custom logic.

3. [Move Objects](https://github.com/smolthing/landing-page-landy/commit/859ec5c9bc6ec9cc8cf1ae2c6ce89440c311c19d)

 - Use increments of 5 in position and size for consistency and predictability.

4. [Change Hover States](https://github.com/smolthing/landing-page-landy/commit/6db799f8a4e08b5c53ea2b91fe678f5101dcea5f)

 - Use `cursor: pointer` to indicate clickable object.

5. [Customize Shadows](https://github.com/smolthing/landing-page-landy/commit/d44142a3129bc1d96c769e4ffbf1c78c21b97ff4)

 - Use solid shadow with the darken method from [polished](https://polished.js.org/docs/) library.

6. [Change images](https://github.com/smolthing/landing-page-landy/commit/c25f777bee4445c4c7cddc47d890729fd0a233f7)

 - Replace images in any format. Download free images from [unsplash](https://unsplash.com).

7. [Add scroll transition to images](https://github.com/smolthing/landing-page-landy/commit/2eb7cb558140cae9445d245967a76a43b82489ad)

 - Add scroll transition using CSS from [Wesbos's tutorial](https://www.tiktok.com/@wesbos/video/7393373169416965382).

8. [Deploy Website](https://github.com/smolthing/landing-page-landy/commit/d340c2dde8bde93677603433168bed2de62b8433)

 - Deploy react app using github pages from this awesome [tutorial](https://github.com/gitname/react-gh-pages).

## Getting Started

### `before-landing` folder

This folder contains the initial template and all the necessary files that you will work on.

### `after-landing` folder

This folder contains the completed solution, which you can refer to if needed.

### Running the app

1. Go into `before-landing` folder and run the app. The app runs on http://localhost:3000. Run the commands in the terminal:

```

cd before-landing

npm start

```

2. Make the necessary changes as per the exercise tasks.

3. Compare your work with the files in the `after` folder if you need any guidance or reference.

4. Deploy your website by running the command `npm run deploy`.

## Demo

### Before

![](./images/landy.png)

by [Landy](https://landy-web.netlify.app/)

### After

![](./images/after-landy.gif)

by [smolthing](https://smolthing.github.io/landing-page-landy)

## Contribute

Create a PR to add a gif of your homework.