skills page added

MrKuldeep01 · Jul 28, 2024 · 1f87756 · 1f87756
1 parent 337dcfc
commit 1f87756
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/imgMe.PNG" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Mr Portfolio - Mr kumar</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -40,3 +40,15 @@
 .read-the-docs {
   color: #888;
 } */
+
+::-webkit-scrollbar{
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb{
+  border-radius: 3px;
+  background:rgba(22, 22, 22, 0.76);
+}
+::-webkit-scrollbar-track{
+  background: rgb(219, 219, 219);
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,6 +2,7 @@ import "./App.css";
 import { Header, Footer } from "./Components";
 import { Outlet } from "react-router-dom";
 function App() {
+
   return (
     <>
       <Header />

diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
@@ -65,8 +65,8 @@ const Header = () => {
         {/* -------------- nav items --------------- */}
         <ul className="gap-1 w-auto hidden md:flex">
           {navItems.map((item) => (
-            <Link key={item.name} to={item.url}>
-              <li className="px-2 py-2 font-semibold text-slate-900/80 hover:text-slate-950 duration-200">{item.name}</li>
+            <Link key={item.name} to={item.url} className="outline-slate-800/10 rounded-[5px]">
+              <li className="px-2 py-2 font-semibold text-slate-900/80 hover:text-slate-950 duration-200 ">{item.name}</li>
             </Link>
           ))}
         </ul>

diff --git a/src/Components/SkillCard.jsx b/src/Components/SkillCard.jsx
diff --git a/src/Components/Skills.jsx b/src/Components/Skills.jsx
@@ -1,10 +1,109 @@
+
 import React from 'react'
+import {NavLink} from "react-router-dom"
 
 const Skills = () => {
   return (
-    <div>
-
+    <div className="skills w-full h-screen flex flex-col items-center justify-start">
+    <span className="pt-24 w-full">
+      <h1 className="name text-center w-full text-3xl font-bold  ">
+        Skills
+      </h1>
+      <p className="subheading font-semibold text-center text-sm text-gray-700/70 p-4">
+        My technical level
+      </p>
+    </span>
+    <div className="bottom w-[90vw] h-auto flex flex-col overflow-x-auto overflow-y-hidden scroll-smooth px-2 py-12 gap-8 md:flex-row items-center flex-nowrap relative">
+      <div id='frontend' className=" left-most w-[90%]  md:min-w-[50%] min-h-[242px] flex-col px-6 py-4  items-center border border-black/30 rounded-lg justify-center"> 
+        <h2 className="skillheader mb-4 w-full text-center text-lg font-semibold text-slate-900">Frontend Development </h2>
+        <div className="skillscards flex gap-2 items-center justify-evenly flex-wrap">
+          {/* ======== skill card =========== */}
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">HTML</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">CSS</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">JavaScript</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Advanced</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">React Js</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Tailwindd CSS</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+
+        </div>
+
+      </div>
+      <div id='backend' className="second-left w-[90%]  md:min-w-[50%] min-h-[242px] flex-col px-6 py-4  items-center border border-black/30 rounded-lg justify-center">
+        <h2 className="skillheader mb-4 w-full text-center text-lg font-semibold text-slate-900">Backend Development </h2>
+        <div className="skillscards flex items-center justify-evenly flex-wrap">
+          {/* ======== skill card =========== */}
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Node Js</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Express Js</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">MongoDB</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Basic</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Python</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Basic</span>
+          </div>
+
+        </div>
+
+      </div>
+      <div id='devtools' className="right-most w-[90%]  md:min-w-[50%] min-h-[242px] flex-col px-6 py-4  items-center border border-black/30 rounded-lg justify-center">
+        <h2 className="skillheader mb-4 w-full text-center text-lg font-semibold text-slate-900">Development tools </h2>
+        <div className="skillscards flex items-center justify-evenly flex-wrap">
+          {/* ======== skill card =========== */}
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">VS Code</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Netlify</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Varcel</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Intermediat</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Git & GitHub</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Basic</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">Linux</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Basic</span>
+          </div>
+          <div className="skillcard  m-2 px-4 py-2 border rounded-lg">
+            <h3 className="skillname font-semibold text-center">On Render</h3>
+            <span className="text-slate-800/80 font-semibold text-xs text-left">Basic</span>
+          </div>
+
+        </div>
+
+      </div>
+      {/* <div className="buttons w-full absolute bottom-0 left-0 flex items-center justify-center gap-1">
+
+      </div> */}
     </div>
+  </div>
   )
 }