mirror of
https://github.com/emmabostian/developer-portfolios.git
synced 2025-04-22 06:08:00 +00:00
Azaan Suhail
This commit is contained in:
Azaan Suhail
parent
1f2d40c2bd
commit
0aded30361
24
Azaan Suhail/.gitignore
vendored
Normal file
24
Azaan Suhail/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
54
Azaan Suhail/README.md
Normal file
54
Azaan Suhail/README.md
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
|
||||||
|
# Personal Portfolio Website
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
This project is a **personal portfolio website** designed to showcase my skills, projects, and experience as a developer. It features dynamic sections, smooth animations, and seamless email integration for easy communication. The website serves as a personal branding tool and reflects my proficiency in modern web development technologies.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
- **Dynamic Sections**: Includes Home, About, Projects, and Experience sections.
|
||||||
|
- **Email Integration**: Users can contact me directly through the integrated **EmailJS** contact form.
|
||||||
|
- **Smooth Animations**: Used **React Framer Motion** for smooth transitions and visual enhancements.
|
||||||
|
- **Fluid Navigation**: Implemented **React Scroll** for smooth scrolling between sections.
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
- **Frontend**:
|
||||||
|
- React
|
||||||
|
- Tailwind CSS
|
||||||
|
- Material UI
|
||||||
|
- React Framer Motion
|
||||||
|
- React Scroll
|
||||||
|
- Iconify
|
||||||
|
- EmailJS
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
Follow the steps below to set up the project locally:
|
||||||
|
|
||||||
|
1. Clone the repository:
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/YourUsername/portfolio-website.git
|
||||||
|
```
|
||||||
|
2. Navigate to the project directory:
|
||||||
|
```bash
|
||||||
|
cd portfolio-website
|
||||||
|
```
|
||||||
|
3. Install the necessary dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
4. Start the development server:
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
5. Open your browser and go to **http://localhost:3000** to view the portfolio.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
- Navigate through the various sections to explore my work and experience.
|
||||||
|
- Use the contact form to send direct emails through **EmailJS**.
|
||||||
|
|
||||||
|
## Future Enhancements
|
||||||
|
- Add additional sections like Blogs or Testimonials.
|
||||||
|
- Implement dark mode for better accessibility.
|
||||||
|
- Enhance SEO performance and site optimization for faster loading times.
|
||||||
|
|
||||||
|
# Live :
|
||||||
|
-https://personal-portfolio-website-seven-teal.vercel.app/
|
||||||
38
Azaan Suhail/eslint.config.js
Normal file
38
Azaan Suhail/eslint.config.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
react,
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
23
Azaan Suhail/index.html
Normal file
23
Azaan Suhail/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/public/favicon.ico" />
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Azaan Suhail: Portfolio</title>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap"
|
||||||
|
rel="stylesheet">
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"
|
||||||
|
rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6487
Azaan Suhail/package-lock.json
generated
Normal file
6487
Azaan Suhail/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
49
Azaan Suhail/package.json
Normal file
49
Azaan Suhail/package.json
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
{
|
||||||
|
"name": "portfolio-website",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@emailjs/browser": "^4.4.1",
|
||||||
|
"@emotion/react": "^11.13.3",
|
||||||
|
"@emotion/styled": "^11.13.0",
|
||||||
|
"@mui/material": "^6.1.2",
|
||||||
|
"dotenv": "^16.4.5",
|
||||||
|
"emailjs": "^4.0.3",
|
||||||
|
"emailjs-com": "^3.2.0",
|
||||||
|
"framer-motion": "^11.11.4",
|
||||||
|
"hamburger-react": "^2.5.1",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-icons": "^5.3.0",
|
||||||
|
"react-intersection-observer": "^9.13.1",
|
||||||
|
"react-scroll": "^1.9.0",
|
||||||
|
"react-tilt": "^1.0.2",
|
||||||
|
"react-toastify": "^10.0.5",
|
||||||
|
"react-typical": "^0.1.3",
|
||||||
|
"react-ui-cards": "^2.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.11.1",
|
||||||
|
"@iconify/react": "^5.0.2",
|
||||||
|
"@iconify/tailwind": "^1.1.3",
|
||||||
|
"@types/react": "^18.3.10",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.2",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.11.1",
|
||||||
|
"eslint-plugin-react": "^7.37.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.12",
|
||||||
|
"globals": "^15.9.0",
|
||||||
|
"postcss": "^8.4.47",
|
||||||
|
"tailwindcss": "^3.4.13",
|
||||||
|
"vite": "^5.4.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
Azaan Suhail/postcss.config.js
Normal file
6
Azaan Suhail/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
Azaan Suhail/public/favicon.ico
Normal file
BIN
Azaan Suhail/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
Azaan Suhail/src/.gitignore
vendored
Normal file
1
Azaan Suhail/src/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
../node_modules
|
||||||
0
Azaan Suhail/src/App.css
Normal file
0
Azaan Suhail/src/App.css
Normal file
37
Azaan Suhail/src/App.jsx
Normal file
37
Azaan Suhail/src/App.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import {
|
||||||
|
Navbar,
|
||||||
|
Home,
|
||||||
|
About,
|
||||||
|
Project,
|
||||||
|
Experience,
|
||||||
|
Contact,
|
||||||
|
Footer
|
||||||
|
} from "./components/index";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar />
|
||||||
|
<div id="home">
|
||||||
|
<Home />
|
||||||
|
</div>
|
||||||
|
<div id="about">
|
||||||
|
<About />
|
||||||
|
</div>
|
||||||
|
<div id="projects">
|
||||||
|
{" "}
|
||||||
|
<Project />
|
||||||
|
</div>
|
||||||
|
<div id="experience">
|
||||||
|
<Experience />
|
||||||
|
</div>
|
||||||
|
<div id="contact">
|
||||||
|
<Contact />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
Azaan Suhail/src/assets/Chat Loop.png
Normal file
BIN
Azaan Suhail/src/assets/Chat Loop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
Azaan Suhail/src/assets/Person_on_mobile.png
Normal file
BIN
Azaan Suhail/src/assets/Person_on_mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
Azaan Suhail/src/assets/Programmer2.jpg
Normal file
BIN
Azaan Suhail/src/assets/Programmer2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
Azaan Suhail/src/assets/Programmer_Img.png
Normal file
BIN
Azaan Suhail/src/assets/Programmer_Img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
Azaan Suhail/src/assets/cartoon_img.png
Normal file
BIN
Azaan Suhail/src/assets/cartoon_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
Azaan Suhail/src/assets/github.png
Normal file
BIN
Azaan Suhail/src/assets/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
Azaan Suhail/src/assets/instagram.png
Normal file
BIN
Azaan Suhail/src/assets/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
Azaan Suhail/src/assets/linkedin.png
Normal file
BIN
Azaan Suhail/src/assets/linkedin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
131
Azaan Suhail/src/components/About.jsx
Normal file
131
Azaan Suhail/src/components/About.jsx
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
import React, { useRef } from "react";
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import { motion, useInView } from "framer-motion";
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
const technologies = [
|
||||||
|
{ icon: "skill-icons:react-dark", label: "React" },
|
||||||
|
{ icon: "skill-icons:tailwindcss-light", label: "Tailwind CSS" },
|
||||||
|
{ icon: "vscode-icons:file-type-node", label: "Node.js" },
|
||||||
|
{ icon: "simple-icons:express", label: "Express" },
|
||||||
|
{ icon: "skill-icons:javascript", label: "JavaScript" },
|
||||||
|
{ icon: "logos:mysql", label: "MySQL" },
|
||||||
|
{ icon: "devicon:mongodb-wordmark", label: "MongoDB" },
|
||||||
|
{ icon: "skill-icons:html", label: "HTML" },
|
||||||
|
{ icon: "skill-icons:css", label: "CSS" },
|
||||||
|
{ icon: "devicon:bootstrap", label: "Bootstrap" },
|
||||||
|
{ icon: "logos:material-ui", label: "Material UI" },
|
||||||
|
{ icon: "fa6-brands:shoelace", label: "Shoelace" },
|
||||||
|
{ icon: "simple-icons:shadcnui", label: "ShadCN UI" },
|
||||||
|
{ icon: "devicon:postman", label: "Postman" },
|
||||||
|
{ icon: "devicon-plain:reactrouter", label: "React Router" },
|
||||||
|
{ icon: "skill-icons:threejs-light", label: "Three.js" },
|
||||||
|
{ icon: "skill-icons:figma-light", label: "Figma" },
|
||||||
|
{ icon: "devicon:git", label: "Git" },
|
||||||
|
{ icon: "skill-icons:github-light", label: "GitHub" },
|
||||||
|
{ icon: "mdi:language-c", label: "C" },
|
||||||
|
{ icon: "devicon:java-wordmark", label: "Java" },
|
||||||
|
{ icon: "skill-icons:python-dark", label: "Python" },
|
||||||
|
{ icon: "logos:pycharm", label: "PyCharm" },
|
||||||
|
{ icon: "logos:intellij-idea", label: "IntelliJ" },
|
||||||
|
{ icon: "vscode-icons:file-type-vscode", label: "VS Code" },
|
||||||
|
{ icon: "logos:numpy", label: "NumPy" },
|
||||||
|
{ icon: "logos:matplotlib-icon", label: "Matplotlib" },
|
||||||
|
{ icon: "skill-icons:scikitlearn-light", label: "Scikit-learn" }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="m-2 mb-0 bg-[#E9F1F2] flex flex-col gap-2 pt-3">
|
||||||
|
<div className="about px-[2em] flex flex-col">
|
||||||
|
<h1 className="text-3xl font-semibold font-robotoCondensed">
|
||||||
|
A Bit About Me
|
||||||
|
</h1>
|
||||||
|
<p className="m-2 mt-0">
|
||||||
|
I’m Azaan Suhail, a final-year Computer Science undergraduate
|
||||||
|
passionate about web development and problem-solving. With experience
|
||||||
|
in MERN full-stack development, I enjoy building dynamic and
|
||||||
|
responsive applications. I'm always open to collaborating on
|
||||||
|
innovative projects and bringing creative ideas to life. Additionally,
|
||||||
|
I'm a Data Structures and Algorithms (DSA) enthusiast who loves the
|
||||||
|
thrill of solving complex problems. Let’s connect and create something
|
||||||
|
amazing together!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="tool-technologies px-[2em] flex flex-col">
|
||||||
|
<h1 className="text-3xl font-semibold pb-[2px] font-robotoCondensed">
|
||||||
|
Tools and technologies
|
||||||
|
</h1>
|
||||||
|
<p className="px-[14px]">
|
||||||
|
I use a variety of tools and technologies to build responsive,
|
||||||
|
efficient, and scalable web applications. From coding languages to
|
||||||
|
development frameworks, these are the key components I rely on to
|
||||||
|
create great user experiences.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<motion.div className="iconsdiv flex gap-[1vw] flex-wrap justify-evenly pt-1">
|
||||||
|
{technologies.map((tech, index) => {
|
||||||
|
|
||||||
|
const ref = useRef(null);
|
||||||
|
const isInView = useInView(ref, {
|
||||||
|
triggerOnce: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={
|
||||||
|
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }
|
||||||
|
}
|
||||||
|
transition={{ duration: .3, delay: index * 0.05 }}
|
||||||
|
className="flex gap-[1em] justify-center items-center"
|
||||||
|
>
|
||||||
|
<Icon icon={tech.icon} width="36" height="64" />
|
||||||
|
<h1 className="text-[1em]">{tech.label}</h1>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="coding Profile ml-1 pb-3">
|
||||||
|
<h1 className="text-3xl font-semibold px-[2rem] font-robotoCondensed">
|
||||||
|
Coding Profiles
|
||||||
|
</h1>
|
||||||
|
<h1 className="px-[2.5rem] pt-2">
|
||||||
|
Solved <b>700+</b> DSA problems across all coding platforms.
|
||||||
|
</h1>
|
||||||
|
<div className="button pl-[4rem] pt-4 ">
|
||||||
|
<a
|
||||||
|
href="https://codolio.com/profile/Azaan%20Suhail"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
|
||||||
|
>
|
||||||
|
All Coding Profiles
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://leetcode.com/u/AzaanSuhail/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-black bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-bold rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
|
||||||
|
>
|
||||||
|
LeetCode
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
117
Azaan Suhail/src/components/Contact.jsx
Normal file
117
Azaan Suhail/src/components/Contact.jsx
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import emailjs from "emailjs-com";
|
||||||
|
import { toast, ToastContainer } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
import contactImage from "../assets/Person_on_mobile.png";
|
||||||
|
|
||||||
|
const Contact = () => {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
message: ""
|
||||||
|
});
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [error, setError] = useState(false);
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData({ ...formData, [name]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
emailjs
|
||||||
|
.send(
|
||||||
|
"service_lhww1qf",
|
||||||
|
"template_6s66uop",
|
||||||
|
formData,
|
||||||
|
"8oXWSBFxwQOGI2la3"
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
console.log("SUCCESS!", response.status, response.text);
|
||||||
|
setSuccess(true);
|
||||||
|
setError(false);
|
||||||
|
setFormData({ name: "", email: "", message: "" });
|
||||||
|
toast.success("Message sent successfully!");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error("FAILED...", err);
|
||||||
|
setError(true);
|
||||||
|
setSuccess(false);
|
||||||
|
toast.error("Failed to send message. Please try again!");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col lg:flex-row m-4 p-6 bg-[#E9F1F2] rounded-lg shadow-lg">
|
||||||
|
<div className="flex-1 p-4">
|
||||||
|
<h2 className="text-3xl font-bold mb-4 text-center">Contact Me</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block font-medium mb-2">Name:</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="border border-gray-300 rounded-md p-2 w-full focus:outline-none focus:ring-2 focus:ring-[#64FCD9] placeholder-gray-400"
|
||||||
|
placeholder="Enter your name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block font-medium mb-2">Email:</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="border border-gray-300 rounded-md p-2 w-full focus:outline-none focus:ring-2 focus:ring-[#64FCD9] placeholder-gray-400"
|
||||||
|
placeholder="Enter your email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block font-medium mb-2">Message:</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="border border-gray-300 rounded-md p-2 w-full focus:outline-none focus:ring-2 focus:ring-[#64FCD9] placeholder-gray-400"
|
||||||
|
placeholder="Enter your message"
|
||||||
|
rows="4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="bg-[#64FCD9] text-black font-bold px-4 py-2 rounded-md hover:bg-[#50e6cc] transition duration-300"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<ToastContainer
|
||||||
|
position="top-right"
|
||||||
|
autoClose={5000}
|
||||||
|
hideProgressBar={false}
|
||||||
|
newestOnTop={false}
|
||||||
|
closeOnClick
|
||||||
|
rtl={false}
|
||||||
|
pauseOnFocusLoss
|
||||||
|
draggable
|
||||||
|
pauseOnHover
|
||||||
|
theme="dark"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex items-center justify-center mt-4 lg:mt-0">
|
||||||
|
<img
|
||||||
|
src={contactImage}
|
||||||
|
alt="Contact"
|
||||||
|
className="w-full h-auto rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Contact;
|
||||||
104
Azaan Suhail/src/components/Experience.jsx
Normal file
104
Azaan Suhail/src/components/Experience.jsx
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Stepper, Step, StepLabel, Typography, Box } from "@mui/material";
|
||||||
|
|
||||||
|
const Experience = () => {
|
||||||
|
const steps = [
|
||||||
|
"Started Internship",
|
||||||
|
"Learned Full Stack",
|
||||||
|
"Completed Internship"
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ margin: "2em" }}>
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
component="div"
|
||||||
|
gutterBottom
|
||||||
|
sx={{ color: "black", fontWeight: "bold" }}
|
||||||
|
className="font-robotoCondensed"
|
||||||
|
>
|
||||||
|
My Experience
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Stepper
|
||||||
|
activeStep={steps.length}
|
||||||
|
alternativeLabel
|
||||||
|
sx={{ marginBottom: "2em" }}
|
||||||
|
>
|
||||||
|
{steps.map((label, index) => (
|
||||||
|
<Step key={index}>
|
||||||
|
<StepLabel
|
||||||
|
StepIconProps={{
|
||||||
|
sx: {
|
||||||
|
"&.Mui-active": { color: "#64FCD9" }, // Active step icon color
|
||||||
|
"&.Mui-completed": { color: "#2196F3" } // Completed step icon color
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{ color: index === steps.length ? "#64FCD9" : "#6C757D" }}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Typography>
|
||||||
|
</StepLabel>
|
||||||
|
</Step>
|
||||||
|
))}
|
||||||
|
</Stepper>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#F0F4F8",
|
||||||
|
padding: "1.5em",
|
||||||
|
borderRadius: "8px"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
sx={{ color: "#2196F3", fontWeight: "bold", marginBottom: "1em" }}
|
||||||
|
>
|
||||||
|
Full Stack Developer Intern - Geeks for Geeks
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" sx={{ color: "#555" }}>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Led the development of dynamic web applications using{" "}
|
||||||
|
<strong>React</strong>, <strong>Tailwind CSS</strong>,{" "}
|
||||||
|
<strong>JavaScript</strong>, and <strong>Node.js</strong>,
|
||||||
|
contributing to enhanced user experiences.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Designed and implemented <strong>RESTful APIs</strong>, ensuring
|
||||||
|
seamless frontend-backend communication with a focus on
|
||||||
|
performance and scalability.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Optimized <strong>MongoDB queries</strong> to handle large
|
||||||
|
datasets and improve database performance, gaining hands-on
|
||||||
|
experience with database scalability.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Tackled errors and issues by developing strategies for{" "}
|
||||||
|
<strong>error handling</strong> and improving problem-solving
|
||||||
|
skills.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Utilized <strong>Git</strong> and <strong>GitHub</strong> for
|
||||||
|
version control, actively participated in code reviews, enhancing
|
||||||
|
code quality.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Wrote clean, modular, and maintainable code with a focus on
|
||||||
|
scalability and project sustainability.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Gained experience in full-stack development from frontend UI
|
||||||
|
components to backend logic and database management.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Experience;
|
||||||
11
Azaan Suhail/src/components/Footer.jsx
Normal file
11
Azaan Suhail/src/components/Footer.jsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-black h-[50px] text-white flex justify-center items-center">
|
||||||
|
<div className='text-xl'>Made with love ❤️ by Azaan</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer
|
||||||
117
Azaan Suhail/src/components/Home.jsx
Normal file
117
Azaan Suhail/src/components/Home.jsx
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
import React from "react";
|
||||||
|
import programmerImg from "../assets/Programmer_Img.png";
|
||||||
|
import programmer2 from "../assets/Programmer2.jpg";
|
||||||
|
import instagramIcon from "../assets/instagram.png";
|
||||||
|
import linkedinIcon from "../assets/linkedin.png";
|
||||||
|
import githubIcon from "../assets/github.png";
|
||||||
|
import image from "../assets/cartoon_img.png";
|
||||||
|
import Typical from "react-typical";
|
||||||
|
|
||||||
|
const Home = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col lg:flex-row-reverse items-center justify-center w-full h-full lg:px-10">
|
||||||
|
<div className="image w-full lg:w-1/2 flex justify-center lg:justify-start">
|
||||||
|
<img
|
||||||
|
src={programmer2}
|
||||||
|
alt="image"
|
||||||
|
className="w-[90%] lg:w-[80%] max-w-[400px] lg:max-w-[600px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="main flex flex-col items-center lg:items-start w-full lg:w-1/2 px-5 lg:px-10">
|
||||||
|
<div className="pl-0 lg:pl-[10vw] flex justify-center lg:justify-start">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt="Programmer"
|
||||||
|
className="w-[30vw] lg:w-[8vw] max-w-[200px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="Software-heading text-center lg:text-left mt-4 lg:mt-6">
|
||||||
|
<h1 className="text-[6vw] lg:text-[3vw] font-poppins">
|
||||||
|
Hi, I am Azaan Suhail
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="min-h-[3vw] lg:min-h-[1.5vw]">
|
||||||
|
<Typical
|
||||||
|
steps={[
|
||||||
|
"MERN Stack Developer",
|
||||||
|
3000,
|
||||||
|
"Full Stack Developer",
|
||||||
|
3000,
|
||||||
|
"A.I & Machine Learning Visionary",
|
||||||
|
3000,
|
||||||
|
"DSA Enthusiast",
|
||||||
|
3000,
|
||||||
|
"Learner",
|
||||||
|
3000,
|
||||||
|
"Coding Enthusiast",
|
||||||
|
300
|
||||||
|
]}
|
||||||
|
loop={Infinity}
|
||||||
|
wrapper="p"
|
||||||
|
className="inline-block text-[#64fcd9] text-[6vw] lg:text-[2vw] font-semibold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="icons flex gap-[2vw] mt-4 justify-center lg:justify-start">
|
||||||
|
<a
|
||||||
|
href="https://github.com/AzaanSuhail"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
<img
|
||||||
|
src={githubIcon}
|
||||||
|
alt="Github"
|
||||||
|
className="w-[8vw] lg:w-[2.5vw] max-w-[50px]"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://www.linkedin.com/in/azaan-suhail-272230239/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
<img
|
||||||
|
src={linkedinIcon}
|
||||||
|
alt="LinkedIn"
|
||||||
|
className="w-[8vw] lg:w-[2.5vw] max-w-[50px]"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://www.instagram.com/azaansuhail/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
<img
|
||||||
|
src={instagramIcon}
|
||||||
|
alt="Instagram"
|
||||||
|
className="w-[8vw] lg:w-[2.5vw] max-w-[50px]"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="Resume mt-4 flex justify-center lg:justify-start">
|
||||||
|
<a
|
||||||
|
href="https://drive.google.com/file/d/1k2gDdiirtereXS8YtYHD5tiIp43U7s8j/view?usp=sharing"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<button className="bg-[#64FCD9] font-bold px-8 py-2 lg:px-[2em] lg:py-[.4em] border rounded-md">
|
||||||
|
Resume
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
93
Azaan Suhail/src/components/Navbar.jsx
Normal file
93
Azaan Suhail/src/components/Navbar.jsx
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Sling as Hamburger } from "hamburger-react";
|
||||||
|
import { Link } from "react-scroll";
|
||||||
|
const Navbar = () => {
|
||||||
|
const [isOpen, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex justify-between items-center w-full lg:h-[60px] sm:h-[42px] md:h-[55px] bg-black text-white px-4 relative">
|
||||||
|
<div className="name hidden md:block">
|
||||||
|
<h1 className="font-majorMono text-[2vw] lg:pl-28 md:pl-15">
|
||||||
|
Azaan Suhail
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="block md:hidden ml-auto relative">
|
||||||
|
<Hamburger className="sm" toggled={isOpen} toggle={setOpen} color="#64FCD9" />
|
||||||
|
{/* <Hamburger
|
||||||
|
style={{ "width": "10px", "height": "15px" }}
|
||||||
|
toggled={isOpen}
|
||||||
|
toggle={setOpen}
|
||||||
|
color="#64FCD9"
|
||||||
|
/> */}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`buttons absolute right-0 z-10 bg-black mt-1 rounded-md shadow-lg ${
|
||||||
|
isOpen ? "flex" : "hidden"
|
||||||
|
} flex-col gap-[0.5em] p-2 min-w-[95px]`}
|
||||||
|
style={{ top: "100%", right: "0" }}
|
||||||
|
>
|
||||||
|
<Link to="home" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-home bg-[#64FCD9] text-black font-bold px-2 py-0.5 border-black rounded-md text-xs">
|
||||||
|
Home
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="about" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-about hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-2 py-0.5 border-black rounded-md text-xs">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="projects" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-project hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-2 py-0.5 border-black rounded-md text-xs">
|
||||||
|
Projects
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="experience" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-experience hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-2 py-0.5 border-black rounded-md text-xs">
|
||||||
|
Experience
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="contact" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-contact hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-2 py-0.5 border-black rounded-md text-xs">
|
||||||
|
Contact Me
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden md:flex gap-[1em] font-poppins">
|
||||||
|
<Link to="home" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-home bg-[#64FCD9] text-black font-bold px-4 py-2 border-black rounded-md">
|
||||||
|
Home
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="about" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-about hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-4 py-2 border-black rounded-md">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="projects" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-project hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-4 py-2 border-black rounded-md">
|
||||||
|
Projects
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="experience" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-experience hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-4 py-2 border-black rounded-md">
|
||||||
|
Experience
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to="contact" smooth={true} duration={500}>
|
||||||
|
<button className="btn btn-contact hover:bg-[#64FCD9] bg-white text-black font-normal hover:font-semibold px-4 py-2 border-black rounded-md">
|
||||||
|
Contact Me
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="name md:hidden absolute left-1/2 transform -translate-x-1/2">
|
||||||
|
<h1 className="font-majorMono text-[5vw]">Azaan Suhail</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
200
Azaan Suhail/src/components/Project.jsx
Normal file
200
Azaan Suhail/src/components/Project.jsx
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { TaggedContentCard } from "react-ui-cards";
|
||||||
|
|
||||||
|
const Project = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-3xl font-extrabold px-[1.4em] font-robotoCondensed md:relative md:top-2 lg:relative lg:top-2">
|
||||||
|
Projects
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="main-div flex flex-wrap justify-around gap-[1px] relative right-8 sm:gap-3 sm:w-full ">
|
||||||
|
{/* Card 1 */}
|
||||||
|
<div
|
||||||
|
className="card text-white p-2 rounded-lg"
|
||||||
|
style={{ width: "220px", height: "350px", paddingBottom: "23rem" }}
|
||||||
|
>
|
||||||
|
<TaggedContentCard
|
||||||
|
style={{ backgroundColor: "black", color: "white", height: "100%" }}
|
||||||
|
title={<span className="text-[#64fcd8] font-bold">Chat Loop</span>}
|
||||||
|
description="Built a full-stack MERN messaging app with real-time Socket.io communication, online status, pop sound alerts, JWT authentication, bcrypt-secured passwords, React, Tailwind CSS, daisyUI, Zustand for state, Express/MongoDB for data handling, and efficient backend operations."
|
||||||
|
tags={[
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://github.com/AzaanSuhail/Chat_Loop",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open("https://loop-chat-azaan.onrender.com", "_blank")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
LiveLink
|
||||||
|
</button>
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 2 */}
|
||||||
|
<div
|
||||||
|
className="card text-white p-2 rounded-lg"
|
||||||
|
style={{ width: "220px", height: "350px", paddingBottom: "23rem" }}
|
||||||
|
>
|
||||||
|
<TaggedContentCard
|
||||||
|
style={{ backgroundColor: "black", color: "white", height: "100%" }}
|
||||||
|
title={<span className="text-[#64fcd9] font-bold">ShieldOP</span>}
|
||||||
|
description="Developed a secure password manager using the MERN stack with CRUD functionality, securely storing encrypted passwords in MongoDB. Integrated Tailwind CSS, animated Lord Icons, uuid for unique IDs, and React Toast for real-time notifications and user-friendly interface"
|
||||||
|
tags={[
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://github.com/AzaanSuhail/ShieldOP-My-Own-Password-Manager",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://dochub.com/azaan-suhail/gzdnE7NwJxBva21KQyW3BJ/shieldop-png",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
LiveUI
|
||||||
|
</button>
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* //TOdo : third card */}
|
||||||
|
<div
|
||||||
|
className="card text-white p-2 rounded-lg"
|
||||||
|
style={{ width: "220px", height: "350px", paddingBottom: "23rem" }}
|
||||||
|
>
|
||||||
|
<TaggedContentCard
|
||||||
|
style={{ backgroundColor: "black", color: "white", height: "100%" }}
|
||||||
|
title={
|
||||||
|
<span className="text-[#64fcd9] font-bold">Commits Hub</span>
|
||||||
|
}
|
||||||
|
description="Commits Hub is a dynamic MERN app for exploring GitHub profiles and managing repositories. Users can search profiles, sort repositories by recency, stars, or forks, and like profiles, with secure OAuth access to top repositories in JavaScript, Python, and more languages"
|
||||||
|
tags={[
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://github.com/AzaanSuhail/Commits-Hub/tree/main",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://commit-hub.onrender.com/",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
LiveLink
|
||||||
|
</button>
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 3 */}
|
||||||
|
<div
|
||||||
|
className="card text-white p-2 rounded-lg"
|
||||||
|
style={{ width: "220px", height: "350px", paddingBottom: "23rem" }}
|
||||||
|
>
|
||||||
|
<TaggedContentCard
|
||||||
|
style={{ backgroundColor: "black", color: "white", height: "100%" }}
|
||||||
|
title={
|
||||||
|
<span className="text-[#64fcd9] font-bold ">
|
||||||
|
AI Desktop Voice Assistant
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
description="AI Desktop Voice Assistant: Developed a voice-activated assistant that recognizes and executes commands, including opening websites (Google, Stack Overflow), retrieving Wikipedia summaries, announcing the current time, and launching local applications. "
|
||||||
|
tags={[
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://github.com/AzaanSuhail/AI-Desktop-Voice-Assistant",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open("https://example.com/live3", "_blank")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Live
|
||||||
|
</button>
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 4 */}
|
||||||
|
<div
|
||||||
|
className="card text-white p-2 rounded-lg"
|
||||||
|
style={{ width: "220px", height: "350px", paddingBottom: "23rem" }}
|
||||||
|
>
|
||||||
|
<TaggedContentCard
|
||||||
|
style={{ backgroundColor: "black", color: "white", height: "100%" }}
|
||||||
|
title={
|
||||||
|
<span className="text-[#64fcd9] font-bold">
|
||||||
|
Real time Weather App
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
description="Developed a real-time weather application that provides users with instant weather updates, including current temperature, conditions (e.g., sunny, rainy), and humidity levels. The app fetches data from a reliable weather API, ensuring accurate and up-to-date information. "
|
||||||
|
tags={[
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://github.com/AzaanSuhail/My-Weather-App",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
className="bg-[#64fcd9] text-black px-3 py-1 rounded-md hover:font-semibold mb-0" // Removed margin-bottom
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
"https://github.com/AzaanSuhail/My-Weather-App",
|
||||||
|
"_blank"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
LiveUI
|
||||||
|
</button>
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Project;
|
||||||
7
Azaan Suhail/src/components/index.js
Normal file
7
Azaan Suhail/src/components/index.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export {default as Navbar} from "./Navbar";
|
||||||
|
export {default as Home} from "./Home"
|
||||||
|
export {default as About} from './About'
|
||||||
|
export {default as Project} from "./Project"
|
||||||
|
export{default as Experience} from "./Experience"
|
||||||
|
export {default as Contact} from "./Contact"
|
||||||
|
export {default as Footer} from './Footer'
|
||||||
4
Azaan Suhail/src/index.css
Normal file
4
Azaan Suhail/src/index.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
10
Azaan Suhail/src/main.jsx
Normal file
10
Azaan Suhail/src/main.jsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import App from './App.jsx'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
14
Azaan Suhail/tailwind.config.js
Normal file
14
Azaan Suhail/tailwind.config.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
majorMono: ['Major Mono Display', 'monospace'],
|
||||||
|
poppins: ['Poppins', 'sans-serif'],
|
||||||
|
robotoCondensed: ['"Roboto Condensed"', 'sans-serif']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
}
|
||||||
8
Azaan Suhail/vite.config.js
Normal file
8
Azaan Suhail/vite.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user