diff --git a/Graphics/hero-section-photo.jpg b/Graphics/hero-section-photo.jpg new file mode 100644 index 0000000..f66add9 Binary files /dev/null and b/Graphics/hero-section-photo.jpg differ diff --git a/StyleSheets/animation.css b/StyleSheets/animation.css new file mode 100644 index 0000000..bcf794a --- /dev/null +++ b/StyleSheets/animation.css @@ -0,0 +1,9 @@ +@keyframes left-slide { + 0% {transform: translateX(-600px); opacity: 0%;} + 100% {transform: translateX(0px); opacity: 100%;} +} + +@keyframes right-slide { + 0% {transform: translateX(600px); opacity: 0%;} + 100% {transform: translateX(0px); opacity: 100%;} +} diff --git a/StyleSheets/responsive.css b/StyleSheets/responsive.css deleted file mode 100644 index de52153..0000000 --- a/StyleSheets/responsive.css +++ /dev/null @@ -1,233 +0,0 @@ -@media (max-width: 1100px) { - .home .intro { - font-size: 50px; - } -} - -@media (max-width: 900px) { - .home .intro { - font-size: 45px; - } -} - -@media (max-width: 800px) { - .navigator { - flex-wrap: wrap; - } -} - -@media (max-width: 600px) { - .home .intro { - font-size: 35px; - } - - .home .intro .space { - height: 120px; - } - - .about div { - font-size: 18px; - } -} - -@media (max-width: 550px) { - .navigator ul li { - font-size: 12px; - } - - .home { - height: 500px; - } -} - -@media (max-width: 450px) { - .project .project-set .project-item h3 { - font-size: 20px; - } - - .project .project-set .project-item .content{ - font-size: 14px; - } - - .resume a { - padding: 3px; - font-size: 12px; - } - - .navigator ul li { - font-size: 8px; - } - - .home .intro { - font-size: 25px; - } - - .home .intro .space { - height: 80px; - } -} - -@media (max-width: 400px) { - .navigator .left { - font-size: 1.3rem; - } - - .home { - height: 350px; - } - - .photo img { - width: 80%; - } - - h2 { - font-size: 25px; - } - - .about div { - font-size: 15px; - } -} - -@media (max-width: 360px) { - .navigator .right ul li { - margin: 0 10px; - } - - .skill-set .flex-container .flex-item{ - padding: 30px 5px; - height: 150px; - } - - .skill-set .flex-container .flex-item img { - height: 100px; - } -} - -@media (max-width: 350px) { - .about div { - font-size: 15px; - } - - .resume { - margin: 10px 0px - } - - .resume a { - padding: 3px; - font-size: 10px; - } -} - -@media (max-width: 300px) { - - .project { - padding: 12px; - } - - .skill { - padding: 12px; - } - - .home { - height: 200px; - } - - .home .intro { - font-size: 15px; - } - - .home .intro .space { - height: 50px; - } - - h2 { - font-size: 20px; - padding: 10px 0px; - } - - .about div { - font-size: 12px; - } - - .project .project-set .project-item .content{ - font-size: 10px; - } -} - -@media (max-width: 250px) { - .resume { - margin: 5px 0px - } - - .resume a { - padding: 3px; - font-size: 8px; - } -} - -@media (max-width: 230px) { - .navigator .right ul li { - margin: 0px 5px; - } -} - -@media (max-width: 200px) { - .navigator { - height: 45px; - } - - .navigator .left { - display: none; - } - - .navigator .right ul li { - margin: 0px 3px; - } - - .home { - height: 150px; - } - - .home .intro { - font-size: 10px; - } - - .home .intro .space { - height: 32px; - } - - .about { - padding: 2px; - } - - h2 { - font-size: 15px; - padding: 5px 0px; - } - - .about div { - font-size: 7px; - } - - .resume { - margin: 3px 0px - } - - .resume a { - padding: 3px; - font-size: 6px; - } -} - -@media (max-width: 160px) -{ - .resume { - margin: 3px 0px - } - - .resume a { - padding: 3px; - font-size: 4px; - } -} \ No newline at end of file diff --git a/StyleSheets/standby.css b/StyleSheets/standby.css new file mode 100644 index 0000000..e091b85 --- /dev/null +++ b/StyleSheets/standby.css @@ -0,0 +1,84 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +.light-theme { + --headersection: #5910ad; + --primary-color: #007ACC; + --secondary-color: #7d2fd7; +} + +.dark-theme { + +} + +:root { + --scrollbar-bg: linear-gradient(to top left, rgb(0, 57, 255), rgb(239, 249, 255)); + --scrollbar-bg-hover: linear-gradient(to top left, rgb(0, 0, 255), rgb(0, 232, 255)); +} + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-bg, #999); + border-radius: 16px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-bg-hover, #555); +} + +a { + text-decoration: none; + color: black; +} + +body { + background-color: var(--primary-color); + font-family: Helvetica, sans-serif, Georgia; + font-weight: 400; +} + +.main-header { + width: 100vw; + position: fixed; + top: 0; + padding: 10px; + background-color: var(--headersection); + font-size: 1.5rem; +} + +.main-header nav { + display: flex; + justify-content: space-between; +} + +.main-header nav div { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0px 12px; +} + +.main-header nav div ul { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; +} + +.main-header nav div ul li { + margin: 12px; +} + +.main-header nav div ul li a { + color: #00000080 +} + +.main-header nav div ul li a:hover { + color: #000000 +} diff --git a/StyleSheets/style.css b/StyleSheets/style.css index 93cb118..307adeb 100644 --- a/StyleSheets/style.css +++ b/StyleSheets/style.css @@ -1,251 +1,126 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); - -* { - margin: 0; - padding: 0; - font-family: Poppins, sans-serif; -} - - -ul { - padding-left: 20px; -} - -body { - background-color: rgb(0, 0, 33); - color: white; +.navbar { + margin: 5px; } -nav { +.container { display: flex; - justify-content: space-around; - align-items: center; - height: 100px; - background-color: rgb(6, 6, 46); + flex-wrap: wrap; + justify-content: space-evenly; + align-content: space-evenly; } -nav ul { +.hero-intro { + margin: 10px; + width: 500px; display: flex; + flex-direction: column; justify-content: center; -} - -nav ul li { - list-style: none; - font-size: 16px; - margin: 0 23px; - text-align: center; -} - -nav ul li a { - text-decoration: none; - color: white; -} - -nav ul li a:hover { - color: blueviolet; -} - -.left { - font-size: 1.8rem; - padding: 0px 20px; -} - -.left:hover { - color: blueviolet; -} - -.home { - display: flex; - justify-content: space-around; - height: 700px; -} - -.intro { - width: 40%; - margin: 23px 0px; - font-size: 60px; - display: flex; align-items: center; } -.intro span { - color: blueviolet; -} - -.intro .space{ - height: 200px; -} - -.photo { +.hero-image { + margin: 10px; + width: 500px; display: flex; - width: 40%; - margin: 23px 0px; + justify-content: center; align-items: center; } -.photo img { +.hero-image img { width: 100%; } -.about { - padding: 20px; - margin: 10px; -} - -.about div { - font-size: 20px; +.contact { + display: flex; + flex-wrap: wrap; } -/* .about h2 { - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; -} */ - -.resume { - margin: 23px 0px; +.contact .item { + width: 50px; + margin: 5px; } -.resume a { - padding: 10px; - color: white; - border: 3px solid white; - border-radius: 20px; +.contact img { + width: 100%; } -.resume a:hover{ - background-color: white; - color: black; +section { + padding: 20px 5px; } -.skill{ - padding:30px; +#hero-section .text { + margin: 2px; + font-size: 2.2rem; } -/* .skill h2{ - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; -} */ - -.skill-set{ - padding: 2px; +#about-section div { + margin: 12px 0px; } -.skill-set .flex-container{ - justify-content: space-around; +#skill { + margin: 12px 0px; } -.skill-set .flex-container .flex-item { - height: 300px; - width: 250px; - text-align: center; - padding: 30px 10px; - font-size: larger; +.skills { margin: 10px; } -.skill-set .flex-container .flex-item img { - height: 200px; -} - -.project{ - padding:30px; -} - -/* .project h2{ - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; - margin:5px 0px; -} */ - -.project .project-set .project-item h3{ - color: rgb(120, 38, 208); - font-size: 30px; - padding: 5px 0px; - margin:5px 0px; -} - -.project .project-set .project-item .content{ - padding: 5px 0px; - margin:5px 0px; -} - -.project .project-set .project-item .tech { - padding: 5px 0px; -} - -.project .project-set .project-item .links { - padding: 5px 0px; +.skills-container { + display: flex; + flex-wrap: wrap; } -.project .project-set .project-item .links a { - display: inline-block; - padding: 6px 8px; - margin: 0px 4px; - border: 4px solid white; - border-radius: 20px; - color: white; +.skill { + margin: 15px; + width: 200px; + border: 10px solid blueviolet; + padding: 10px; } -.project .project-set .project-item .links a:hover { - color: black; - background-color: white; +.skill img { + width: 100%; + height: auto; } -.project .project-set { - padding: 10px 0px; +.skill p { + text-align: center; } -.project .project-set .project-item { - margin: 20px 0px; - padding: 10px 10px; - background-color: rgb(0, 0, 50); - border-radius: 3vw; +.projects-container { + margin: 20px; } -.contact{ - padding: 20px; +.project { + margin-top: 25px; + padding: 15px; + border: 5px solid yellowgreen; + border-radius: 30px; + animation-name: right-slide; + animation-duration: 1s; } -/* h2{ - color: rgb(120, 38, 208); - font-size: 35px; - padding: 13px 0px; - margin: 10px 0px; -} */ - -.certificates { - padding: 20px; +.projects-container ul { + margin-left: 12px; + padding-left: 12px; } -.certify { +.certificates-container { + margin: 10px; display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 12px; + flex-wrap: wrap; } -.certify div{ - width: 90%; - margin: 12px; +.certificate { + margin: 10px; + width: 400px; } -.certify div img{ +.certificate img { width: 100%; } -.contact .contact-set ul{ - margin: 5px; - list-style: none; -} - -.contact .contact-set ul li{ - display: inline; +@media (max-width: 1200px) { + .container { + margin-top: 100px; + } } - -.contact .contact-set ul li img { - height:40px; -} \ No newline at end of file diff --git a/StyleSheets/utils.css b/StyleSheets/utils.css index 10726c3..b80b6bd 100644 --- a/StyleSheets/utils.css +++ b/StyleSheets/utils.css @@ -1,19 +1,41 @@ -a { - text-decoration: none; +h1 { + font-size: 2.2rem; } -h2 { - color: rgb(120, 38, 208); - font-size: 35px; - padding: 23px 0px; +h2 { + font-size: 1.8rem; } -.flex-container { +h3 { + font-size: 1.3rem; +} + +body { + font-size: 1rem; + /* overflow-x: hidden; */ +} + +.screen-fit-center { + margin: 5vw; + min-width: 90vw; + min-height: 90vh; display: flex; - justify-content: space-around; - flex-wrap: wrap; + align-content: center; + justify-content: center; } -.flex-item{ - padding: 10px; -} \ No newline at end of file +.button { + margin-top: 20px; +} + +.button a { + display: inline-block; + padding: 12px; + border: 3px solid white; + border-radius: 16px; + transition: background-color 0.2s; +} + +.button a:hover { + background-color: white; +} diff --git a/icons/coder.ico b/icons/coder.ico new file mode 100644 index 0000000..55f69de Binary files /dev/null and b/icons/coder.ico differ diff --git a/index.html b/index.html index f36de31..6a2e403 100644 --- a/index.html +++ b/index.html @@ -4,277 +4,292 @@ - - + + - + Jeel - Developer Portfolio - + + + - - -
- +
-
-
-
- Hi, My name is Jeel -
and I am Passionate
-
Software Engineer
+
+
+
+
+
Hi, My name is Jeel
+
and I am Passionate
+
Software Engineer
+
+ +
+
Whatsapp
+
Instagram
+
Github
+
Linkedin
+
LeetCode
+
+
+
+ coding illustration
-
- coding illustration -
-
+ +
-
-

About Me!!

-
-

I am a 16-year-old boy with a deep passion for computer programming and a strong - aspiration to become a young software engineer. From a young age, I have been captivated by the world of - technology and the endless possibilities -

- it offers for problem-solving and innovation. My journey in coding started with languages like - C#, Python, and Java. Through self-guided learning and exploration, I have acquired a solid - foundation in these languages and enjoy applying them in - development of various projects. The process of creating software that can positively impact people's lives truly fascinates me. -

- With each project I undertake, I strive to - deepen my understanding of programming principles and expand my skill set. I eagerly embrace new - challenges and am constantly seeking opportunities - to learn and grow as a developer. I am motivated by the idea of contributing to the development of - cutting-edge technologies and being part of - a collaborative team that pushes the boundaries of innovation. -

- Beyond coding, I am an avid learner - who believes in the power of knowledge and its - potential to transform lives. I am dedicated to staying up-to-date with the latest advancements in - the tech industry. -

- I am excited to connect - with like-minded individuals, industry professionals, and mentors who share my passion for programming - and can provide guidance and inspiration on - this rewarding journey. -

- Together, let's shape the future through technology! 🚀💻 -

-
+ +
+
+

About Me!!

-
LeetCodeRank:
+

+ I am a 16-year-old boy with a deep passion for computer programming and a strong + aspiration to become a young software engineer. From a young age, I have been captivated by the world of + technology and the endless possibilities +

+
+

+ it offers for problem-solving and innovation. My journey in coding started with languages like + C#, Python, and Java. Through self-guided learning and exploration, I have acquired a solid + foundation in these languages and enjoy applying them in + development of various projects. The process of creating software that can positively impact people's lives truly fascinates me. +

+
+

+ With each project I undertake, I strive to + deepen my understanding of programming principles and expand my skill set. I eagerly embrace new + challenges and am constantly seeking opportunities + to learn and grow as a developer. I am motivated by the idea of contributing to the development of + cutting-edge technologies and being part of + a collaborative team that pushes the boundaries of innovation. +

+
+

+ Beyond coding, I am an avid learner who believes in the power of knowledge and its + potential to transform lives. I am dedicated to staying up-to-date with the latest advancements in + the tech industry. +

+
+

+ I am excited to connect with like-minded individuals, industry professionals, and mentors who share my passion for programming + and can provide guidance and inspiration on this rewarding journey. +

+
+

+ Together, let's shape the future through technology! 🚀💻 +

+
+
+ +
+
LeetCodeRank:
- - -
+ +
-
-

My Skills!!

-
-
-
- Python -

Python

-
-
- Java -

Java

-
-
- CSharp -

CSharp

-
-
- Html -

Html

+ +
+
+

My Skills!!

+
+
+
+ Python +

Python

+
+
+ Java +

Java

+
+
+ CSharp +

CSharp

+
+
+ Html +

Html

+
+
+ Css +

Css

+
+
+ C++ +

C++

+
-
- Css -

Css

-
-
- C++ -

C++

-
-
-
+ +
-
-

Projects

-
-
-

- Smart Manager - Securing Passwords, Simplifying Authentication -

-
- "Smart Manager" is more than an application; it's a guardian for your sensitive data in the tech-driven era. Tailored to securely store and manage passwords, it stands as a robust solution that prioritizes data security, ease of use, and efficient management. Smart Manager, a Python command-line application, empowers users to safeguard their passwords locally. -
-
Smart Manager is a python command-line application. Which allow user to store there password locally in there own system. -
-
Warning: -
Don't share your authentic details with Smart Manager; it's a python project designed for fun and exploration of the world of Python. It doesn't ensure security. For secure password management, consider reputable alternatives. -
-
Key Features: -
    -
  • Secure Password Storage: Smart Manager ensures the secure storage of passwords locally.
  • -
  • Efficient Data Management: Organize and manage authentication-related data with ease.
  • -
-
Contribution and Documentation: -
Explore comprehensive documentation, usage instructions, and examples on the dedicated web page. Contribute to the project's development on GitHub, where you can find the source code and actively participate in shaping the future of Smart Manager. -
-
Why Smart Manager Matters: -
"Smart Manager" addresses the essential need for secure password management. Beyond that, it's an exploration of Python's capabilities, fostering a community-driven approach to improving password security. -
-
Let's revolutionize authentication together! 🚀🔐 -
-
Technologies used:- Python
- -
-
-

- PyDevTools - Simplifying Python Development -

-
- "PyDevTools" is more than just a utility package; it's your trusty companion in the vast landscape of Python development. Crafted to streamline various facets of Python programming, it becomes your go-to toolkit for efficient and effective coding. -
-
Key Features: -
    -
  • Mathematical Magic: Seamlessly perform mathematical operations with a diverse range of functions and utilities.
  • -
  • User Input Simplified: Effortlessly handle and validate user input, making interaction smoother.
  • -
  • Output Perfection: Format and display output with finesse, enhancing readability.
  • -
  • File Management Made Easy: Efficiently navigate and manage files and directories for a more organized project.
  • -
  • Data Structures at Your Fingertips: Use powerful tools to work with data collections and structures.
  • -
  • Database Interaction: Seamlessly interact with databases, making data management a breeze.
  • -
-
Contribution and Documentation: - Explore comprehensive documentation, usage instructions, and examples on the dedicated web page. Contribute to the project's development on GitHub, where you can find the source code and actively participate in shaping the future of PyDevTools. -
-
Why PyDevTools Matters: -
"PyDevTools" is a catalyst for Python developers, aiming not just to streamline processes but to inspire mastery. It's about making Python development intuitive, enjoyable, and collectively empowering the community. -
-
Join us in revolutionizing Python development together! 🚀🐍 -
-
Technologies used:- Python
- -
-
-

- PyFileHandling - Streamlining Pythonic File Operations -

-
- "PyFileHandling" is a Python package meticulously crafted to simplify file handling operations, offering a robust toolkit for seamless manipulation of files and directories in your Python projects. -
-
Key Features: -
    -
  • Effortless File Operations: Perform file reading and writing with ease, enhancing your code's efficiency.
  • -
  • Streamlined Code Management: Simplify file operations for improved code readability and maintenance.
  • -
  • Pythonic File Handling: Elevate Python's native file capabilities, providing versatility and developer-friendly solutions.
  • -
-
Contribution and Documentation: -
Explore comprehensive documentation, usage instructions, and examples on the dedicated web page. Contribute to the project's development on GitHub, where you can find the source code and actively participate in shaping the future of PyFileHandling. -
-
Why PyFileHandling Matters: -
This package is not just about file handling; it's about making Python development more intuitive and enjoyable. Join the community, experiment with PyFileHandling in your projects, and share your insights to help us collectively enhance Python file management. -
-
Let's Revolutionize Python File Handling Together! 🚀📂 + +
+
+

Projects

+
+
+

+ Smart Manager - Securing Passwords, Simplifying Authentication +

+
+ "Smart Manager" is more than an application; it's a guardian for your sensitive data in the tech-driven era. Tailored to securely store and manage passwords, it stands as a robust solution that prioritizes data security, ease of use, and efficient management. Smart Manager, a Python command-line application, empowers users to safeguard their passwords locally. +
+
Smart Manager is a python command-line application. Which allow user to store there password locally in there own system. +
+
Warning: +
Don't share your authentic details with Smart Manager; it's a python project designed for fun and exploration of the world of Python. It doesn't ensure security. For secure password management, consider reputable alternatives. +
+
Key Features: +
    +
  • Secure Password Storage: Smart Manager ensures the secure storage of passwords locally.
  • +
  • Efficient Data Management: Organize and manage authentication-related data with ease.
  • +
+
Contribution and Documentation: +
Explore comprehensive documentation, usage instructions, and examples on the dedicated web page. Contribute to the project's development on GitHub, where you can find the source code and actively participate in shaping the future of Smart Manager. +
+
Why Smart Manager Matters: +
"Smart Manager" addresses the essential need for secure password management. Beyond that, it's an exploration of Python's capabilities, fostering a community-driven approach to improving password security. +
+
Let's revolutionize authentication together! 🚀🔐 +
+
Technologies used:- Python
+
-
Technologies used:- Python
- -
-

- Coding-Notes - Your Coding Compendium -

-
- "Coding-Notes" is more than just a platform; it's your comprehensive compendium for all things coding. This website is meticulously designed to provide developers with organized notes covering a wide array of programming topics, acting as a valuable reference whenever you need it. -
-
Key Features: -
    -
  • Cheatsheet Convenience: Think of it as your organized cheatsheet for various programming languages, available at your fingertips.
  • -
  • Snippet Efficiency: Get snippets that are well-organized, helping you write code efficiently within minutes.
  • -
  • Enhanced Visualization: "Coding-Notes" prioritizes great visualization and style for an enriched coding experience.
  • -
-
Supported Languages: -
"Coding-Notes" supports Python, C++, Java, HTML, CSS, and C-lang. The snippets provided range from basic to advanced, catering to developers at every skill level. -
-
Contribution and Documentation: -
Explore comprehensive documentation, usage instructions, and examples on the platform. Contribute to the project's development on GitHub, where you can find the source code and actively participate in shaping the future of Coding-Notes. -
-
Why Coding-Notes Matters: -
"Coding-Notes" is a pivotal resource for developers, offering not just a cheatsheet but a curated collection of organized snippets. It's about making coding more accessible, efficient, and enjoyable. -
-
Join us in crafting the ultimate coding resource! 🚀💻 +
+

+ PyFileHandling - Streamlining Pythonic File Operations +

+
+ "PyFileHandling" is a Python package meticulously crafted to simplify file handling operations, offering a robust toolkit for seamless manipulation of files and directories in your Python projects. +
+
Key Features: +
    +
  • Effortless File Operations: Perform file reading and writing with ease, enhancing your code's efficiency.
  • +
  • Streamlined Code Management: Simplify file operations for improved code readability and maintenance.
  • +
  • Pythonic File Handling: Elevate Python's native file capabilities, providing versatility and developer-friendly solutions.
  • +
+
Contribution and Documentation: +
Explore comprehensive documentation, usage instructions, and examples on the dedicated web page. Contribute to the project's development on GitHub, where you can find the source code and actively participate in shaping the future of PyFileHandling. +
+
Why PyFileHandling Matters: +
This package is not just about file handling; it's about making Python development more intuitive and enjoyable. Join the community, experiment with PyFileHandling in your projects, and share your insights to help us collectively enhance Python file management. +
+
Let's Revolutionize Python File Handling Together! 🚀📂 +
+
Technologies used:- Python
+
-
Technologies used:- Html, Css, Javascript
-
-
+
+
-
-

- Certificates & Achievements -

-
-
python(basic)
-
java(basic)
+ +
+
+

+ Certificates & Achievements +

+
+
python(basic)
+
java(basic)
+
-
+ +
-
+

Contacts Deatils and Social Media Handle

-
+
  • Whatsapp
  • Instagram