├── .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 | 24 |
25 |
26 |
27 | 28 | 29 |
30 |

31 | Semicolon,{" "} 32 | A Dev Blog 33 |

34 |

35 | I design and code beautifully simple things, and
{" "} 36 | occasionally i write about them 37 |

38 |
39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 |
47 | 54 |
55 | July 22, 2023 56 |

57 | Smooth Animation with React and Framer Motion 58 |

59 |
60 |
61 |
62 | 63 |
64 |
65 | 72 |
73 | July 22, 2023 74 |

75 | Smooth Animation with React and Framer Motion 76 |

77 |
78 |
79 |
80 |
81 |
82 | 89 |
90 | July 22, 2023 91 |

92 | Smooth Animation with React and Framer Motion 93 |

94 |
95 |
96 |
97 |
98 | 99 | {/* without image */} 100 | 101 |
102 |
103 |
104 |
105 | July 22, 2023 106 |

107 | Smooth Animation with React and Framer Motion 108 |

109 |
110 |
111 |
112 |
113 |
114 |
115 | July 22, 2023 116 |

117 | Smooth Animation with React and Framer Motion 118 |

119 |
120 |
121 |
122 |
123 |
124 |
125 | July 22, 2023 126 |

127 | Smooth Animation with React and Framer Motion 128 |

129 |
130 |
131 |
132 |
133 | 134 | {/* With image */} 135 | 136 |
137 |
138 |
139 | 146 |
147 | July 22, 2023 148 |

149 | Smooth Animation with React and Framer Motion 150 |

151 |
152 |
153 |
154 |
155 |
156 | 163 |
164 | July 22, 2023 165 |

166 | Smooth Animation with React and Framer Motion 167 |

168 |
169 |
170 |
171 |
172 |
173 | 180 |
181 | July 22, 2023 182 |

183 | Smooth Animation with React and Framer Motion 184 |

185 |
186 |
187 |
188 |
189 | 190 | {/* without image */} 191 | 192 |
193 |
194 |
195 |
196 |

197 | Smooth Animation with React and Framer Motion 198 |

199 |
200 |

201 | TypeScript 202 |

203 |
204 | Sunday, July 22, 2023 205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 | 213 | ); 214 | } 215 | 216 | export default Homepage; 217 | -------------------------------------------------------------------------------- /app/TestimonialTooltip/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useState } from "react"; 4 | import { 5 | PiInstagramLogoThin, 6 | PiYoutubeLogoThin, 7 | PiLinkedinLogoThin, 8 | } from "react-icons/pi"; 9 | import { SlFeed } from "react-icons/sl"; 10 | import { LuBox } from "react-icons/lu"; 11 | 12 | import { 13 | motion, 14 | useTransform, 15 | AnimatePresence, 16 | useMotionValue, 17 | useSpring, 18 | } from "framer-motion"; 19 | 20 | function TestimonialTooltip() { 21 | const [hoveredIndex, setHoveredIndex] = useState(); 22 | 23 | const springConfig = { stiffness: 100, damping: 5 }; 24 | 25 | const x = useMotionValue(0); 26 | 27 | const rotate = useSpring( 28 | useTransform(x, [-100, 100], [-45, 45]), 29 | springConfig 30 | ); 31 | 32 | // translate the tooltip 33 | const translateX = useSpring( 34 | useTransform(x, [-100, 100], [-50, 50]), 35 | springConfig 36 | ); 37 | 38 | const people = [ 39 | { 40 | id: 1, 41 | name: "Our Feeds", 42 | position: "www.feed.com", 43 | image: , 44 | }, 45 | { 46 | id: 2, 47 | name: "Instagram", 48 | position: "www.feed.com", 49 | image: , 50 | }, 51 | { 52 | id: 3, 53 | name: "Instagram", 54 | position: "www.instagram.com", 55 | image: , 56 | }, 57 | { 58 | id: 4, 59 | name: "Youtube", 60 | position: "www.youtube.com/joscript", 61 | image: , 62 | }, 63 | { 64 | id: 5, 65 | name: "LinkedIn", 66 | position: "www.Linkedin.com/joscript", 67 | image: , 68 | }, 69 | ]; 70 | 71 | return ( 72 |
77 | {people.map((testimonial, idx) => ( 78 |
setHoveredIndex(testimonial.id)} 82 | onMouseLeave={() => setHoveredIndex(null)} 83 | > 84 | 85 | {hoveredIndex === testimonial.id && ( 86 | 106 |
107 |
108 |
109 | {testimonial.name} 110 |
111 |
{testimonial.position}
112 | 113 | )} 114 | 115 |

{testimonial.image}

116 |
117 | ))} 118 |
119 | ); 120 | } 121 | 122 | export default TestimonialTooltip; 123 | -------------------------------------------------------------------------------- /app/dashboard/Left/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from "react"; 3 | import { 4 | PiBookOpenTextLight, 5 | PiGoogleLogoThin, 6 | PiTwitterLogoLight, 7 | PiMagicWandThin, 8 | PiShapesThin, 9 | PiHouseLight, 10 | } from "react-icons/pi"; 11 | import { SiAdobe } from "react-icons/si"; 12 | 13 | import { motion, useAnimation } from "framer-motion"; 14 | import Link from "next/link"; 15 | import Image from "next/image"; 16 | 17 | function Leftpage() { 18 | const [open, setOpen] = useState(false); 19 | const [email, setEmail] = useState(""); 20 | 21 | const controls = useAnimation(); 22 | 23 | const handleChange = (e) => { 24 | setEmail(e.target.value); 25 | }; 26 | 27 | const isValidEmail = (email) => { 28 | return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); 29 | }; 30 | 31 | const handleSubmit = async (e) => { 32 | e.preventDefault(); 33 | 34 | if (isValidEmail(email)) { 35 | setEmail(""); 36 | } else { 37 | controls.start({ 38 | x: 0, 39 | transition: { 40 | type: "spring", 41 | velocity: "600", 42 | stiffness: "5000", 43 | damping: 15, 44 | }, 45 | }); 46 | } 47 | }; 48 | 49 | return ( 50 |
51 | 60 |
61 |
62 |
63 | 70 |
setOpen(!open)} 72 | className="bg-lime-400 w-3 h-3 cursor-pointer rounded-full absolute top-20 right-28 animate-pulse" 73 | /> 74 | 75 | {open && ( 76 |
77 |

78 | Open to freelancing 79 |

80 |
81 | )} 82 |

83 | Joscript Brown 84 |

85 |

86 | contact@Joscriptbrown.dev 📧 87 |

88 | 89 |

90 | JoscriptBrown.com 🌍 91 |

92 | 93 |
94 |
95 |

96 | ReactJS 97 |

98 |

99 | Git 100 |

101 |

102 | NodeJS 103 |

104 |

105 | Framer Motion 106 |

107 |
108 |
109 |
110 | 111 |
112 | 113 |
114 | 115 |
116 | 117 | 118 |
119 | 120 |
121 |
122 |
123 | 124 |
128 | 135 | 139 | Subscribe 140 | 141 |
142 | 143 |
144 |

Bio

145 |

146 | The world of digital design and
development is constantly 147 | evolving and so
has my role over the last 7 years.{" "} 148 |

149 | 150 |
151 |
152 | 153 | 154 | 7 Years as a Developer 155 | 156 |
157 |
158 | 159 | 24 Projects 160 |
161 |
162 | 163 |
164 | 165 |
166 |

Work History

167 |
168 |
169 | 170 |
171 |

Sr. Developer

172 |

Google

173 |
174 |
175 | 176 | January 2020 - Current 177 | 178 |
179 |
180 |
181 | 182 |
183 |

184 | Jr. Creative Dev 185 |

186 |

Adobe

187 |
188 |
189 | 190 | Sep 2016 - January 2020 191 | 192 |
193 |
194 |
195 |
196 | 197 |
198 | ); 199 | } 200 | 201 | export default Leftpage; 202 | -------------------------------------------------------------------------------- /app/dashboard/[id]/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import React from "react"; 5 | import { PiArrowLeftThin } from "react-icons/pi"; 6 | import { motion, useAnimation } from "framer-motion"; 7 | import Image from "next/image"; 8 | 9 | function page() { 10 | return ( 11 | 25 |
26 |
27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 | 37 | 38 | 41 | 42 |
43 |
44 |
45 |
46 |
47 | 63 | How to write type-safe CSS Modules 64 | 65 |
66 |

67 | TypeScript 68 |

69 |
70 | Sunday, July 22, 2023 71 |
72 | 73 |
74 | 81 | 82 |

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 |
105 | 112 |
113 | 114 |

115 | What are CSS Modules? 116 |

117 | 118 |

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 |

134 | Adding CSS Modules to your project 135 |

136 | 137 |

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 |

147 | Developer experience improvements 148 |

149 | 150 |

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 |

161 | Automatic typings 162 |

163 | 164 |

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 |

Conclusion:

173 | 174 |

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 |
185 |
186 | 187 | ); 188 | } 189 | 190 | export default page; 191 | -------------------------------------------------------------------------------- /app/dashboard/layout.jsx: -------------------------------------------------------------------------------- 1 | import View from "@/app/ui/dashboard/View/page"; 2 | import Left from "@/app/dashboard/Left/page"; 3 | import Theming from "@/components/providers/Theme"; 4 | 5 | export default function RootLayout({ children }) { 6 | return ( 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | {children} 15 | 16 |
17 |
18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /app/dashboard/page.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import HomePage from "@/app/HomePage/page"; 3 | 4 | function Dashboard() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default Dashboard; 13 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @font-face { 6 | font-family: RubikBold; 7 | src: url("../public//font//Rubik-Bold.ttf"); 8 | } 9 | @font-face { 10 | font-family: RubikExtraBold; 11 | src: url("../public//font//Rubik-ExtraBold.ttf"); 12 | } 13 | @font-face { 14 | font-family: RubikLight; 15 | src: url("../public//font//Rubik-Light.ttf"); 16 | } 17 | @font-face { 18 | font-family: RubikMedium; 19 | src: url("../public//font//Rubik-Medium.ttf"); 20 | } 21 | @font-face { 22 | font-family: RubikRegular; 23 | src: url("../public//font//Rubik-Regular.ttf"); 24 | } 25 | 26 | @layer base { 27 | body { 28 | @apply bg-[#171717] transition-all ease-in duration-200; 29 | } 30 | } 31 | 32 | /* @layer utilities { 33 | .animation-delay-2000 { 34 | animation-delay: 2s; 35 | } 36 | .animation-delay-4000 { 37 | animation-delay: 4s; 38 | } 39 | } */ 40 | 41 | .btn-shine { 42 | padding: 12px 0; 43 | padding-right: 7px; 44 | background: linear-gradient(to right, #292929 0, #7d7b7b 10%, #292929 20%); 45 | background-position: 0; 46 | -webkit-background-clip: text; 47 | -webkit-text-fill-color: transparent; 48 | animation: shine 10s infinite linear; 49 | /* animation-delay: 10s; */ 50 | animation-fill-mode: forwards; 51 | -webkit-text-size-adjust: none; 52 | } 53 | 54 | @keyframes shine { 55 | 0% { 56 | background-position: 0; 57 | } 58 | 90% { 59 | background-position: 1080px; 60 | } 61 | 100% { 62 | background-position: 1080px; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /app/layout.js: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | import Theming from "@/components/providers/Theme"; 3 | import Dashboard from "@/app/dashboard/layout"; 4 | 5 | export default function RootLayout({ children }) { 6 | return ( 7 | 8 | 9 | 10 | {/* */} 11 | {children} 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /app/page.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Link from "next/link"; 3 | import { PiHouseLight, PiGithubLogoLight } from "react-icons/pi"; 4 | 5 | function page() { 6 | return ( 7 |
8 |
9 |
10 | 17 |
18 |

19 | JoScript Portfolio 20 |

21 | 22 |

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 |
27 | 28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 |
40 |
41 | ); 42 | } 43 | 44 | export default page; 45 | -------------------------------------------------------------------------------- /app/ui/dashboard/View/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import { PiGithubLogoLight } from "react-icons/pi"; 4 | import { SiCss3, SiFramer } from "react-icons/si"; 5 | 6 | import TestimonialTooltip from "@/app/TestimonialTooltip/page"; 7 | import { motion, useAnimation } from "framer-motion"; 8 | import Image from "next/image"; 9 | 10 | function page() { 11 | return ( 12 | 26 |
27 |
28 |
29 |

30 | 90+ Framer Shadows 31 |

32 |

33 | Stop worrying about perfecting
the shadows, just Copy & 34 | Paste
35 | from the 80+ Shadows collection 36 |

37 | 40 | 41 |
42 | 43 |
44 |

Featured in

45 |
46 |
47 | 48 |
49 |

50 | 9 Essential Javascript
Functions 51 |

52 |
53 |
54 |
55 | 56 |
57 |

58 | How to easily creat React
animations: Framer Motion 59 |

60 |
61 |
62 |
63 | 64 |
65 |

TailwindCSS tips

66 |
67 | 68 |
69 | 70 |
71 | 72 |
73 |
74 |
75 |
76 | 77 |
78 | 85 |

3D Games in Reactjs

86 | 89 |
90 |
91 | 92 | ); 93 | } 94 | 95 | export default page; 96 | -------------------------------------------------------------------------------- /components/providers/Theme.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ThemeProvider } from "next-themes"; 4 | 5 | function Theming({ children }) { 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | export default Theming; 13 | 14 | // create new nextjs project or go to my gitHub and use mine 15 | // install all packages 16 | // don't install these 17 | 18 | // "@editorjs/editorjs": "^2.28.1", X 19 | // "@flaticon/flaticon-uicons": "^ X 20 | 21 | // Like and subscribe 22 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | /* config options here */ 4 | }; 5 | 6 | module.exports = nextConfig; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projects", 3 | "version": "0.0.2", 4 | "private": true, 5 | "scripts": { 6 | "email": "email dev", 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@editorjs/editorjs": "^2.28.1", 14 | "@react-email/button": "0.0.11", 15 | "@react-email/components": "^0.0.6", 16 | "@react-email/html": "0.0.6", 17 | "@tailwindcss/container-queries": "^0.1.1", 18 | "classnames": "^2.3.2", 19 | "framer-motion": "^10.16.4", 20 | "next": "13.5.4", 21 | "next-themes": "^0.2.1", 22 | "react": "^18", 23 | "react-dom": "^18", 24 | "react-email": "^1.9.3", 25 | "react-icons": "^4.11.0", 26 | "resend": "^0.15.3" 27 | }, 28 | "devDependencies": { 29 | "@editorjs/image": "^2.8.1", 30 | "autoprefixer": "^10", 31 | "eslint": "^8", 32 | "eslint-config-next": "13.5.4", 33 | "postcss": "^8", 34 | "tailwindcss": "^3" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/bg.png -------------------------------------------------------------------------------- /public/black.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/black.jpeg -------------------------------------------------------------------------------- /public/emo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/emo.png -------------------------------------------------------------------------------- /public/font/Rubik-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/font/Rubik-Bold.ttf -------------------------------------------------------------------------------- /public/font/Rubik-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/font/Rubik-ExtraBold.ttf -------------------------------------------------------------------------------- /public/font/Rubik-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/font/Rubik-Light.ttf -------------------------------------------------------------------------------- /public/font/Rubik-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/font/Rubik-Medium.ttf -------------------------------------------------------------------------------- /public/font/Rubik-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/font/Rubik-Regular.ttf -------------------------------------------------------------------------------- /public/game.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/game.jpg -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/pic.jpg -------------------------------------------------------------------------------- /public/scult.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Joscriptt/portfolioblog/5ee3e4d9668f253d48c38c834ebe27f254c48d95/public/scult.jpeg -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | // tailwind.config.js 2 | // import { nextui } from "@nextui-org/react"; 3 | 4 | /** @type {import('tailwindcss').Config} */ 5 | module.exports = { 6 | darkMode: "class", 7 | content: [ 8 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 9 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 10 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 11 | ], 12 | 13 | theme: { 14 | extend: { 15 | backgroundImage: { 16 | gradient: 17 | "linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)", 18 | gradientHover: 19 | "linear-gradient(145.37deg, rgba(255, 255, 255, 0.1) -8.75%, rgba(255, 255, 255, 0.057) 83.95%)", 20 | shine: 21 | "linear-gradient(45deg, rgba(255,255,255,0) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%)", 22 | }, 23 | 24 | animation: { 25 | blob: "blob 7s infinite", 26 | }, 27 | 28 | keyframes: { 29 | blob: { 30 | "0%": { 31 | transform: "translate(0px, 0px) scale(1)", 32 | }, 33 | "33%": { 34 | transform: "translate(30px, -50px) scale(1.1)", 35 | }, 36 | "66%": { 37 | transform: "translate(-20px, 20px) scale(0.9)", 38 | }, 39 | "100%": { 40 | transform: "tranlate(0px, 0px) scale(1)", 41 | }, 42 | }, 43 | shinee: { 44 | "0%": { backgroundPosition: "-80%" }, 45 | "100%": { backgroundPosition: "80%" }, 46 | }, 47 | dash: { 48 | "0%": { strokeDashoffset: 1000 }, 49 | "100%": { strokeDashoffset: 0 }, 50 | }, 51 | }, 52 | }, 53 | fontFamily: { 54 | RubikBold: "RubikBold", 55 | RubikExtraBold: "RubikExtraBold", 56 | RubikLight: "RubikLight", 57 | RubikMedium: "RubikMedium", 58 | RubikRegular: "RubikRegular", 59 | }, 60 | }, 61 | 62 | plugins: [require("@tailwindcss/container-queries")], 63 | // plugins: [require("@tailwindcss/container-queries"), nextui()], 64 | }; 65 | --------------------------------------------------------------------------------