├── .eslintrc.json
├── .gitignore
├── README.md
├── app
├── HomePage
│ └── page.jsx
├── TestimonialTooltip
│ └── page.jsx
├── dashboard
│ ├── Left
│ │ └── page.jsx
│ ├── [id]
│ │ └── page.jsx
│ ├── layout.jsx
│ └── page.jsx
├── favicon.ico
├── globals.css
├── layout.js
├── page.js
└── ui
│ └── dashboard
│ └── View
│ └── page.jsx
├── components
└── providers
│ └── Theme.jsx
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── bg.png
├── black.jpeg
├── emo.png
├── font
│ ├── Rubik-Bold.ttf
│ ├── Rubik-ExtraBold.ttf
│ ├── Rubik-Light.ttf
│ ├── Rubik-Medium.ttf
│ └── Rubik-Regular.ttf
├── game.jpg
├── next.svg
├── pic.jpg
├── scult.jpeg
└── vercel.svg
└── tailwind.config.js
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals",
3 | "rules": {
4 | "react/no-unescaped-entities": 0,
5 | "@next/next/no-page-custom-font": "off"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 |
--------------------------------------------------------------------------------
/app/HomePage/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Link from "next/link";
3 | import React from "react";
4 | import { PiCodeThin } from "react-icons/pi";
5 | import { motion, useAnimation } from "framer-motion";
6 | import Image from "next/image";
7 |
8 | function Homepage() {
9 | return (
10 |
35 | I design and code beautifully simple things, and
201 | TypeScript
202 |
31 | Semicolon,{" "}
32 | A Dev Blog
33 |
34 |
{" "}
36 | occasionally i write about them
37 |
57 | Smooth Animation with React and Framer Motion
58 |
59 |
75 | Smooth Animation with React and Framer Motion
76 |
77 |
92 | Smooth Animation with React and Framer Motion
93 |
94 |
107 | Smooth Animation with React and Framer Motion
108 |
109 |
117 | Smooth Animation with React and Framer Motion
118 |
119 |
127 | Smooth Animation with React and Framer Motion
128 |
129 |
149 | Smooth Animation with React and Framer Motion
150 |
151 |
166 | Smooth Animation with React and Framer Motion
167 |
168 |
183 | Smooth Animation with React and Framer Motion
184 |
185 |
197 | Smooth Animation with React and Framer Motion
198 |
199 |
{testimonial.image}
116 |78 | Open to freelancing 79 |
80 |86 | contact@Joscriptbrown.dev 📧 87 |
88 | 89 |90 | JoscriptBrown.com 🌍 91 |
92 | 93 |96 | ReactJS 97 |
98 |99 | Git 100 |
101 |102 | NodeJS 103 |
104 |105 | Framer Motion 106 |
107 |
146 | The world of digital design and
development is constantly
147 | evolving and so
has my role over the last 7 years.{" "}
148 |
Adobe
187 |67 | TypeScript 68 |
69 | 70 | Sunday, July 22, 2023 71 |83 | One of the benefits of using TypeScript is that it significantly 84 | reduces the occurrence of specific bugs, like typos; it even makes 85 | it easier to access prototype methods and perform refactoring. Bugs 86 | caught at compile time make for more uptime, happier customers, and 87 | less on-call stress for developers. 88 |
89 | 90 |91 | With TypeScript, it’s easy to type our application’s business logic 92 | and control flows, but what if we could make our CSS classes safe 93 | too? Having the correct CSS class names in place ensures that the 94 | intended styles are applied to a given component, preventing the 95 | styles from being misplaced due to typography errors. 96 |
97 | 98 |99 | In this article, we’ll discuss what CSS Modules are, explore their 100 | developer experience shortcomings, and learn how to address them by 101 | using automation with TypeScript. Let’s get started! 102 |
103 | 104 |119 | CSS Modules provide an approach to writing modular and scoped CSS 120 | styles in modern web apps. These styles are specific to your 121 | application’s particular component or module. You can write CSS 122 | Modules by using regular CSS. 123 |
124 | 125 |126 | At build time, with Vite or other similar tools, the CSS Modules 127 | generate unique class names for each class defined in the CSS files. 128 | The generated class names are then used in JavaScript to refer to 129 | the CSS, thereby making the CSS modular and reusable without class 130 | name conflicts or unnecessary duplications. 131 |
132 | 133 |138 | If you want to use CSS Modules in your next TypeScript app, you have 139 | several options. Modern build tools like Vite and Snowpack support 140 | CSS Modules out of the box, but you may need to include some minor 141 | configurations if you’re using webpack. Once the build setup is 142 | done, you can add CSS files with the module.css extension following 143 | the CSS Modules convention: 144 |
145 | 146 |151 | CSS Modules are a great tool, but since class names are generated at 152 | runtime and change between builds, it’s hard to use them in a 153 | type-safe way. You could manually create types for each CSS Module 154 | using TypeScript definition files, but updating them is tedious. 155 | Let’s suppose that a class name is added or removed from the CSS 156 | Module. In that case, the types must be manually updated, otherwise, 157 | the type safety won’t work as expected. 158 |
159 | 160 |165 | In this case, the automation solution is straightforward. We’ll 166 | generate the types automatically instead of manually, and we’ll 167 | provide a script to verify that the generated types are up-to-date 168 | to avoid incorrect CSS Module typings leaking into the compilation 169 | step. 170 |
171 | 172 |175 | Working within the TypeScript ecosystem has great potential, but, 176 | when leaning too much on manual processes, it’s easy to blow trust 177 | in the type-system or generate unnecessary friction. CSS Modules are 178 | great, and with a little bit of extra configuration, its easy to add 179 | type safety to the generated classes. You should automate the boring 180 | stuff so that your team can focus on building a great products 181 | instead. I hope you enjoyed this article, and be sure to leave a 182 | comment below if you have questions. Happy coding! 183 |
184 |23 | All features are done and coded by Joscript, please use this template 24 | with free mind, remember to subscribe and share our videos 25 |
26 |
33 | Stop worrying about perfecting
the shadows, just Copy &
34 | Paste
35 | from the 80+ Shadows collection
36 |
3D Games in Reactjs
86 | 89 |