├── .eslintrc.json ├── .gitignore ├── .xatarc ├── README.md ├── common ├── dummy.js ├── navigation.js ├── signs.js └── utils.js ├── components ├── Cards │ ├── CategoryCard.js │ └── Celebrity.js ├── core │ ├── Autoscroll.js │ ├── Button.js │ └── IconButton.js └── layout │ ├── Footer.js │ ├── Header.js │ ├── Layout.js │ └── Sidebar.js ├── jsconfig.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── about.js ├── api │ └── hello.js ├── born-this-month │ └── index.js ├── categories.js ├── category │ └── [id].js └── index.js ├── postcss.config.js ├── public ├── aquarius.svg ├── aquarius_w.svg ├── arial.svg ├── aries.svg ├── aries_w.svg ├── cancer.svg ├── cancer_w.svg ├── capricorn.svg ├── capricorn_w.svg ├── colby.png ├── favicon copy.ico ├── favicon.ico ├── gemini.svg ├── gemini_w.svg ├── landing-image.png ├── leo.svg ├── leo_w.svg ├── libra.svg ├── libra_w.svg ├── logo.png ├── myProfile.jpg ├── next.svg ├── open-graph.webp ├── pisces.svg ├── pisces_w.svg ├── profile.png ├── sagittarius.svg ├── sagittarius_w.svg ├── scorpio.svg ├── scorpio_w.svg ├── taurus.svg ├── taurus_w.svg ├── thirteen.svg ├── tylerperry.svg ├── vercel copy.svg ├── vercel.svg ├── virgo.svg └── virgo_w.svg ├── styles └── globals.css ├── tailwind.config.js └── utils ├── types.d.ts └── xata.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | 35 | .env 36 | -------------------------------------------------------------------------------- /.xatarc: -------------------------------------------------------------------------------- 1 | { 2 | "databaseURL": "https://Kwesi-Afriyie-s-workspace-3frc7o.us-east-1.xata.sh/db/Iro", 3 | "codegen": { 4 | "output": "utils/xata.js", 5 | "moduleType": "esm", 6 | "declarations": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Introduction 2 | 3 | ![logo](https://res.cloudinary.com/dyt4jkv6w/image/upload/v1673192164/logo_wdyxcg.png) 4 | 5 | Welcome to Iro, the astrology-based motivation platform to help you reach your goals and dreams and stay inspired. 6 | 7 | ![screenshots](https://res.cloudinary.com/dyt4jkv6w/image/upload/v1673191863/Iro-Mockup_tkvbam.webp) 8 | 9 | Do you find it hard to know the zodiac sign of your favourite superstar or their birthdate and where they were born? Surf through superstars, celebrities, footballers, musicians, leaders, actors, etc., categorised by their zodiac signs 10 | 11 | Iro Official Website [Iro](https://iro-ecru.vercel.app/) 12 | 13 | ## Usage 14 | 15 | Discover the power of astrology and your zodiac sign with Iro, the ultimate motivation platform. With a wide range of categories to choose from, you'll find inspiration and motivation explicitly tailored to you. 16 | 17 | Explore the traits and characteristics associated with your astrological sign, and let Iro guide you on the path to success. 18 | 19 | Each day, you'll receive motivation and inspiration from the heroes of your astrological sign, as well as practical advice and guidance on achieving your goals. Plus, with our powerful goal-setting and tracking tools, you'll be able to stay on track and measure your progress along the way. 20 | 21 | **(Feature coming soon)** 22 | 23 | ## Tools I Used 24 | 25 | - ### Vercel 26 | 27 | Vercel is the platform for front-end developers, providing the speed and reliability innovators need to create at the moment of inspiration. 28 | 29 | [vercel.com](https://vercel.com/) 30 | 31 | - ### Xata 32 | 33 | Xata is a serverless database that comes with **frictionless developer experience**, a **spreadsheet-like UI**, and **built-in search**. 34 | 35 | ![screenshots](https://res.cloudinary.com/dyt4jkv6w/image/upload/v1673192977/Xata_Mockup_jqofjp.png) 36 | 37 | I wanted to build a scalable and reliable platform that could handle many users and provide on-demand personalised astrological data and inspiration. To achieve this, I turned to Xata, a serverless database platform that offers many features, such as a Relational database, Branch & Migration, Powerful search and Fast analytics. 38 | 39 | Using Xata free tier allowed me to build Iro confidently, knowing that my platform could handle many users and provide personalised data and inspiration on demand. I recommend Xata to anyone looking to build a serverless, scalable, and reliable database platform for their application. 40 | 41 | [xata.com](https://xata.io/docs/intro/getting-started) 42 | 43 | ## Roadmap 44 | 45 | - [x] Complete design 46 | - [x] Responsive design 47 | - [x] Setup Xata 48 | - [x] Setup Cloudinary 49 | - [x] Add 100 database 50 | - [x] Open Graph 51 | - [x] README 52 | 53 | ## Upcoming Features 54 | 55 | - [ ] User profile 56 | - [ ] Personalised motivation 57 | - [ ] Daily Motivation 58 | - [ ] Searching functionality 59 | - [ ] Add 1000 database 60 | - [ ] Goal tracker 61 | - [ ] Dark mode 62 | - [ ] Daily Horoscope Message 63 | - [ ] Zodiac Statistics 64 | 65 | ## Tech Stack 66 | 67 | 1. Nextjs 68 | 2. Tailwindcss 69 | 3. Javascript 70 | 71 | ## Contribution 72 | 73 | Opensource is the future, and you are welcome if you have any ideas to make this project successful. Whether you know your zodiac sign or not, all contributions are accepted. 74 | 75 | ## Need Help 76 | 77 | I spent countless hours researching and making all these data entries into the database. If you have an idea on how to do this fast or automate these processes, kindly contribute 78 | 79 | ## Licence 80 | 81 | The MIT License (MIT) 82 | Copyright (c) Iro 83 | -------------------------------------------------------------------------------- /common/dummy.js: -------------------------------------------------------------------------------- 1 | export const dummyCelebrities = [ 2 | { 3 | id: "shawn-carter-id", 4 | name: "Shawn Carter", 5 | imgURL: "/tylerperry.svg", 6 | birth_date: new Date().toISOString(), 7 | birth_place: "Brooklyn, New York, USA", 8 | status: "alive", 9 | age: 52, 10 | sign: "Capricorn", 11 | brief: 12 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 13 | }, 14 | { 15 | id: "terry-perry-id", 16 | name: "Terry Perry", 17 | imgURL: "/tylerperry.svg", 18 | birth_date: new Date().toISOString(), 19 | birth_place: "New Orleans, Louisiana, USA", 20 | status: "alive", 21 | age: 53, 22 | sign: "Virgo", 23 | brief: 24 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 25 | }, 26 | { 27 | id: "kobe-bryant-id", 28 | name: "Kobe Bryant", 29 | imgURL: "/tylerperry.svg", 30 | birth_date: new Date().toISOString(), 31 | birth_place: "Philadelphia, Pennsylvania, USA", 32 | status: "dead", 33 | age: 55, 34 | sign: "Leo", 35 | brief: 36 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 37 | }, 38 | { 39 | id: "tupac-shakur", 40 | name: "Tupac Shakur", 41 | imgURL: "/tylerperry.svg", 42 | birth_date: new Date().toISOString(), 43 | birth_place: "Brooklyn, New York, USA", 44 | status: "dead", 45 | age: 52, 46 | sign: "Capricorn", 47 | brief: 48 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 49 | }, 50 | { 51 | id: "barack-obama", 52 | name: "Barack Obama", 53 | imgURL: "/tylerperry.svg", 54 | birth_date: new Date().toISOString(), 55 | birth_place: "Brooklyn, New York, USA", 56 | status: "Alive", 57 | age: 53, 58 | sign: "Virgo", 59 | brief: 60 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 61 | }, 62 | { 63 | id: "bob-marley", 64 | name: "Bob Marley", 65 | imgURL: "/tylerperry.svg", 66 | birth_date: new Date().toISOString(), 67 | birth_place: "Brooklyn, New York, USA", 68 | status: "dead", 69 | age: 55, 70 | sign: "Leo", 71 | brief: 72 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 73 | }, 74 | { 75 | id: "may-weather", 76 | name: "May Weather", 77 | imgURL: "/tylerperry.svg", 78 | birth_date: new Date().toISOString(), 79 | birth_place: "Brooklyn, New York, USA", 80 | status: "Alive", 81 | age: 52, 82 | sign: "Capricorn", 83 | brief: 84 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 85 | }, 86 | { 87 | id: "kevin-hart", 88 | name: "Kevin Hart", 89 | imgURL: "/tylerperry.svg", 90 | birth_date: new Date().toISOString(), 91 | birth_place: "Brooklyn, New York, USA", 92 | status: "Alive", 93 | age: 53, 94 | sign: "Virgo", 95 | brief: 96 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 97 | }, 98 | { 99 | id: "lebron-james", 100 | name: "Lebron James", 101 | imgURL: "/tylerperry.svg", 102 | birth_date: new Date().toISOString(), 103 | birth_place: "Brooklyn, New York, USA", 104 | status: "Alive", 105 | age: 55, 106 | sign: "Leo", 107 | brief: 108 | "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit mollitia, porro rem unde rerum temporibus odio autem quidem sed, voluptatum iure voluptatibus, natus assumenda quae! Architecto repellendus sunt tenetur velit.", 109 | }, 110 | ]; 111 | 112 | export const categories = [ 113 | { 114 | id: 1, 115 | name: "Pisces", 116 | label: "Pisces", 117 | path: "/pisces_w.svg", 118 | }, 119 | { 120 | id: 2, 121 | name: "Capricorn", 122 | label: "Capricorn", 123 | path: "/capricorn_w.svg", 124 | }, 125 | { 126 | id: 3, 127 | name: "Leo", 128 | label: "Leo", 129 | path: "/leo_w.svg", 130 | }, 131 | { 132 | id: 4, 133 | name: "Aquarius", 134 | label: "Aquarius", 135 | path: "/aquarius_w.svg", 136 | }, 137 | { 138 | id: 5, 139 | name: "Gemini", 140 | label: "Gemini", 141 | path: "/gemini_w.svg", 142 | }, 143 | { 144 | id: 6, 145 | label: "Taurus", 146 | name: "Taurus", 147 | path: "/taurus_w.svg", 148 | }, 149 | { 150 | id: 7, 151 | name: "Aries", 152 | label: "Aries", 153 | path: "/aries_w.svg", 154 | }, 155 | { 156 | id: 8, 157 | name: "Scorpio", 158 | label: "Scorpio", 159 | path: "/scorpio_w.svg", 160 | }, 161 | { 162 | id: 9, 163 | label: "Libra", 164 | name: "Libra", 165 | path: "/libra_w.svg", 166 | }, 167 | { 168 | id: 10, 169 | name: "Sagittarius", 170 | label: "Sagittarius", 171 | path: "/sagittarius_w.svg", 172 | }, 173 | { 174 | id: 11, 175 | name: "Cancer", 176 | label: "Cancer", 177 | path: "/cancer_w.svg", 178 | }, 179 | { 180 | id: 12, 181 | label: "Virgo", 182 | name: "Virgo", 183 | path: "/virgo_w.svg", 184 | }, 185 | ]; 186 | 187 | export const heroCategories = [ 188 | { 189 | id: 1, 190 | name: "Pisces", 191 | label: "Pisces", 192 | path: "/pisces_w.svg", 193 | }, 194 | { 195 | id: 2, 196 | name: "Capricorn", 197 | label: "Capricorn", 198 | path: "/capricorn_w.svg", 199 | }, 200 | { 201 | id: 3, 202 | name: "Leo", 203 | label: "Leo", 204 | path: "/leo_w.svg", 205 | }, 206 | { 207 | id: 4, 208 | name: "Aries", 209 | label: "Aries", 210 | path: "/aries_w.svg", 211 | }, 212 | { 213 | id: 5, 214 | name: "Scorpio", 215 | label: "Scorpio", 216 | path: "/scorpio_w.svg", 217 | }, 218 | { 219 | id: 6, 220 | label: "Libra", 221 | name: "Libra", 222 | path: "/libra_w.svg", 223 | }, 224 | ]; 225 | 226 | export const portfolioCategories = [ 227 | { 228 | id: 1, 229 | label: "FE Developer", 230 | name: "Pisces", 231 | path: "/capricorn_w.svg", 232 | }, 233 | { 234 | id: 2, 235 | label: "Typescript", 236 | name: "Capricorn", 237 | path: "/capricorn_w.svg", 238 | }, 239 | { 240 | id: 3, 241 | name: "Leo", 242 | label: "Team Player", 243 | path: "/capricorn_w.svg", 244 | }, 245 | { 246 | id: 4, 247 | name: "Aries", 248 | label: "Opensource", 249 | path: "/capricorn_w.svg", 250 | }, 251 | { 252 | id: 5, 253 | name: "Scorpio", 254 | label: "Javascript", 255 | path: "/capricorn_w.svg", 256 | }, 257 | { 258 | id: 6, 259 | name: "Libra", 260 | label: "Community", 261 | path: "/capricorn_w.svg", 262 | }, 263 | ]; 264 | 265 | export const aims = [ 266 | { 267 | id: 1, 268 | label: "Inspiration", 269 | name: "Pisces", 270 | path: "/pisces_w.svg", 271 | }, 272 | { 273 | id: 2, 274 | label: "Idea", 275 | name: "Capricorn", 276 | path: "/capricorn_w.svg", 277 | }, 278 | { 279 | id: 3, 280 | name: "Leo", 281 | label: "Learn", 282 | path: "/leo_w.svg", 283 | }, 284 | { 285 | id: 4, 286 | name: "Aries", 287 | label: "Colaboration", 288 | path: "/aries_w.svg", 289 | }, 290 | { 291 | id: 5, 292 | name: "Scorpio", 293 | label: "Exploration", 294 | path: "/scorpio_w.svg", 295 | }, 296 | { 297 | id: 6, 298 | name: "Libra", 299 | label: "Creativity", 300 | path: "/libra_w.svg", 301 | }, 302 | ]; 303 | 304 | export const characteristics = [ 305 | { 306 | id: 1, 307 | label: "Inspiration", 308 | name: "Pisces", 309 | path: "/aries_w.svg", 310 | }, 311 | { 312 | id: 2, 313 | label: "Motivation", 314 | name: "Capricorn", 315 | path: "/aries_w.svg", 316 | }, 317 | { 318 | id: 3, 319 | name: "Leo", 320 | label: "Leader", 321 | path: "/aries_w.svg", 322 | }, 323 | { 324 | id: 4, 325 | name: "Arial", 326 | label: "Perception", 327 | path: "/aries_w.svg", 328 | }, 329 | { 330 | id: 5, 331 | name: "Scorpio", 332 | label: "Special", 333 | path: "/aries_w.svg", 334 | }, 335 | { 336 | id: 6, 337 | name: "Libra", 338 | label: "Freedom", 339 | path: "/aries_w.svg", 340 | }, 341 | ]; 342 | 343 | export const months = [ 344 | "January", 345 | "Feburary", 346 | "March", 347 | "April", 348 | "May", 349 | "June", 350 | "July", 351 | "August", 352 | "September", 353 | "October", 354 | "November", 355 | "December", 356 | ]; 357 | 358 | export const categoryData = [ 359 | { 360 | id: "Taurus", 361 | subheading: 362 | "The element associated with Taurus is earth, which is thought to contribute to the sign's practical and grounded nature. Taurus is associated with love, beauty, and money.", 363 | traits: [ 364 | "Taurus is known for being reliable and dependable.", 365 | "Taurus is very much in touch with their senses, and they enjoy indulging in pleasure. They appreciate the finer things in life and enjoy comfortable surroundings", 366 | "Taurus is known for being very persistent and determined. They are not easily swayed and will see projects through to the end", 367 | "Taurus is a convenient sign, and they are known for being down-to-earth.", 368 | ], 369 | words: [ 370 | { 371 | id: 1, 372 | label: "Practical", 373 | name: "Pisces", 374 | path: "/taurus_w.svg", 375 | }, 376 | { 377 | id: 2, 378 | label: "Resourceful", 379 | name: "Capricorn", 380 | path: "/taurus_w.svg", 381 | }, 382 | { 383 | id: 3, 384 | name: "Leo", 385 | label: "Loyal", 386 | path: "/taurus_w.svg", 387 | }, 388 | { 389 | id: 4, 390 | name: "Aries", 391 | label: "Persistent", 392 | path: "/taurus_w.svg", 393 | }, 394 | { 395 | id: 5, 396 | name: "Scorpio", 397 | label: "Patient", 398 | path: "/taurus_w.svg", 399 | }, 400 | { 401 | id: 6, 402 | name: "Libra", 403 | label: "Dependable", 404 | path: "/taurus_w.svg", 405 | }, 406 | ], 407 | }, 408 | { 409 | id: "Leo", 410 | subheading: 411 | "People born under the sign of Leo are thought to be confident, ambitious, and energetic, with a strong sense of personal pride and a desire for recognition and attention.", 412 | traits: [ 413 | "They have a natural charm and can easily win people over with their warm and friendly demeanour.", 414 | "Leo is a very passionate sign; they have a strong zest for life. They are driven by their emotions and are not afraid to show them.", 415 | "Leo is a very generous sign, and they are known for their open-heartedness.", 416 | "Leo is a very sure sign; they are fearless in taking the lead. They have a strong sense of self and are not easily swayed by others.", 417 | ], 418 | words: [ 419 | { 420 | id: 1, 421 | label: "Confident", 422 | name: "Pisces", 423 | path: "/leo_w.svg", 424 | }, 425 | { 426 | id: 2, 427 | label: "Charismatic", 428 | name: "Capricorn", 429 | path: "/leo_w.svg", 430 | }, 431 | { 432 | id: 3, 433 | name: "Leo", 434 | label: "Creative", 435 | path: "/leo_w.svg", 436 | }, 437 | { 438 | id: 4, 439 | name: "Aries", 440 | label: "Ambitious", 441 | path: "/leo_w.svg", 442 | }, 443 | { 444 | id: 5, 445 | name: "Scorpio", 446 | label: "Generous", 447 | path: "/leo_w.svg", 448 | }, 449 | { 450 | id: 6, 451 | name: "Libra", 452 | label: "Leader", 453 | path: "/leo_w.svg", 454 | }, 455 | ], 456 | }, 457 | { 458 | id: "Libra", 459 | subheading: 460 | "Libra’s known for their charm, wit, and ability to see both sides of an argument, as well as their love of beauty and art. Libra is associated with love, beauty, and harmony.", 461 | traits: [ 462 | "Libra is a very cooperative sign, and they value teamwork and collaboration.", 463 | "Libra is a very fair-minded sign, and they can consider all sides of an issue before making a decision.", 464 | "They are often the centre of attention and enjoy socialising.", 465 | "Libra values balance and harmony, and they often strive to create these qualities in their own lives.", 466 | ], 467 | words: [ 468 | { 469 | id: 1, 470 | label: "Diplomatic", 471 | name: "Pisces", 472 | path: "/libra_w.svg", 473 | }, 474 | { 475 | id: 2, 476 | label: "Charming", 477 | name: "Capricorn", 478 | path: "/libra_w.svg", 479 | }, 480 | { 481 | id: 3, 482 | name: "Leo", 483 | label: "Balanced", 484 | path: "/libra_w.svg", 485 | }, 486 | { 487 | id: 4, 488 | name: "Aries", 489 | label: "Fair", 490 | path: "/libra_w.svg", 491 | }, 492 | { 493 | id: 5, 494 | name: "Scorpio", 495 | label: "Cooperative", 496 | path: "/libra_w.svg", 497 | }, 498 | { 499 | id: 6, 500 | name: "Libra", 501 | label: "Dependable", 502 | path: "/libra_w.svg", 503 | }, 504 | ], 505 | }, 506 | { 507 | id: "Aries", 508 | subheading: 509 | "Aries is a passionate, motivated, and confident leader who builds community with their cheerful disposition and relentless determination.", 510 | traits: [ 511 | "Aries is a convenient sign and for being down-to-earth", 512 | "They are confident in their convictions and are not afraid to take risks to pursue their goals.", 513 | "Aries value their independence and are not afraid to go against the grain. They are strong-willed and do not like to be controlled by others.", 514 | "Aries are a very sure sign; they are not afraid to take risks or try new things. They have a strong sense of self and are not easily swayed by others.", 515 | ], 516 | words: [ 517 | { 518 | id: 1, 519 | label: "Energetic", 520 | name: "Pisces", 521 | path: "/aries_w.svg", 522 | }, 523 | { 524 | id: 2, 525 | label: "Bold", 526 | name: "Capricorn", 527 | path: "/aries_w.svg", 528 | }, 529 | { 530 | id: 3, 531 | name: "Leo", 532 | label: "Adventurous", 533 | path: "/aries_w.svg", 534 | }, 535 | { 536 | id: 4, 537 | name: "Aries", 538 | label: "Confident", 539 | path: "/aries_w.svg", 540 | }, 541 | { 542 | id: 5, 543 | name: "Scorpio", 544 | label: "Passionate", 545 | path: "/aries_w.svg", 546 | }, 547 | { 548 | id: 6, 549 | name: "Libra", 550 | label: "Impulsive", 551 | path: "/aries_w.svg", 552 | }, 553 | ], 554 | }, 555 | { 556 | id: "Aquarius", 557 | subheading: 558 | "Aquarius are known for their creativity, inventiveness, and originality, as well as their ability to see things from a different perspective. Aquarius is associated with change, innovation, and progress.", 559 | traits: [ 560 | "Aquarius is a very quirky sign and is known for being slightly unconventional. They march to the beat of their drum and are not afraid to be themselves.", 561 | "Aquarius values their independence, and they are not afraid to go against the grain.", 562 | "They are open-minded and embrace new ideas and ways of thinking.", 563 | "They have warm and open personalities and are often well-liked by those around them.", 564 | ], 565 | words: [ 566 | { 567 | id: 1, 568 | label: "Innovative", 569 | name: "Pisces", 570 | path: "/aquarius_w.svg", 571 | }, 572 | { 573 | id: 2, 574 | label: "Quirky", 575 | name: "Capricorn", 576 | path: "/aquarius_w.svg", 577 | }, 578 | { 579 | id: 3, 580 | name: "Leo", 581 | label: "intellectual", 582 | path: "/aquarius_w.svg", 583 | }, 584 | { 585 | id: 4, 586 | name: "Aries", 587 | label: "Progressive", 588 | path: "/aquarius_w.svg", 589 | }, 590 | { 591 | id: 5, 592 | name: "Scorpio", 593 | label: "Independent", 594 | path: "/aquarius_w.svg", 595 | }, 596 | { 597 | id: 6, 598 | name: "Libra", 599 | label: "Humanitarian", 600 | path: "/aquarius_w.svg", 601 | }, 602 | ], 603 | }, 604 | { 605 | id: "Cancer", 606 | subheading: 607 | " People born under the sign of Cancer are thought to be emotional, intuitive, and nurturing. They are also known for their tenacity, loyalty, and determination", 608 | traits: [ 609 | "Cancer is a compassionate sign, and they are easily affected by their surroundings and the emotions of others.", 610 | "Cancer is a very intuitive sign, and they have a strong sense of perception.", 611 | "Cancer is a very loyal sign, and they value their relationships deeply.", 612 | "They are often fiercely loyal to those they love and will go out of their way to defend and support them.", 613 | ], 614 | words: [ 615 | { 616 | id: 1, 617 | label: "Emotional", 618 | name: "Pisces", 619 | path: "/cancer_w.svg", 620 | }, 621 | { 622 | id: 2, 623 | label: "intuitive", 624 | name: "Capricorn", 625 | path: "/cancer_w.svg", 626 | }, 627 | { 628 | id: 3, 629 | name: "Leo", 630 | label: "sensitive", 631 | path: "/cancer_w.svg", 632 | }, 633 | { 634 | id: 4, 635 | name: "Aries", 636 | label: "protective", 637 | path: "/cancer_w.svg", 638 | }, 639 | { 640 | id: 5, 641 | name: "Scorpio", 642 | label: "loyal", 643 | path: "/cancer_w.svg", 644 | }, 645 | { 646 | id: 6, 647 | name: "Libra", 648 | label: "creative", 649 | path: "/cancer_w.svg", 650 | }, 651 | ], 652 | }, 653 | { 654 | id: "Gemini", 655 | subheading: 656 | "They are also known for their versatility, communication skills, and ability to see both sides of an issue. Gemini is associated with communication, commerce, and transportation.", 657 | traits: [ 658 | "Gemini is a brilliant sign, and they have a quick mind and a love of learning.", 659 | "Gemini is a very adaptable sign and they can go with the flow and adjust quickly to new situations.", 660 | "They can express themselves clearly and are skilled at conveying their thoughts and ideas.", 661 | "They enjoy exploring and learning about the world and constantly seek new experiences.", 662 | ], 663 | words: [ 664 | { 665 | id: 1, 666 | label: "Curious", 667 | name: "Pisces", 668 | path: "/gemini_w.svg", 669 | }, 670 | { 671 | id: 2, 672 | label: "Witty", 673 | name: "Capricorn", 674 | path: "/gemini_w.svg", 675 | }, 676 | { 677 | id: 3, 678 | name: "Leo", 679 | label: "Youthful", 680 | path: "/gemini_w.svg", 681 | }, 682 | { 683 | id: 4, 684 | name: "Aries", 685 | label: "Adaptable", 686 | path: "/gemini_w.svg", 687 | }, 688 | { 689 | id: 5, 690 | name: "Scorpio", 691 | label: "Intellectual", 692 | path: "/gemini_w.svg", 693 | }, 694 | { 695 | id: 6, 696 | name: "Libra", 697 | label: "Communicative", 698 | path: "/gemini_w.svg", 699 | }, 700 | ], 701 | }, 702 | { 703 | id: "Sagittarius", 704 | subheading: 705 | "Sagittarius are known for their honesty, wisdom, and sense of humor, as well as their tendency to be blunt and direct. Sagittarius is associated with expansion, good fortune, and higher learning.", 706 | traits: [ 707 | "Sagittarius is a very philosophical sign; they enjoy contemplating the more important questions in life.", 708 | "Sagittarius is a very intellectual sign, and they have a love of learning. They are curious and enjoy exploring new ideas and concepts.", 709 | "They are not afraid to speak their mind and will always tell it like it is.", 710 | "They have a strong sense of self and are not easily swayed by others.", 711 | ], 712 | words: [ 713 | { 714 | id: 1, 715 | label: "Optimistic", 716 | name: "Pisces", 717 | path: "/sagittarius_w.svg", 718 | }, 719 | { 720 | id: 2, 721 | label: "adventurous", 722 | name: "Capricorn", 723 | path: "/sagittarius_w.svg", 724 | }, 725 | { 726 | id: 3, 727 | name: "Leo", 728 | label: "Independent", 729 | path: "/sagittarius_w.svg", 730 | }, 731 | { 732 | id: 4, 733 | name: "Aries", 734 | label: "Curious", 735 | path: "/sagittarius_w.svg", 736 | }, 737 | { 738 | id: 5, 739 | name: "Scorpio", 740 | label: "Enthusiastic", 741 | path: "/sagittarius_w.svg", 742 | }, 743 | { 744 | id: 6, 745 | name: "Libra", 746 | label: "Loving", 747 | path: "/sagittarius_w.svg", 748 | }, 749 | ], 750 | }, 751 | { 752 | id: "Pisces", 753 | subheading: 754 | "People born under the sign of Pisces are thought to be emotional, intuitive, and compassionate, with a strong connection to the spiritual world and a love of art and music.", 755 | traits: [ 756 | "Pisces is a very adaptable sign; they can go with the flow and adjust easily to new situations.", 757 | "Pisces is a very compassionate sign, and they are often drawn to helping others.", 758 | "They have strong emotional intelligence and can be very in tune with their feelings.", 759 | "They often enjoy artistic pursuits and can be very imaginative.", 760 | ], 761 | words: [ 762 | { 763 | id: 1, 764 | label: "Intuitive", 765 | name: "Pisces", 766 | path: "/pisces_w.svg", 767 | }, 768 | { 769 | id: 2, 770 | label: "emotional", 771 | name: "Capricorn", 772 | path: "/pisces_w.svg", 773 | }, 774 | { 775 | id: 3, 776 | name: "Leo", 777 | label: "artistic", 778 | path: "/pisces_w.svg", 779 | }, 780 | { 781 | id: 4, 782 | name: "Aries", 783 | label: "sensitive", 784 | path: "/pisces_w.svg", 785 | }, 786 | { 787 | id: 5, 788 | name: "Scorpio", 789 | label: "compassionate", 790 | path: "/pisces_w.svg", 791 | }, 792 | { 793 | id: 6, 794 | name: "Libra", 795 | label: "adaptable", 796 | path: "/pisces_w.svg", 797 | }, 798 | ], 799 | }, 800 | { 801 | id: "Capricorn", 802 | subheading: 803 | "People born under the sign of Capricorn are thought to be ambitious, disciplined, and practical, with a strong sense of responsibility and a desire for success and status.", 804 | traits: [ 805 | "Capricorn is a very ambitious sign, and they are driven to succeed.", 806 | "They are not prone to flights of fancy and prefer to focus on practical matters.", 807 | "Capricorn is a very responsible sign, and they take their obligations seriously.", 808 | "They have a strong sense of respect for the rules and norms of society and are often seen as very traditional.", 809 | ], 810 | words: [ 811 | { 812 | id: 1, 813 | label: "ambitious", 814 | name: "Pisces", 815 | path: "/capricorn_w.svg", 816 | }, 817 | { 818 | id: 2, 819 | label: "responsible", 820 | name: "Capricorn", 821 | path: "/capricorn_w.svg", 822 | }, 823 | { 824 | id: 3, 825 | name: "Leo", 826 | label: "Hardworking", 827 | path: "/capricorn_w.svg", 828 | }, 829 | { 830 | id: 4, 831 | name: "Aries", 832 | label: "Patient", 833 | path: "/capricorn_w.svg", 834 | }, 835 | { 836 | id: 5, 837 | name: "Scorpio", 838 | label: "Practical", 839 | path: "/capricorn_w.svg", 840 | }, 841 | { 842 | id: 6, 843 | name: "Libra", 844 | label: "Reliable", 845 | path: "/capricorn_w.svg", 846 | }, 847 | ], 848 | }, 849 | { 850 | id: "Scorpio", 851 | subheading: 852 | "People born under the sign of Scorpio are thought to be intense, passionate, and resourceful, with a strong will and a desire for control and power.They are also known for their secrecy, depth of emotion, and investigative abilities", 853 | traits: [ 854 | "Scorpio is a very private sign, and they value their privacy.", 855 | "Scorpio is a very resourceful sign and they can think on their feet and find creative solutions to problems.", 856 | "They are supportive and reliable friends and will always be there for those they care about.", 857 | "Scorpios are known for being very intense, and they have a strong sense of focus and determination", 858 | ], 859 | words: [ 860 | { 861 | id: 1, 862 | label: "Intense", 863 | name: "Pisces", 864 | path: "/scorpio_w.svg", 865 | }, 866 | { 867 | id: 2, 868 | label: "Passionate", 869 | name: "Capricorn", 870 | path: "/scorpio_w.svg", 871 | }, 872 | { 873 | id: 3, 874 | name: "Leo", 875 | label: "resourceful", 876 | path: "/scorpio_w.svg", 877 | }, 878 | { 879 | id: 4, 880 | name: "Aries", 881 | label: "Intense", 882 | path: "/scorpio_w.svg", 883 | }, 884 | { 885 | id: 5, 886 | name: "Scorpio", 887 | label: "determined", 888 | path: "/scorpio_w.svg", 889 | }, 890 | { 891 | id: 6, 892 | name: "Libra", 893 | label: "loyal", 894 | path: "/scorpio_w.svg", 895 | }, 896 | ], 897 | }, 898 | { 899 | id: "Virgo", 900 | subheading: 901 | "People born under the sign of Virgo are thought to be analytical, detail-oriented, and practical, with a strong sense of duty and a desire for order and perfection. They are also known for their intelligence, efficiency, and reliability, as well as their modesty and humility.", 902 | traits: [ 903 | "Virgo is a very loyal sign, and they value their relationships deeply. They are supportive and reliable friends and will always be there for those they care about.", 904 | "Virgo is a very practical sign, and they are known for being down-to-earth.", 905 | "They are reliable and dependable and can see projects through to the end.", 906 | "Virgo is a very analytical sign, and they have a natural talent for problem-solving.", 907 | ], 908 | words: [ 909 | { 910 | id: 1, 911 | label: "Analytical", 912 | name: "Pisces", 913 | path: "/virgo_w.svg", 914 | }, 915 | { 916 | id: 2, 917 | label: "Practical", 918 | name: "Capricorn", 919 | path: "/virgo_w.svg", 920 | }, 921 | { 922 | id: 3, 923 | name: "Leo", 924 | label: "Efficient", 925 | path: "/virgo_w.svg", 926 | }, 927 | { 928 | id: 4, 929 | name: "Aries", 930 | label: "Hardworking", 931 | path: "/virgo_w.svg", 932 | }, 933 | { 934 | id: 5, 935 | name: "Scorpio", 936 | label: "Responsible", 937 | path: "/virgo_w.svg", 938 | }, 939 | { 940 | id: 6, 941 | name: "Libra", 942 | label: "Detail-oriented", 943 | path: "/virgo_w.svg", 944 | }, 945 | ], 946 | }, 947 | ]; 948 | -------------------------------------------------------------------------------- /common/navigation.js: -------------------------------------------------------------------------------- 1 | export const navigation = { 2 | Home: "/", 3 | "About Us": "/about", 4 | Categories: "/categories", 5 | "Born This Month": "/born-this-month", 6 | }; 7 | -------------------------------------------------------------------------------- /common/signs.js: -------------------------------------------------------------------------------- 1 | export const signs = [ 2 | { 3 | label: "Pisces", 4 | icon: "♓", 5 | image: `/pisces.svg`, 6 | }, 7 | { 8 | label: "Aries", 9 | icon: "♈", 10 | image: `/arial.svg`, 11 | }, 12 | { 13 | label: "Taurus", 14 | icon: "♉", 15 | image: `/taurus.svg`, 16 | }, 17 | { 18 | label: "Gemini", 19 | icon: "♊", 20 | image: `/gemini.svg`, 21 | }, 22 | { 23 | label: "Cancer", 24 | icon: "♋", 25 | image: `/cancer.svg`, 26 | }, 27 | { 28 | label: "Leo", 29 | icon: "♌", 30 | image: `/leo.svg`, 31 | }, 32 | { 33 | label: "Virgo", 34 | icon: "♍", 35 | image: `/virgo.svg`, 36 | }, 37 | { 38 | label: "Libra", 39 | icon: "♎", 40 | image: `/libra.svg`, 41 | }, 42 | { 43 | label: "Scorpio", 44 | icon: "♏", 45 | image: `/scorpio.svg`, 46 | }, 47 | { 48 | label: "Sagittarius", 49 | icon: "♐", 50 | image: `/sagittarius.svg`, 51 | }, 52 | { 53 | label: "Capricorn", 54 | icon: "♑", 55 | image: `/capricorn.svg`, 56 | }, 57 | { 58 | label: "Aquarius", 59 | icon: "♒", 60 | image: `/aquarius.svg`, 61 | }, 62 | ]; 63 | -------------------------------------------------------------------------------- /common/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert small cased text to capitalised case 3 | * @example 4 | * capitalize('text') // Text 5 | * 6 | * @param {string} text 7 | */ 8 | export const capitalize = (text) => { 9 | return text.charAt(0).toUpperCase() + text.substring(1); 10 | }; 11 | 12 | /** 13 | * Truncate long texts 14 | * @example 15 | * truncate('Hey, I really understood your codes') // Hey, I really... 16 | * 17 | * @param {string} text 18 | * @param {number} num 19 | */ 20 | 21 | export const truncate = (text, num) => { 22 | if (text && text.length <= num) { 23 | return text; 24 | } 25 | if (text) { 26 | return text.slice(0, num) + "..."; 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /components/Cards/CategoryCard.js: -------------------------------------------------------------------------------- 1 | import { capitalize } from "#/utils"; 2 | import Image from "next/image"; 3 | import React from "react"; 4 | 5 | const CategoryCard = ({ data }) => { 6 | return ( 7 |
12 |
41 |
42 | category symbol 50 |
51 |
52 |

53 | {capitalize(data.label)} 54 |

55 |
56 | ); 57 | }; 58 | 59 | export default CategoryCard; 60 | -------------------------------------------------------------------------------- /components/Cards/Celebrity.js: -------------------------------------------------------------------------------- 1 | import { signs } from "#/signs"; 2 | import { capitalize, truncate } from "#/utils"; 3 | import Image from "next/image"; 4 | import { months } from "#/dummy"; 5 | const Celebrity = ({ celebrity }) => { 6 | const sign = capitalize(celebrity.sign); 7 | const date = new Date(celebrity.birth_date); 8 | const month_index = date.getMonth(); 9 | const month = months.filter((month, index) => index === month_index); 10 | const birth_date = `${ 11 | date.getDay() === 0 ? 1 : date.getDay() 12 | } ${month} ${date.getFullYear()}`; 13 | 14 | const truncatedDesc = truncate(celebrity.description, 50); 15 | return ( 16 |
20 |
21 | {celebrity.name} 30 |
31 |
32 |

33 | {celebrity.name} 34 |

35 |
36 |

37 | Birth Date: 38 | {birth_date} 39 |

40 |

41 | Birth Place: 42 | {truncate(celebrity.birth_place, 26)} 43 |

44 |

45 | Status: 46 | 53 | {celebrity.status} 54 | 55 | {celebrity.age}yrs 56 |

57 |

58 | Zodiac Sign: 59 | 60 | {sign} {signs.find(({ label }) => label === sign).icon} 61 | 62 |

63 |
64 |

65 | {truncatedDesc} 66 | 73 | Read more 74 | 75 |

76 |
77 |
78 | ); 79 | }; 80 | 81 | export default Celebrity; 82 | -------------------------------------------------------------------------------- /components/core/Autoscroll.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { signs } from "#/signs"; 3 | import Image from "next/image"; 4 | import Marquee from "react-fast-marquee"; 5 | const Autoscroll = () => { 6 | return ( 7 |
8 | 23 |
24 | ); 25 | }; 26 | 27 | export default Autoscroll; 28 | -------------------------------------------------------------------------------- /components/core/Button.js: -------------------------------------------------------------------------------- 1 | import PropType from "prop-types"; 2 | import { forwardRef } from "react"; 3 | 4 | /** 5 | * @typedef {import('react')} React 6 | * @type {React.ForwardRefExoticComponent<{ children: React.ReactNode; } & React.ButtonHTMLAttributes & React.RefAttributes>} 7 | */ 8 | const Button = forwardRef(function InnerButton( 9 | { children, className, ...props }, 10 | ref 11 | ) { 12 | return ( 13 | <> 14 | 21 | 26 | 27 | ); 28 | }); 29 | 30 | Button.propTypes = { 31 | children: PropType.node, 32 | className: PropType.string, 33 | }; 34 | 35 | Button.defaultProps = { 36 | className: "", 37 | }; 38 | 39 | export default Button; 40 | -------------------------------------------------------------------------------- /components/core/IconButton.js: -------------------------------------------------------------------------------- 1 | import PropType from "prop-types"; 2 | import { forwardRef } from "react"; 3 | 4 | /** 5 | * @typedef {import('react')} React 6 | * @type {React.ForwardRefExoticComponent<{ children: React.ReactNode; } & React.ButtonHTMLAttributes & React.RefAttributes>} 7 | */ 8 | const IconButton = forwardRef(function InnerButton( 9 | { children, className, ...props }, 10 | ref 11 | ) { 12 | return ( 13 | <> 14 | 21 | 26 | 27 | ); 28 | }); 29 | 30 | IconButton.propTypes = { 31 | children: PropType.node, 32 | className: PropType.string, 33 | }; 34 | 35 | IconButton.defaultProps = { 36 | className: "", 37 | }; 38 | 39 | export default IconButton; 40 | -------------------------------------------------------------------------------- /components/layout/Footer.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import React from "react"; 3 | import { PopupButton } from "@typeform/embed-react"; 4 | 5 | const Footer = () => { 6 | return ( 7 | <> 8 |
9 |
10 |

© Iro 2022

11 |
    12 | 13 |
  • Code on Github
    • 14 | 15 |
  • 16 |

    Powered by

    17 |
    18 | 19 |

    Vercel

    20 | 21 |

    &

    22 | 26 |

    Xata

    27 | 28 |
    29 |
    • 30 | 31 |
  • Give a feedback
    • 32 |     33 |
34 | 35 |

JAMstack

36 | 37 |
38 |
39 |
40 |
41 | 42 |

Code on Github

43 | 44 | 45 |

46 | Give a feedback 47 |

48 | 49 |
50 |
51 |

Powered by

52 |
53 | 54 |

Vercel

55 | 56 |

&

57 | 61 |

Xata

62 | 63 |
64 |
65 |
66 |
67 |

68 | © Iro 2022 :{" "} 69 | 70 | JAMstack 71 | 72 |

73 |

74 | No pixels was harm 💔 in production of this project{" "} 75 |

76 |
77 | 90 | 91 | ); 92 | }; 93 | 94 | export default Footer; 95 | -------------------------------------------------------------------------------- /components/layout/Header.js: -------------------------------------------------------------------------------- 1 | import dynamic from "next/dynamic"; 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | import { useState } from "react"; 5 | import { useRouter } from "next/router"; 6 | import { Bars3Icon } from "@heroicons/react/20/solid"; 7 | import { navigation } from "../../common/navigation"; 8 | import IconButton from "../core/IconButton"; 9 | 10 | const Sidebar = dynamic(() => import("./Sidebar"), { ssr: false }); 11 | 12 | const Header = () => { 13 | const { pathname } = useRouter(); 14 | const [isSidebarOpen, setIsSidebarOpen] = useState(false); 15 | 16 | const openSidebar = () => setIsSidebarOpen(true); 17 | const closeSidebar = () => setIsSidebarOpen(false); 18 | 19 | return ( 20 |
21 |
22 | 23 |
24 | logo 25 | 26 | Iro 27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | 51 | 52 |
53 | ); 54 | }; 55 | 56 | export default Header; 57 | -------------------------------------------------------------------------------- /components/layout/Layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Footer from "./Footer"; 3 | import Header from "./Header"; 4 | import { Widget } from "@typeform/embed-react"; 5 | const Layout = ({ children }) => { 6 | return ( 7 | <> 8 | 13 |
14 |
15 | {children} 16 |
17 |