Welcome to My Portfolio

MY PORTFOLIO & PROJECTS

Bringing Ideas to Life!

Cortex Copywriter Clone

Tiny Web Animation is a personal project showcasing a clone of Cortex Copywriter with five different themes. Built using React, TypeScript, JavaScript, HTML, an...

React
JavaScript
TypeScript
HTML/HTML5
CSS/CSS3
SCSS/SASS
Visual Studio Code
Git
GitHub

Visit Now

Lets Go


Home Page

Home page of Cortex Clone which shows details about the Cortex Platform.

Contributors:
Farasat Ali

Hide Case Study

CASE STUDY:

💼 Role:

Software Engineer

As a Software Engineer, I am constantly exploring ways to refine and enhance my skills, particularly in the realm of web development. My role often involves designing, implementing, and optimizing user interfaces, focusing on creating engaging, interactive, and aesthetically appealing experiences. I specialize in front-end technologies, including React, JavaScript, TypeScript, HTML, and CSS. My work emphasizes clean, efficient code and visually rich interfaces that prioritize user experience. By integrating modern practices in theming and animation, I aim to push the boundaries of what a web interface can do, ensuring my projects are not only functional but also immersive. In this project, I assumed full responsibility for planning, developing, and testing the Tiny Web Animation application, an open-source project available on GitHub. This required in-depth knowledge of front-end frameworks and methodologies, as well as attention to detail in UI/UX design. My objective was to create a seamless and visually engaging user interface that would also serve as a reflection of my abilities in modern web development practices.

👨‍💼 Client:

Personal Project

This project was a personal initiative designed to serve as both a practice exercise and a portfolio piece showcasing my proficiency in web development. As the client for my project, I set clear goals to challenge myself with various aspects of front-end development, including theming, smooth animations, and responsive design. My objective was to create a polished user interface that highlighted the versatility and power of React combined with TypeScript. The entire project is open-source, meaning it is freely available on GitHub for others to explore, learn from, or contribute to. Creating an open-source project offered me a unique opportunity to share my work with the developer community. This approach not only allowed for potential collaboration but also demonstrated my commitment to fostering a transparent and cooperative environment within the development space. By making the source code publicly accessible, I also hoped to inspire other developers looking to improve their front-end skills.

💻 About Project:

The Tiny Web Animation project is a personal initiative designed to replicate and enhance the user interface and experience found on the Cortex Copywriter website. The objective was to create a highly responsive and visually appealing website that showcases five distinct themes, each with its unique visual style. The project serves as a learning exercise, helping me refine my skills in React, TypeScript, HTML, CSS, and front-end development in general. Throughout the project, my focus was on ensuring smooth animations, responsive design, and a polished user interface that would make a solid addition to my portfolio. The main driving force behind the project was to explore how different web animations can enhance user experience without compromising performance. Themed web pages, in particular, provide an excellent opportunity to test out various design elements such as color schemes, layouts, and animations. Each of the five themes in the Tiny Web Animation project was meticulously designed to deliver a different user experience, ranging from minimalist styles to more vibrant, dynamic animations. Using React as the backbone of this project provided the flexibility and modularity necessary to handle the different themes and complex animations. React's component-based architecture allowed me to break down the project into smaller, more manageable pieces, which improved development efficiency and code readability. TypeScript was another integral part of this project. By adding static typing to JavaScript, TypeScript improved the maintainability of the project, making it easier to spot bugs early in the development process. In terms of design, I ensured that the website was fully responsive, meaning that it would perform just as well on mobile devices as on desktop browsers. CSS media queries were used to adjust layouts and font sizes for different screen sizes, ensuring a smooth and consistent experience across devices. The animations, meanwhile, were implemented using CSS keyframes and transitions, striking a balance between smoothness and performance.

🚧 Problem:

The core challenge that I aimed to solve with the Tiny Web Animation project was how to create a visually appealing website that also showcases fluid animations and different themes. When looking at the original Cortex Copywriter website, I was struck by its simple yet elegant design and realized that replicating it would be an excellent opportunity to hone my front-end development skills. However, creating such a website would require tackling a series of more minor problems, all of which offered a chance to learn something new and refine my existing knowledge. One of the first challenges was ensuring that the website would be fully responsive. While designing for desktop screens can be relatively straightforward, ensuring that the same user experience translates to smaller devices like tablets and smartphones requires careful consideration. Elements need to resize and reposition themselves automatically, and animations need to remain smooth even on lower-powered devices. Achieving this level of responsiveness would test my ability to implement adaptive layouts using CSS and JavaScript. Another significant challenge was implementing smooth and engaging animations. Modern web users expect animations that feel natural and responsive, but achieving this while also maintaining good performance is a tricky balancing act. Too many or overly complex animations can slow down a webpage, leading to a poor user experience. Conversely, excessively simplistic animations may fail to captivate the user. I had to find a middle ground that provided an enjoyable and interactive experience without compromising performance. Finally, I wanted to explore how themes could impact the overall look and feel of the website. Each of the five themes in the Tiny Web Animation project was designed to provide a different aesthetic experience. This required a deep understanding of CSS and how to manipulate properties like colors, font sizes, margins, and paddings. Themes also provided an opportunity to experiment with dynamic styling using React's state management, which allowed me to switch between themes smoothly and without refreshing the page.

🛠️ Solution:

To address the challenges I identified, I developed the Tiny Web Animation project using a combination of modern web technologies. React, TypeScript, JavaScript, HTML, and CSS were all critical components of the solution. React provided the framework necessary to build a modular and maintainable user interface. Its component-based architecture allowed me to develop each part of the website separately, which not only improved code organization but also made it easier to implement the five different themes. In addition to React, I used TypeScript to improve the overall reliability and maintainability of the project. TypeScript's static typing system helped catch potential bugs during development, reducing the likelihood of errors making it to production. TypeScript also made the code more self-documenting, making it easier to understand the structure of the project when revisiting it later. For the project's animation aspects, I relied heavily on CSS transitions and keyframes. CSS transitions allowed for smooth state changes, while keyframes enabled more complex animations like element movements and fade. By keeping the animations relatively lightweight, I was able to maintain performance even on lower-powered devices, addressing one of the main challenges I had identified. I also took care to optimize the animations for performance, using techniques such as hardware acceleration to ensure that they ran smoothly on all devices. To ensure that the website was fully responsive, I used CSS media queries to adjust the layout based on the screen size. This ensured that the website would look good on both desktop and mobile devices. I also used a combination of flexible grid layouts and relative units for widths and heights to ensure that elements resized and repositioned themselves automatically. This approach helped solve the problem of providing a consistent user experience across devices with different screen sizes. Lastly, the five different themes were implemented using React's state management capabilities. I created a theme selector that allowed the user to switch between themes on the fly without refreshing the page. Each theme was represented as a set of CSS variables, such as colors and fonts, which could be applied to the website dynamically. This approach allowed for a smooth and seamless transition between themes, enhancing the overall user experience.

🌟 Key Features:

  • Five Unique Themes: Users can switch between five distinct visual styles, each offering a different aesthetic experience.
  • Smooth Animations: Transitions and keyframe animations are used to create a polished, professional feel.
  • Responsive Design: The website is fully responsive, ensuring it works well on both desktop and mobile devices.
  • Theme Selector: A theme selector allows users to switch between themes without refreshing the page.
  • Modular Architecture: React's component-based design makes the project easy to maintain and expand.

🏆 Results:

The Tiny Web Animation project was a resounding success in terms of both personal growth and technical achievement. It accomplished precisely what I set out to do: create a visually appealing, interactive website that showcased my proficiency in modern front-end development. The final product demonstrated my ability to use React, TypeScript, and CSS in a way that emphasized both aesthetics and functionality. By building a project that featured multiple themes and smooth animations, I was able to solidify my understanding of crucial front-end development principles, including responsive design, theming, and performance optimization. The website's five distinct themes provided a unique visual experience for users, each offering its own color scheme, layout, and animations. This was not only a technical achievement but also a creative one, allowing me to explore different styles and visual elements that contribute to user engagement. The uReact'seact’s state management for theme switching was particularly satisfying, as it allowed for seamless transitions between themes without the need for page reloads, making the user experience fluid and intuitive. Furthermore, the emphasis on smooth animations and responsive design proved to be an excellent test of my CSS skills. By using CSS transitions and keyframes, I was able to create an engaging user experience that felt natural and responsive across different devices. The performance optimizations I implemented ensured that the animations ran smoothly even on lower-powered devices, which was a critical success factor for the project. This experience gave me deeper insights into how to balance performance with aesthetics, a key consideration in modern web development. In addition, making the project open-source allowed me to contribute to the developer community, providing others with a learning resource that they could explore and build upon. By sharing the code on GitHub, I opened up opportunities for collaboration and feedback, which in turn helped me grow as a developer. The project also served as a valuable addition to my portfolio, showcasing as a testament to my front-end development skills. Dive into the code and experience seamless theming, engaging animations, and a polished user interface. Perfect for developers looking to learn or contribute to an open-source project.

🎯 Technologies Used:

  • Programming Languages: JavaScript, TypeScript
  • Frontend: React, HTML, CSS

📘 How To Use:

To use the Tiny Web Animation project, you can clone the repository from GitHub and run it locally. First, navigate to the GitHub repository at https://github.com/faraasat/tiny-small-animation. Clone the repository to your local machine using Git. Once cloned, navigate to the project directory and install the necessary dependencies using a package manager like npm or yarn. After the dependencies are installed, start the development server to view the project in your local environment. If you prefer not to run the project locally, you can access the live version at http://tiny-web-animation.surge.sh/.

🔒 License:

The Cortex Copywriter Clone is licensed under the MIT License. This permissive open-source license allows developers to use, modify, distribute, and commercialize the software with minimal restrictions. This license was chosen specifically to encourage collaboration and the open sharing of knowledge, as it grants users the freedom to adapt the project for their purposes while also providing the opportunity for others to contribute improvements or additional features. The MIT License ensures the code remains open and accessible to all while protecting the original author from legal liability.

MY PORTFOLIO & PROJECTS

Click Project to see it in the mocks!

All
React
Next.js
Node.js
Express.js
(Amazon Web Services) AWS
JavaScript
TypeScript
Python
Solidity
React Native
MongoDB

Professional Projects

Portfolio V2 [Deprecated]
Portfolio V2 [Deprecated]

Portfolio V2 [Deprecated]

The portfolio site version 2 is a personal project aimed at showcasing professional achievements and skills.

#react

#next.js

#javascript

#typescript

#framer-motion

#tailwind

#vercel

#visual-studio-code

#git

#github

Curriculum Vitae (Portfolio V1) [Deprecated]
Curriculum Vitae (Portfolio V1) [Deprecated]

Curriculum Vitae (Portfolio V1) [Deprecated]

Dynamic and responsive portfolio website built with React and TypeScript for showcasing professional skills, projects, a...

#react

#javascript

#typescript

#html/html5

#css/css3

#scss/sass

#visual-studio-code

#git

#github

Star Marketing App
Star Marketing App

Star Marketing App

The Star Marketing App is a comprehensive web application developed for Star Marketing Pvt. Ltd., a leading property mar...

#react

#next.js

#node.js

#(amazon-web-services)-aws

#javascript

#typescript

#html/html5

#css/css3

#tailwind

#nest.js

#payload-cms

#strapi-cms

#mongodb

#postgresql

#docker

#vercel

#figma

#visual-studio-code

#git

#github

Voiiice App
Voiiice App

Voiiice App

VOIICE.io is a modern platform for podcast creators, featuring browser-based audio recording, secure content management,...

#react

#next.js

#node.js

#express.js

#(amazon-web-services)-aws

#stripe

#javascript

#html/html5

#css/css3

#mongodb

#vercel

#visual-studio-code

#git

#github

Xerofinity
Xerofinity

Xerofinity

Xerofinity is a basic website developed by friends for a startup initiative. Though the startup is no longer operational...

#javascript

#html/html5

#css/css3

#vercel

#visual-studio-code

#git

#github

Get His Green
Get His Green

Get His Green

GethisGreen is an e-commerce platform selling pens in Nigeria. It features a responsive frontend, secure checkout, payme...

#react

#next.js

#javascript

#typescript

#html/html5

#css/css3

#figma

#visual-studio-code

#git

#github

GPA and CGPA Calculator
GPA and CGPA Calculator

GPA and CGPA Calculator

The GPA and CGPA calculator is a web application developed to automate and simplify the calculation of Grade Point Avera...

#react

#javascript

#typescript

#html/html5

#css/css3

#vercel

#visual-studio-code

#git

#github

Personal Projects

Restaurant Food Ordering System
Restaurant Food Ordering System

Restaurant Food Ordering System

The Restaurant System project is a web application designed to showcase a restaurant's offerings and information. It inc...

#react

#javascript

#vercel

#visual-studio-code

#git

#github

Xenrir Online Store
Xenrir Online Store

Xenrir Online Store

Xenrir is an e-commerce website that was built as a personal project. It features essential pages for online shopping, i...

#react

#next.js

#javascript

#typescript

#html/html5

#css/css3

#tailwind

#strapi-cms

#vercel

#visual-studio-code

#git

#github

PIAIC Website Clone
PIAIC Website Clone

PIAIC Website Clone

The PIAIC website clone project aims to replicate the functionality and design of the official PIAIC website. It include...

#react

#next.js

#javascript

#typescript

#vercel

#visual-studio-code

#git

#github

Gatsby Vitual Lolly App
Gatsby Vitual Lolly App

Gatsby Vitual Lolly App

Using React, TypeScript, Gatsby, and FaunaDB, create virtual lollipops with personalized messages and share them via uni...

#react

#javascript

#visual-studio-code

#git

#github

Crwn Clothing
Crwn Clothing

Crwn Clothing

CRWN Clothing is a basic e-commerce website built using React, TypeScript, and Stripe for secure payments.

#react

#node.js

#express.js

#stripe

#javascript

#visual-studio-code

#git

#github

Natours Tour Website
Natours Tour Website

Natours Tour Website

A basic tour website featuring a static home page developed as part of a web development course project.

#javascript

#visual-studio-code

#git

#github

Nexter Home Purchase UI
Nexter Home Purchase UI

Nexter Home Purchase UI

Nexter Home Purchase Website - A basic, single-page home purchase website showcasing modern design and responsive layout...

#javascript

#visual-studio-code

#git

#github

Trillo Hotel UI
Trillo Hotel UI

Trillo Hotel UI

A basic hotel website showcasing responsive design and modern UI elements.

#javascript

#visual-studio-code

#git

#github

Cortex Copywriter Clone
Cortex Copywriter Clone

Cortex Copywriter Clone

Tiny Web Animation is a personal project showcasing a clone of Cortex Copywriter with five different themes. Built using...

#react

#javascript

#typescript

#html/html5

#css/css3

#scss/sass

#visual-studio-code

#git

#github

Expense Tracker App PWA
Expense Tracker App PWA

Expense Tracker App PWA

The Expense Tracker App PWA is a simple yet powerful tool for tracking daily expenses. It was built using React, TypeScr...

#react

#javascript

#typescript

#html/html5

#css/css3

#scss/sass

#visual-studio-code

#git

#github

Quiz App
Quiz App

Quiz App

A basic Quiz App built using React, Typescript, JavaScript, HTML, and CSS for practicing frontend development skills.

#react

#javascript

#typescript

#visual-studio-code

#git

#github

Time App (TDD)
Time App (TDD)

Time App (TDD)

A stopwatch timer application implemented using React, TypeScript, JavaScript, HTML, and CSS, emphasizing Test-Driven De...

#react

#javascript

#typescript

#visual-studio-code

#git

#github

React Shoe Store
React Shoe Store

React Shoe Store

React Shoe Store is a basic e-commerce application showcasing shoes as products, built using React, TypeScript, JavaScri...

#react

#javascript

#typescript

#html/html5

#css/css3

#scss/sass

#material-ui

#visual-studio-code

#git

#github

Gatsby Bookmark App
Gatsby Bookmark App

Gatsby Bookmark App

A simple bookmark management application using React, Gatsby, and FaunaDB where you can save your bookmarks publicly.

#react

#javascript

#typescript

#visual-studio-code

#git

#github

Covid Tracker App [Deprecated]
Covid Tracker App [Deprecated]

Covid Tracker App [Deprecated]

Covid Tracker is a basic website displaying COVID-19 statistics and charts, designed for easy access and data visualizat...

#react

#javascript

#typescript

#visual-studio-code

#git

#github

Gatsby Blog Site
Gatsby Blog Site

Gatsby Blog Site

A simple blog site using React, TypeScript, Gatsby, and Contentful for content management.

#react

#javascript

#typescript

#visual-studio-code

#git

#github

Gatsby CRUD App
Gatsby CRUD App

Gatsby CRUD App

A CRUD application using React, Typescript, JavaScript, HTML, CSS, FaunaDB, and Gatsby for managing messages.

#react

#javascript

#typescript

#visual-studio-code

#git

#github

Netflix UI Clone
Netflix UI Clone

Netflix UI Clone

A basic Netflix UI Clone project using React, TypeScript, JavaScript, HTML, and CSS for practising front-end development...

#react

#javascript

#typescript

#visual-studio-code

#git

#github

Diaries App
Diaries App

Diaries App

A basic Diaries App using React, Typescript, JavaScript, HTML, and CSS, featuring user sign-up, login, and creation of p...

#react

#javascript

#typescript

#visual-studio-code

#git

#github

React Expense Tracker App
React Expense Tracker App

React Expense Tracker App

The Expense Tracker App is a simple yet powerful tool for tracking daily expenses. It was built using React, TypeScript,...

#react

#javascript

#typescript

#html/html5

#css/css3

#scss/sass

#visual-studio-code

#git

#github

JamStack Todo App
JamStack Todo App

JamStack Todo App

A basic Todo App developed using React, Typescript, JavaScript, HTML, CSS, Gatsby, and FaunaDB.

#react

#javascript

#typescript

#visual-studio-code

#git

#github

CV Builder App
CV Builder App

CV Builder App

A web-based CV builder designed as part of a "Web Engineering" course, allowing users to log in, fill in their informati...

#javascript

#visual-studio-code

#git

#github

Quiz App PWA
Quiz App PWA

Quiz App PWA

A basic Quiz App built using React, Typescript, JavaScript, HTML, and CSS for practicing frontend development skills wit...

#react

#javascript

#typescript

#visual-studio-code

#git

#github

Multi Step Form
Multi Step Form

Multi Step Form

A basic three-step form UI built using React, JavaScript, HTML, and CSS to practice and demonstrate front-end developmen...

#react

#javascript

#typescript

#visual-studio-code

#git

#github

React Shopping Basket
React Shopping Basket

React Shopping Basket

A basic shopping website built with React, TypeScript, HTML, and CSS, featuring home, products, product details, and car...

#react

#javascript

#typescript

#html/html5

#css/css3

#scss/sass

#visual-studio-code

#git

#github

React Taskbox
React Taskbox

React Taskbox

Task Box is a React-based task management web application with FaunaDB integration, designed for efficient task organiza...

#react

#javascript

#typescript

#visual-studio-code

#git

#github

SERVICES

A Tailored Solution for You!

Farasat Ali offers top-tier web and mobile development, leveraging the latest technologies for customized solutions. His expertise includes cloud deployment for reliable, scalable applications. With AI integration, he provides intelligent, data-driven solutions to enhance efficiency. In Blockchain development, he creates secure, decentralized systems for trust. His data-driven strategies turn insights into results, driving growth and performance. Committed to excellence, Farasat delivers innovative, robust, and scalable applications. Partner with Farasat Ali for outstanding growth, the best results, and awesome leads with cutting-edge technology.

Web Development

Web Development

As a technology-driven developer, I leverage the latest tools and frameworks such as MERN Stack, Jamstack and NextJs to develop highly scalable and performant web applications.

As a tech-driven developer, I use cutting-edge tools to build scalable, high-performance web apps. Skilled in MERN Stack, Jamstack, and Next.js, I create dynamic applications with React, Node.js, and MongoDB. Proficient in Next.js, I deliver server-rendered and static sites for top SEO and performance. See outstanding business growth with Farasat Ali, achieving irresistibly the best results and surprisingly awesome leads as an expert in the latest technologies.

Cloud & Blockchain Dev.

Cloud & Blockchain Dev.

As a Cloud & web3 developer, I specialize in developing fully interactive web3 websites, Dapps, and smart contracts, and I am also experienced in deployments on Cloud Platforms Like AWS & Azure.

As a Cloud and Web3 developer, I excel in building interactive Web3 sites, DApps, and smart contracts. I deploy and manage these solutions on AWS and Azure, ensuring scalability and performance. My deep blockchain knowledge and cloud expertise drive outstanding business growth, delivering irresistibly the best results and surprisingly awesome leads. By leveraging the latest technologies, I provide secure, efficient, and cutting-edge digital experiences.

AI, ML & LLMs

AI, ML & LLMs

As an AI/ML developer, I possess a robust knowledge of these technologies, including TensorFlow, PyTorch, and Numpy. I specialize in building, deploying, and optimizing models, leveraging tools like GPTs and LangChain for cutting-edge applications.

As an AI/ML developer, I specialize in TensorFlow, PyTorch, and Numpy for building and optimizing models. Leveraging GPTs and LangChain, I craft innovative solutions that drive outstanding business growth and deliver the best results with awesome leads. My expertise includes data preprocessing, feature engineering, model training, and integration into scalable systems, ensuring top performance and efficiency.

Mobile Development

Mobile Development

As a mobile app developer, I have a strong expertise in creating high-performance mobile applications using cutting-edge technologies such as React Native, Expo, and Firebase.

As a mobile app developer, I build high-performance apps with React Native, Expo, and Firebase. Expertise in React Native ensures seamless cross-platform apps for iOS and Android. Expo accelerates development, while Firebase provides robust backend support, including real-time databases and authentication. Staying current with the latest technologies, I drive outstanding business growth, deliver the best results, and generate awesome leads with innovative mobile solutions.

SKILLS

Keeping Up with the Cutting Edge!

Farasat Ali excels in JavaScript, TypeScript, Python, Solidity, Rust, AssemblyScript, and Cirq. He specializes in web and mobile development with HTML, CSS, SCSS, React, React Native, Next.js, Redux, and related technologies. He is proficient with Node.js, Express.js, Nest.js, Flask, FastAPI, and databases like MongoDB, PostgreSQL, Redis, Neo4j, GraphQL, Firebase, and Supabase. In cloud and CI, he works with AWS, Azure, Terraform, Docker, Kubernetes, Vercel, GitHub Actions, and Jenkins. His Web3 and blockchain experience includes Ethereum, Solana, Anchor, and related tools. He also has expertise in AI and ML with Numpy, Pandas, Pytorch, and Tensorflow. General tools include Sentry, Figma, Visual Studio Code, Git, and GitHub.

- Programming Languages -

JavaScript

TypeScript

Python

Solidity

Rust

AssemblyScript

Cirq

- Web & Mobile Development -

HTML/HTML5

CSS/CSS3

SCSS/SASS

React

React Native

Next.js

Redux

Redux Saga

React Query

Immer

MobX

Framer Motion

Storybook

Bootstrap

Material UI

Tailwind

ShadCn/UI

Node.js

Express.js

Nest.js

Bun.sh

Flask

FastAPI

Socket.io

Payload CMS

Strapi CMS

Sanity CMS

AWS Lambda

Nginx

MongoDB

PostgreSQL

Redis

Neo4j

GraphQL

Firebase

Supabase

TypeORM

Mongoose

Prisma

- Cloud, Infrastructure-as-a-Service (IaaS) & Continuous Integration (CI) -

Amazon Web Services (AWS)

Microsoft Azure

Terraform

Docker

Kubernetes

Vercel

GitHub Actions

Jenkins

- Web3, Blockchain & Development Environments -

Ethereum

Solana

Anchor

Truffle

Hardhat

Ethers.js

Wagmi

WalletConnect

- Artificial Intelligence (AI) & Machine Learning (ML) -

Numpy

Pandas

Pytorch

Tensorflow

Keras

- General Tools & Technologies -

Sentry

Figma

Visual Studio Code

Git

GitHub

Hubspot

Copyright © 2024. All Rights reserved.