As a fan of the popular animated series "Rick and Morty," I was always interested in exploring the world of the show and discovering more about its characters and episodes. When I learned about a contest that involved building a website using a provided API, I saw it as an opportunity to showcase my skills and bring my passion for "Rick and Morty" to life.
\r\n\r\n
For the contest, I was tasked with building a website using the "Rick and Morty" API, React, and Tailwind CSS. The API provided information about the characters, episodes, and locations from the show, and I used this data to create a dynamic and interactive website.
\r\nI started by familiarizing myself with the API and its structure, and then began to design and develop the website using React as the front-end framework and Tailwind CSS for styling. React made it easy for me to build the website with a modular structure and create reusable components for different sections of the site. Tailwind CSS allowed me to quickly add custom styles and responsive design elements to make the site look polished and professional.
\r\nThe website features several sections, including a character directory, episode guide, and a location map. Users can search for specific characters and episodes, and also filter the results based on criteria such as species or air date. The location map provides a visual representation of the different planets and dimensions from the show, and users can click on a location to learn more about it.
\r\n\r\n
Building this website was a great opportunity for me to combine my skills in React and Tailwind CSS with my love for "Rick and Morty." I was able to showcase my ability to work with APIs and create dynamic, user-friendly websites. I am proud of the final product and believe it is a testament to my technical skills and passion for the show. Whether you\'re a fan of "Rick and Morty" or just interested in React and Tailwind CSS, I hope you enjoy using this website as much as I enjoyed building it
', createdAt: '2023-02-09T15:29:50.906Z', updatedAt: '2023-02-10T07:04:01.491Z', }, { _id: '60c23099b832652e3c9a7907', liveUrl: 'https://tajmirul-blog.netlify.app', technologies: ['HTML', 'JavaScript', 'CSS & SASS', 'Bootstrap'], features: ['Static website', 'Performance Optimized'], slug: 'personal-blog', title: 'Personal Blog', image: 'public/uploads/1675955658829-Personal Blog.jpg', shortDescription: 'A performance optimized single page application made with MERN.', description: '\r\n
', createdAt: '2022-01-16T00:09:20.666Z', updatedAt: '2023-02-12T09:20:12.194Z', }, { _id: '60c1a8388879682b40e02a8f', liveUrl: 'https://me.toinfinite.dev/', technologies: [ 'NodeJS', 'Next js (prev React.js)', 'JavaScript (ES6+)', 'Express', 'MongoDB', 'HTML', 'CSS & SASS', 'Bootstrap', 'Eslint', ], features: [ 'Single Page Website', 'Dynamic website', 'Performance Optimized (95 ± 3 according to Google)', 'Dark and light theme', 'A lot of flexibility', ], slug: 'portfolio-website', title: 'Portfolio Website', image: 'public/uploads/1676195083757-2.jpg', shortDescription: 'A performance optimized single page application made with MERN.', description: "
\r\nIn conclusion, I am extremely proud of this portfolio website and believe it accurately reflects my skills and abilities as a web developer. I hope that it will serve as a valuable tool in helping me connect with potential employers or clients and advance my career.
Say hello to a new and improved blogging experience with our React-based website. Designed for bloggers looking to take their content to the next level, our website offers a high-quality platform that's both visually stunning and user-friendly.
\r\nIn conclusion, our React-based blogging website is the ultimate solution for bloggers looking to elevate their content and reach a wider audience. With its fast performance, custom styling, and user-friendly interface, it's the perfect platform to showcase your writing and ideas to the world. Try it out today!
", createdAt: '2023-02-09T16:34:11.154Z', updatedAt: '2023-02-10T07:05:33.969Z', }, { _id: '63e51b552a6de95748d20121', liveUrl: 'https://bitbetio.netlify.app', sourceCode: 'https://github.com/Tajmirul/bitbetio', technologies: ['Tailwind CSS', 'Html', 'JavaScript'], features: [ 'Responsive design for seamless user experience on all devices', 'User-friendly interface', 'Customizable design', 'Fast and efficient page loading', ], slug: 'unveiling-bitbetio-a-stunning-online-betting-platform', title: 'Unveiling BitBetio: A Stunning Online Betting Platform', image: 'public/uploads/1675969019812-Introducing BitBetio_ The Ultimate Online Betting Destination.jpg', shortDescription: 'Experience the thrill of online betting with BitBetio - a secure platform offering a wide range of exciting games, easy deposits and withdrawals.', description: "BitBetio is a new online betting platform that allows users to play a variety of games and win real money. Whether you're a seasoned gambler or just looking for a bit of fun, BitBetio has something for everyone. Our platform is designed with the user in mind, providing a seamless and enjoyable experience for all.
\r\n\r\n
Secure Login: Users can easily and securely log into their BitBetio account using their email and password.
\r\nDeposits & Withdrawals: BitBetio makes it easy for users to deposit and withdraw money, with a range of payment options available, including credit and debit cards, e-wallets, and more.
\r\nUser-Friendly Interface: BitBetio's user-friendly interface makes it easy for users to navigate and find the games they want to play.
\r\nResponsive Design: BitBetio is optimized for all devices, providing a seamless experience whether you're using a desktop, tablet, or mobile.
\r\nSafe and Secure: BitBetio takes the security of our users' personal and financial information very seriously, using state-of-the-art security measures to keep your data safe.
\r\n\r\n
In conclusion, BitBetio is the ultimate online betting destination, offering a wide range of exciting games, a secure login, easy deposits and withdrawals, a user-friendly interface, and a safe and secure platform. So why wait? Sign up today and start playing!
", createdAt: '2023-02-09T16:12:05.412Z', updatedAt: '2023-02-10T07:06:08.411Z', }, { _id: '64fc6feaabab7265933d0c90', liveUrl: '', sourceCode: 'https://github.com/Tajmirul/npx_tajmirul', technologies: ['Node js', 'Typescript'], slug: 'terminal-portfolio-with-nodejs', title: 'Terminal Portfolio with Node.js', image: 'public/uploads/1694265322016-demo.png', shortDescription: 'Have you ever thought about having your own custom terminal portfolio with a set of commands that showcase your skills and accomplishments?', description: 'Have you ever thought about having your own custom terminal portfolio with a set of commands that showcase your skills and accomplishments? I did, and I turned that idea into a reality. In this blog post, I\'ll walk you through my journey of building a terminal portfolio using Node.js, complete with auto-complete functionality, and then publishing it as an npm package.
\r\nOpen terminal and run the command:
\r\n\r\n\r\n\r\n
npx tajmirul
The idea of a terminal portfolio struck me one day. I wanted a unique way to present my skills and experiences to others. A terminal portfolio seemed like a perfect choice, given my love for command-line interfaces. So, I set out to create one.
\r\nThe first step was to define the commands that my terminal portfolio would support. Here\'s a list of the available commands:
\r\nwelcome - Welcome messagehelp - List available commandsexit - Exit the terminalclear - Clear the terminalecho - Print a string to the terminal history - See command historywhoami - Print the current usergui - Visit my websiteabout - Know more about meeducation - My education backgroundexperience - Experience i have gathered so farskills - My skillsprojects - View my projectscontact - Contact Informationemail - Send me an emailresume - Want to see my resume?
The journey started with handling user input. I tried different libraries like prompt-sync and prompt-sync-plus, but they had their limitations. prompt-sync struggled with left and right arrow key support, and the up/down arrow keys didn\'t work as expected.
readlineI finally settled on using Node.js\'s built-in readline module along with process.stdin. This combination allowed me to capture user input effectively and handle command history, left/right editing, and more. However, one crucial piece was still missing: auto-completion.
With readline in place, I had to implement auto-complete functionality manually. This involved analyzing user input, comparing it with available commands, and suggesting completions. It was challenging, but it added a great user experience to my terminal portfolio.
Building this terminal portfolio was no walk in the park. It took two days of hard work, debugging, and testing to get everything right. But the satisfaction of seeing it function as intended was worth every moment.
\r\nOnce I was satisfied with the output, I decided to share my terminal portfolio with the world. I followed the npm package publishing process, but there was a catch. When I ran npx tajmirul, it didn\'t work as expected. Instead, the index.js file opened in a text editor.
\r\nAfter some research, I discovered the issue. To make an npm package executable with npx, I needed to add a shebang line at the top of my entry file (typically index.js). The shebang #!/usr/bin/env node tells the operating system to use the Node.js interpreter to run the script. This simple addition solved the problem.
\r\nBuilding a terminal portfolio with custom commands and auto-complete functionality was a fun and educational journey. It taught me a lot about handling user input, creating a command-line interface, and publishing packages on npm. If you\'re interested in building your own terminal portfolio or command-line tool, I hope this story inspires you to take the plunge. Happy coding!
\r\n\r\n
\r\n
', createdAt: '2023-09-09T13:15:22.283Z', updatedAt: '2023-09-09T13:25:20.378Z', }, ];