diff --git a/about.html b/about.html new file mode 100644 index 0000000..c6dc3f6 --- /dev/null +++ b/about.html @@ -0,0 +1,46 @@ + + + + + + about + + + +
+ +
+ +
+
+
+

+ I'm a passionate full-stack developer with 5+ years of experience building web applications that solve real-world problems. + I love turning complex requirements into elegant, user-friendly solutions. +

+ + Full Stack Developer +
+
+

My Journey

+

+ Started my journey in computer science with a fascination for how technology can transform lives. + Over the years, I've worked on diverse projects ranging from e-commerce platforms to fin tech applications, always focusing on performance, security, and user experience. + + When I'm not coding, you'll find me contributing to open source projects, mentoring junior developers, or exploring the latest in AI and machine learning. + I believe in continuous learning and staying ahead of the technology curve. +

+
+
+
+ + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..b0902e9 --- /dev/null +++ b/contact.html @@ -0,0 +1,54 @@ + + + + + + home + + + + +
+ +
+
+ +
+

Contact Me

+ +

Feel free to reach out for collaborations or just to say hi! +

+ +
+ + + + + + + + + + + +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..a814ccc --- /dev/null +++ b/home.html @@ -0,0 +1,36 @@ + + + + + + twinkle_home + + + +
+
+

Full Stack developer

+ + + + +
+
+

Welcome to My Portfolio

+

Coding my way to the future — passionate about building great experiences. + +

+ +
+
+ + + \ No newline at end of file diff --git a/img.jpg b/img.jpg new file mode 100644 index 0000000..e69de29 diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 diff --git a/portfolio.css b/portfolio.css new file mode 100644 index 0000000..e69de29 diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..ee9613f --- /dev/null +++ b/portfolio.html @@ -0,0 +1,49 @@ + + + + + + Portfolio + + +
+ +
+ +
+ +
+ +
+

My Projects

+
+

OTP-Verification-System

+

Developed a secure desktop application for One-Time Password (OTP) generation, email delivery, and verification. + +

+ firstProject +
+
+

html-css-mini-project

+

Created a mini project using HTML and CSS to enhance web development skills.

+ secondProject +
+
+

furniture_emporium_workshop

+

Developed a furniture emporium workshop website using HTML and CSS showcasing products and services.

+ thirdProject +
+
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5fe0533 --- /dev/null +++ b/style.css @@ -0,0 +1,196 @@ +* { + box-sizing: border-box; +} +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + height: 100%; + background-color: #f4f4f4; +} +header { + background-color: #e5c8ec; + padding: 1em 0; + margin: 0; + +} + +.name{ + display: flex; + justify-content: flex-start; + margin: 1em 2em 0 2em; + +} +nav ul{ + display: flex; + list-style: none; + padding-left:12px 0; + justify-content:flex-end; + gap: 2em; + margin: 0 auto; + + + +} + + +@media (max-width: 600px) { + nav ul { + flex-direction: column; + align-items: flex-end; + gap: 1em; + margin: 1em; + }} + +nav a{ + font-size: 1.2em; + font-weight: bold; + text-decoration: none; + color: #070707; + transition: color 0.3s ease-in-out; +} + +header a:hover { + color: #005fa3; +} + +.title { + + display: flex; + align-items:center ; + justify-content: center; + color:rgb(122, 46, 46); + padding-top:2.5rem; + margin-bottom: 2rem; + font-size: 2em; + font-weight: bold; + text-align: center; +} + +img{ + + display: block; + margin: 0 auto 2rem auto; + max-width: 100%; + + +} +.main{ + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem 1rem; + margin: 0 auto; + max-width: 900px; + width: 100%; +} + +/* about page css style */ + + + +.about{ + padding-left: 2rem; + padding-right: 2rem; + padding-top: 4rem; +} +.about p { + text-align: center; + color: #070707; + font-size: 1.5em; + margin-bottom: 6rem; +} + +.about h2 { + text-align: center; + color: #070707; + font-size: 2.5em; + margin-bottom: 2rem; + padding-top: 2rem; + +} +.journey img{ + width: 100%; + max-width: 500px; + display: block; + margin: 0 auto 2rem auto; + height:auto; +} + +@media (max-width: 600px) { + .title { + font-size: 1.3em; + padding-top: 1.5rem; + } + .journey img { + max-width: 100%; + } + .main { + padding: 1em 0.25em; + } +} + +.portfolio { + display: flex; +flex-direction: column; + justify-content: center; + text-align: center; + gap: 2rem; + padding: 2rem; + border: #070707; + gap: 4rem; + margin: 40px; + +} + +/* contact css styles */ +.mission{ + font-style: italic; + font-family:Georgia, 'Times New Roman', Times, serif; + color: blue; +} + +.form{ + display: flex; + flex-direction: column; + + padding: 2rem; + border-radius: 10px; + width: 100%; + max-width: 400px; + margin: 2rem auto; + gap: 1.5rem + +} + +.form>label{ + display: flex; + align-items: flex-start; + font-weight: bold; +} + +button:hover { + background-color: #005fa3; + } + +.form button{ + background-color: rgb(138, 142, 214); + color: white; + border: none; + padding: 0.7em; + cursor: pointer; + border-radius: 4px; + font-size: 1em; +} + +button:hover { + background-color: #005fa3; + } + +.footer{ + background-color: gainsboro; +padding: 1rem 0; +text-align: center; +margin-top: 4rem; + +}