Bugfix/update intro

README.md

@@ -1,4 +1,4 @@
-# Portfolio of Vinayak Singh
+# Portfolio of Hamid Hussain
 
 <img src ="https://github.com/CodeVinayak/CodeVinayak/blob/5920a79f4c5977332a67caf91125241cf0fc46b5/www.vinayaksingh.in.png" />
 

package.json

@@ -20,6 +20,7 @@
     "react-scripts": "^5.0.1",
     "react-toastify": "^8.1.0",
     "react-tsparticles": "^1.37.5",
+    "typewriter-effect": "^2.20.1",
     "styled-components": "^5.3.3",
     "typescript": "^4.4.2",
     "validator": "^13.7.0",

public/index.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
 
-    <title>Vinayak Singh | Portfolio</title>
+    <title>Hamid Hussain | Portfolio</title>
     <meta charset="utf-8" />
     <meta property="og:title" content="Vinayak Singh | Portfolio">
     <meta name="keywords" content="Vinayak Singh,Vinayak,Code Vinayak,Portfolio Vinayak Singh,Freelance website developer">

src/components/About/About.tsx

@@ -1,5 +1,5 @@
 import { Container } from "./styles";
-import VinayakSingh from "../../assets/VinayakSingh.png";
+import HamidHussain from "../../assets/HamidHussain.png";
 import wordpress from "../../assets/wordpress.svg";
 import shopify from "../../assets/shopify.svg";
 import htmlIcon from "../../assets/html-icon.svg";
@@ -88,9 +88,9 @@ export function About() {
           </div>
         </div>
       </div>
-      <div className="about-image">
-        <ScrollAnimation animateIn="fadeInRight" delay={0.20 * 1000}>
-          <img src={VinayakSingh} alt="Vinayak Singh" />
+      <div>
+        <ScrollAnimation animateIn="fadeInRight" delay={0.20 * 1000} className="about-image">
+          <img src={HamidHussain} alt="Hamid Hussain" />
         </ScrollAnimation>
       </div>
     </Container>

src/components/About/styles.ts

@@ -46,9 +46,9 @@ export const Container = styled.section`
 
 
   .about-image{
-    text-align: center;
    img{
-     margin-top: 2rem;
+    border:2px solid blue;
+    //  margin-top: 2rem;
      width: 75%;
      filter: grayscale(0);
      transition: filter 0.5s;

src/components/Header/Header.tsx

@@ -16,8 +16,8 @@ export function Header() {
     <Container className="header-fixed">
       <Router>
         <HashLink smooth to="#home" className="logo">
-          <span>{"<Vinayak "}</span>
-          <span>{" Singh/>"}</span>
+          <span>{"<H "}</span>
+          <span>{" H/>"}</span>
         </HashLink>
         <input
           onChange={toggleTheme}

src/components/Hero/Hero.tsx

@@ -8,6 +8,7 @@ import githubIcon from '../../assets/github.svg'
 import whatsapp from '../../assets/whatsapp.svg'
 import Hello from '../../assets/Hello.gif'
 import telegram from '../../assets/telegram.svg'
+import Typed from "../Typed/Typed"
 export function Hero() {
   return (
     <Container id="home">
@@ -16,13 +17,14 @@ export function Hero() {
           <p>Hello <img src={Hello} alt="Hello" width="20px"/>, I'm</p>
         </ScrollAnimation>
         <ScrollAnimation animateIn="fadeInUp" delay={0.2 * 1000}>
-          <h1>Vinayak Singh</h1>
-        </ScrollAnimation>
-        <ScrollAnimation animateIn="fadeInUp" delay={0.4 * 1000}>
-          <h3>Full Stack Developer</h3>
+          <h1>Hamid_Hussain</h1>
         </ScrollAnimation>
+        <Typed/> 
+        {/* <ScrollAnimation animateIn="fadeInUp" delay={0.4 * 1000}>
+          <h3>React Native Developer</h3>
+        </ScrollAnimation> */}
         <ScrollAnimation animateIn="fadeInUp" delay={0.6 * 1000}>
-          <p className="small-resume">4 Years of Experience</p>
+          <p className="small-resume">1 Years of Experience</p>
         </ScrollAnimation>
         <ScrollAnimation animateIn="fadeInUp" delay={0.8 * 1000}>
           <BrowserRouter>

src/components/Project/Project.tsx

@@ -24,7 +24,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>Serverless Voting Application for Programming Languages</h3>
-              <p> Developed a serverless voting app using React, AWS Lambda, API Gateway, and DynamoDB, enabling users to view programming languages, cast votes, and access details through an interactive UI, leveraging serverless architecture for scalability and cost-efficiency. </p>
+              <p className="cardText"> Developed a serverless voting app using React, AWS Lambda, API Gateway, and DynamoDB, enabling users to view programming languages, cast votes, and access details through an interactive UI, leveraging serverless architecture for scalability and cost-efficiency. </p>
             </div>
             <footer> <ul className="tech-list"> <li>AWS Lambda</li> <li>API Gateway</li> <li>DynamoDB</li> </ul> </footer>
           </div>
@@ -43,7 +43,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>GeniusBot: AI-Powered Assistance with PDF Insight</h3>
-              <p>
+              <p className="cardText">
                 Developed an interactive chatbot application using Streamlit, OpenAI's GPT-3.5-turbo language model, and PyPDF2 for PDF text extraction, enabling users to ask context-based questions on uploaded PDFs and general queries.
               </p>
             </div>
@@ -75,7 +75,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>Credit Risk Analysis Project</h3>
-              <p>
+              <p className="cardText">
                 Developed a highly accurate credit risk classification model using XGBoost, achieving 100% precision, recall, and F1-scores for predicting loan defaults.Implemented rigorous data preprocessing, feature engineering, and hyperparameter tuning on imbalanced credit risk data, employing ensemble methods, cross-validation, and model interpretation techniques.
               </p>
             </div>
@@ -104,7 +104,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>MediBook: Medical Appointment Scheduler with Health History</h3>
-              <p>Developed a secure medical appointment management platform with CRUD functionality, utilizing role-based access control, encryption techniques, and a robust MySQL database with normalized schema design and stored procedures for efficient scheduling, data privacy, and reliable retrieval of patient records.</p>
+              <p className ="cardText">Developed a secure medical appointment management platform with CRUD functionality, utilizing role-based access control, encryption techniques, and a robust MySQL database with normalized schema design and stored procedures for efficient scheduling, data privacy, and reliable retrieval of patient records.</p>
             </div>
             <footer>
               <ul className="tech-list">
@@ -135,7 +135,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>Real-Time Hand Gesture-Driven 3D Object Manipulation</h3>
-              <p>Developed a real-time hand gesture recognition system for intuitive 3D object manipulation. Leveraged a multimodal approach integrating OpenCV for video processing, MediaPipe for hand detection/landmark extraction, and scikit-learn for machine learning model training. Achieved 95.2% accuracy in hand gesture classification with efficient real-time performance.</p>
+              <p className ="cardText" >Developed a real-time hand gesture recognition system for intuitive 3D object manipulation. Leveraged a multimodal approach integrating OpenCV for video processing, MediaPipe for hand detection/landmark extraction, and scikit-learn for machine learning model training. Achieved 95.2% accuracy in hand gesture classification with efficient real-time performance.</p>
             </div>
             <footer>
               <ul className="tech-list">
@@ -159,7 +159,7 @@ export function Project() {
             </header>
             <div className="body">
               <h3>VeloCityAI</h3>
-              <p>
+              <p className ="cardText">
                 VelocityAI is a website that allows users to get instant answers to any question and generate stunning AI pictures using OpenAI's GPT-3 and DALL-E model.With VelocityAI, users can type in text-based prompts and receive a corresponding response.
               </p>
             </div>

src/components/Project/styles.ts

@@ -63,7 +63,18 @@ export const Container = styled.section`
           }
         }
       }
-
+      .cardText {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3; /* Change this to the number of lines you want to show */
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          position: relative;
+          max-height: calc(1.2em * 3); /* Adjust '3' to the number of lines you want */
+          line-height: 1.2em;
+          // border:2px solid red;
+      }
       footer{
         margin-top: auto;
         .tech-list{

src/components/Typed/Typed.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Typewriter from 'typewriter-effect';
+import '../Typed/typed.css'
+
+const Typed: React.FC = () => {
+  return (
+    <div className="TypeEffect">
+      <Typewriter
+        options={{
+          strings: ['<strong>HAMID <span style="color: #27ae60;">Hello</span> World!</strong>', 'RN Front-end Developer'],
+          autoStart: true,
+          loop: true,
+          delay: 70,
+          deleteSpeed: 20,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Typed;

src/components/Typed/typed.css

@@ -0,0 +1,3 @@
+.TypeEffect {
+    color: green;
+}