Skip to content

Commit 605ae9e

Browse files
tecnodevelopertecnodeveloper
committed
Do some changes in UI of projects and skill set
1 parent c746ac0 commit 605ae9e

11 files changed

Lines changed: 291 additions & 40 deletions

File tree

‎out/404/index.html‎

Lines changed: 8 additions & 2 deletions
Large diffs are not rendered by default.

‎out/_next/static/css/6a6d5f63a5b7063a.css‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎out/index.html‎

Lines changed: 7 additions & 1 deletion
Large diffs are not rendered by default.

‎out/projects/build-my-mvp/index.html‎

Lines changed: 7 additions & 1 deletion
Large diffs are not rendered by default.

‎out/projects/ecommerce-store/index.html‎

Lines changed: 7 additions & 1 deletion
Large diffs are not rendered by default.

‎out/projects/evc/index.html‎

Lines changed: 7 additions & 1 deletion
Large diffs are not rendered by default.

‎out/resume/index.html‎

Lines changed: 7 additions & 1 deletion
Large diffs are not rendered by default.

‎src/components/Navbar.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Link from "next/link";
2+
import { useRouter } from "next/router";
23
import React, { useState, useEffect } from "react";
34
import { AiOutlineClose, AiOutlineMail, AiOutlineMenu } from "react-icons/ai";
45
import { FaGithub, FaLinkedinIn } from "react-icons/fa";
@@ -9,6 +10,8 @@ const NavLogo = "/assets/navLogo.png";
910
const Navbar = () => {
1011
const [nav, setNav] = useState(false);
1112
const [shadow, setShadow] = useState(false);
13+
const router = useRouter();
14+
const isResumePage = router.pathname === "/resume";
1215
const navBg = "#ecf0f3";
1316
const linkColor = "#1f2937";
1417

@@ -50,7 +53,7 @@ const Navbar = () => {
5053
</a>
5154
</Link>
5255
<div>
53-
<ul style={{ color: `${linkColor}` }} className="hidden md:flex">
56+
<ul style={{ color: `${linkColor}` }} className="hidden md:flex items-center">
5457
{/* DO MAP HERE */}
5558
<li className="ml-10 text-sm uppercase hover:border-b hover:text-primary">
5659
<Link href="/">Home</Link>
@@ -71,9 +74,23 @@ const Navbar = () => {
7174
<Link href="/#contact">Contact</Link>
7275
</li>
7376

74-
<li className="ml-20 text-sm uppercase hover:border-b flex items-center gap-x-3 hover:text-primary ">
75-
<div className="w-4 h-[0.1px] bg-primary"></div>
76-
<Link href="/resume">Resume</Link>
77+
<li className="ml-6">
78+
<Link href="/resume">
79+
<a
80+
className={`
81+
relative px-5 py-2 text-sm uppercase font-semibold rounded-full
82+
border-2 border-primary text-primary
83+
transition-all duration-300 ease-in-out
84+
hover:bg-primary hover:text-white hover:shadow-lg hover:shadow-primary/50
85+
${isResumePage
86+
? "bg-primary text-white shadow-lg shadow-primary/60 animate-pulse"
87+
: "bg-transparent"
88+
}
89+
`}
90+
>
91+
Resume
92+
</a>
93+
</Link>
7794
</li>
7895
</ul>
7996

@@ -147,7 +164,10 @@ const Navbar = () => {
147164
</li>
148165
</Link>
149166
<Link href="/resume" className="hover:text-primary">
150-
<li onClick={() => setNav(false)} className="py-4 text-sm">
167+
<li
168+
onClick={() => setNav(false)}
169+
className={`py-4 text-sm font-semibold ${isResumePage ? "text-primary border-l-4 border-primary pl-2" : ""}`}
170+
>
151171
Resume
152172
</li>
153173
</Link>

‎src/components/Projects.tsx‎

Lines changed: 103 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,112 @@
1-
import React from "react";
2-
import ProjectItem from "./ProjectItem";
1+
import React, { useState } from "react";
2+
import Link from "next/link";
3+
import { FaGithub, FaExternalLinkAlt } from "react-icons/fa";
34
import { projects } from "../utils/constants";
45

6+
const categoryColors: Record<string, string> = {
7+
"Web App": "bg-blue-100 text-blue-700",
8+
"Full Stack": "bg-purple-100 text-purple-700",
9+
"AI / ML": "bg-green-100 text-green-700",
10+
};
11+
512
const Projects = () => {
13+
const [hovered, setHovered] = useState<string | null>(null);
14+
615
return (
7-
<div id="projects" className="w-full lg:h-screen">
8-
<div className="max-w-[1240px] mx-auto px-2 py-16" data-aos="fade-right" data-aos-duration="1000">
9-
<p className="text-xl tracking-widest uppercase text-primary">Side Projects</p>
10-
<h2 className="py-4">What I&apos;ve Built</h2>
16+
<div id="projects" className="w-full bg-gray-50 py-20">
17+
<div className="max-w-[1240px] mx-auto px-4">
18+
{/* Section Header */}
19+
<div data-aos="fade-up" data-aos-duration="800" className="mb-12">
20+
<p className="text-sm tracking-[0.3em] uppercase text-primary font-semibold mb-2">
21+
Portfolio
22+
</p>
23+
<div className="flex items-end gap-4">
24+
<h2 className="text-4xl font-bold text-gray-800">Projects</h2>
25+
<div className="mb-2 h-[3px] w-16 bg-primary rounded-full"></div>
26+
</div>
27+
<p className="text-gray-500 mt-3 max-w-xl text-lg">
28+
A collection of things I&apos;ve built — from web apps to AI models.
29+
</p>
30+
</div>
31+
32+
{/* Projects Grid */}
1133
<div className="grid md:grid-cols-2 gap-8">
12-
{projects.map((project) => {
13-
return (
14-
<div key={project.name} data-aos="zoom-in" data-aos-duration="1000">
15-
<ProjectItem
16-
title={project.name}
17-
backgroundImg={project.image}
18-
projectUrl={project.projectUrl}
19-
tech={project.tech}
20-
/>
34+
{projects.map((project, index) => (
35+
<div
36+
key={project.name}
37+
data-aos="fade-up"
38+
data-aos-duration="800"
39+
data-aos-delay={`${index * 100}`}
40+
onMouseEnter={() => setHovered(project.name)}
41+
onMouseLeave={() => setHovered(null)}
42+
className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 flex flex-col"
43+
>
44+
{/* Image */}
45+
<div className="relative overflow-hidden h-52">
46+
{project.image && project.image !== "/assets/projects/anpr/anpr.jpg" ? (
47+
<img
48+
src={project.image}
49+
alt={project.name}
50+
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
51+
/>
52+
) : (
53+
<div className="w-full h-full bg-gradient-to-br from-primary/20 to-primary/60 flex items-center justify-center">
54+
<span className="text-5xl">🤖</span>
55+
</div>
56+
)}
57+
{/* Category Badge */}
58+
<span
59+
className={`absolute top-3 left-3 text-xs font-semibold px-3 py-1 rounded-full ${
60+
categoryColors[project.category] ?? "bg-gray-100 text-gray-700"
61+
}`}
62+
>
63+
{project.category}
64+
</span>
65+
</div>
66+
67+
{/* Content */}
68+
<div className="p-6 flex flex-col flex-1">
69+
<div className="flex items-start justify-between mb-2">
70+
<h3 className="text-xl font-bold text-gray-800 group-hover:text-primary transition-colors duration-200">
71+
{project.name}
72+
</h3>
73+
<a
74+
href={project.github}
75+
target="_blank"
76+
rel="noreferrer"
77+
className="text-gray-400 hover:text-gray-800 transition-colors duration-200 ml-2 mt-1"
78+
title="View on GitHub"
79+
>
80+
<FaGithub size={20} />
81+
</a>
82+
</div>
83+
84+
<p className="text-gray-500 text-sm leading-relaxed mb-4 flex-1">
85+
{project.description}
86+
</p>
87+
88+
{/* Tech Tags */}
89+
<div className="flex flex-wrap gap-2 mb-5">
90+
{project.tags.map((tag) => (
91+
<span
92+
key={tag}
93+
className="text-xs bg-gray-100 text-gray-600 px-3 py-1 rounded-full font-medium hover:bg-primary hover:text-white transition-colors duration-200 cursor-default"
94+
>
95+
{tag}
96+
</span>
97+
))}
98+
</div>
99+
100+
{/* CTA */}
101+
<Link href={project.projectUrl}>
102+
<a className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:gap-3 transition-all duration-200 border-b-2 border-primary/30 hover:border-primary pb-1 w-fit">
103+
View Details
104+
<FaExternalLinkAlt size={12} />
105+
</a>
106+
</Link>
21107
</div>
22-
);
23-
})}
108+
</div>
109+
))}
24110
</div>
25111
</div>
26112
</div>

‎src/pages/projects/anpr.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { RiRadioButtonFill } from "react-icons/ri";
2+
import Link from "next/link";
3+
import Head from "next/head";
4+
5+
const ANPR = () => {
6+
return (
7+
<>
8+
<Head>
9+
<title>Zain Ali | Vehicle Number Plate Recognition</title>
10+
<meta
11+
name="description"
12+
content="AI-powered Automatic Number Plate Recognition system using Python, OpenCV and deep learning to detect and read vehicle license plates in real-time."
13+
/>
14+
<link rel="icon" href="/fav.ico" />
15+
</Head>
16+
<div className="w-full overflow-x-hidden">
17+
<div className="w-screen h-[50vh] relative">
18+
<div className="absolute top-0 left-0 w-full h-[50vh] bg-black/70 z-10" />
19+
<div className="absolute z-1 w-full h-[50vh] bg-gradient-to-r from-green-600 to-teal-500"></div>
20+
<div className="absolute top-[70%] max-w-[1240px] w-full left-[50%] right-[50%] translate-x-[-50%] translate-y-[-50%] text-white z-10 p-2">
21+
<h2 className="py-2">Vehicle Number Plate Recognition</h2>
22+
<h3>Python / OpenCV / TensorFlow / AI &amp; ML</h3>
23+
</div>
24+
</div>
25+
26+
<div className="max-w-[1240px] mx-auto p-2 grid md:grid-cols-5 gap-8 py-8">
27+
<div className="col-span-4">
28+
<p className="text-lg">Project</p>
29+
<h2>Overview</h2>
30+
<p className="text-lg mt-2">
31+
An AI-powered Automatic Number Plate Recognition (ANPR) system that uses computer vision and deep learning to detect and extract vehicle license plate information from images and video streams in real-time.
32+
</p>
33+
<p className="text-lg mt-2">
34+
The system leverages OpenCV for image preprocessing and contour detection, combined with a trained deep learning model using TensorFlow/Keras for character recognition. It can handle various lighting conditions, plate angles, and different plate formats.
35+
</p>
36+
<p className="text-lg mt-2">
37+
This project demonstrates practical application of AI/ML techniques in a real-world scenario — useful for parking systems, traffic monitoring, toll booths, and law enforcement applications.
38+
</p>
39+
40+
<p className="text-lg mt-4"> Key Features:</p>
41+
<ol className="text-lg mt-2">
42+
<li>Real-time vehicle plate detection from video/images</li>
43+
<li>Deep learning model for character segmentation & recognition</li>
44+
<li>OpenCV preprocessing pipeline (grayscale, thresholding, edge detection)</li>
45+
<li>Handles multiple plate formats and angles</li>
46+
<li>Confidence scoring for character predictions</li>
47+
<li>Export detected plates to CSV/database</li>
48+
<li>Works under various lighting and weather conditions</li>
49+
</ol>
50+
<div className="flex flex-col sm:flex-row items-center justify-start gap-6 mt-4">
51+
<a
52+
href="https://github.com/tecnodeveloper"
53+
target="_blank"
54+
rel="noreferrer"
55+
>
56+
<button className="px-8 py-2 tracking-widest">Github Code</button>
57+
</a>
58+
</div>
59+
</div>
60+
<div className="col-span-4 md:col-span-1">
61+
<div className="shadow-xl shadow-gray-400 rounded-xl py-4">
62+
<div className="p-2 text-md">
63+
<p className="text-center font-bold pb-2">Technologies</p>
64+
<div className="grid grid-cols-3 md:grid-cols-1">
65+
<p className="text-gray-600 py-2 flex items-center">
66+
<RiRadioButtonFill className="pr-1" /> Python
67+
</p>
68+
<p className="text-gray-600 py-2 flex items-center">
69+
<RiRadioButtonFill className="pr-1" /> OpenCV
70+
</p>
71+
<p className="text-gray-600 py-2 flex items-center">
72+
<RiRadioButtonFill className="pr-1" /> TensorFlow
73+
</p>
74+
<p className="text-gray-600 py-2 flex items-center">
75+
<RiRadioButtonFill className="pr-1" /> Keras
76+
</p>
77+
<p className="text-gray-600 py-2 flex items-center">
78+
<RiRadioButtonFill className="pr-1" /> NumPy
79+
</p>
80+
<p className="text-gray-600 py-2 flex items-center">
81+
<RiRadioButtonFill className="pr-1" /> Tesseract OCR
82+
</p>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
<Link href="/#projects">
88+
<p className="underline cursor-pointer text-lg hover:text-primary">Back</p>
89+
</Link>
90+
</div>
91+
</div>
92+
</>
93+
);
94+
};
95+
96+
export default ANPR;

0 commit comments

Comments
 (0)