Spaces:

abhi2400
/

Abhijith_Portfolio

Running

App Files Files Community

abhi2400 commited on Sep 15, 2024

Commit

b7d41dd

verified ·

1 Parent(s): 12d7ca9

Upload 14 files

Browse files

Files changed (14) hide show

.hintrc +15 -0
Abhi.png +0 -0
Abhijith.jpg +0 -0
about.jpg +0 -0
another.jpeg +0 -0
github.png +0 -0
gmail.png +0 -0
index.html +141 -19
linkedin.png +0 -0
mybackground.jpeg +0 -0
profile.pdf +0 -0
project2.png +0 -0
project3.png +0 -0
style.css +540 -28

.hintrc ADDED Viewed

	@@ -0,0 +1,15 @@

+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "backdrop-filter"
+        ]
+      }
+    ]
+  }
+}

Abhi.png ADDED Viewed

Abhijith.jpg ADDED Viewed

about.jpg ADDED Viewed

another.jpeg ADDED Viewed

github.png ADDED Viewed

gmail.png ADDED Viewed

index.html CHANGED Viewed

@@ -1,19 +1,141 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio Website</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+</head>
+<body>
+    <header class="parallax" id="home">
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <hr>
+    <div class="background-container">
+        <p>
+            <strong>Welcome to my portfolio!</strong><br><br>
+            I'm <strong>Abhijith Parimalla</strong>, a passionate Computer Science student specializing in Artificial Intelligence and Machine Learning at Vardhaman College of Engineering.
+            With a strong foundation in programming languages like <strong>Python, Java, and C++</strong>, I enjoy applying theoretical concepts to real-world challenges through collaborative projects.
+            My journey is driven by a constant desire to learn and stay ahead of technology trends, always seeking new opportunities to innovate and make an impact.
+            Explore my work to see how I'm pushing the boundaries of AI and ML!
+        </p>
+        <h2>Want to know more about me? Scroll down!</h2>
+        <span class="material-symbols-outlined">arrow_downward</span>
+    </div>
+    <div class="mywork">
+        <section id="about">
+            <div class="about-content">
+                <div class="about-text">
+                    <h2>About Me</h2>
+                </div>
+                <div class="container">
+                    <div class="slide">
+                        <div class="box">
+                            <h2>Bio Data</h2>
+                            <p><b>Name:</b>AbhijithParimalla<br>
+                            <b>DOB:</b>20-05-2005<br>
+                            <b>Nationality:</b> Indian<br>
+                            </p>
+                        </div>
+                        <div class="box">
+                            <h2>Skills</h2>
+                            <p>C<br>
+                            C++<br>
+                            Java<br>
+                            Python<br>
+                            Problem solving<br>
+                            Web development</p>
+                        </div>
+                        <div class="box">
+                            <h2>Interests and Hobbies</h2>
+                            <p>Watching Movies<br>
+                            Reading Books<br>
+                            Watching Cricket<br>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="about-image">
+                    <img src="Abhijith.jpg" alt="Your Image">
+                </div>
+            </div>
+        </section>
+        <section id="projects">
+            <h2><b>My Projects</b></h2>
+            <div class="projects-container">
+                <div class="project-names">
+                    <ul>
+                        <li><a href="https://huggingface.co/spaces/abhi2400/Language_Translator" target="_blank" rel="noopener">Language Translator</a></li>
+                        <li><a href="https://huggingface.co/spaces/abhi2400/youtube_video_downloader" target="_blank"rel="noopener">Video downloader</a></li>
+                        <li><b>Apartment management system</b></li>
+                        <li><b>Hospital management system</b></li>
+                        <li><b>Cancer prediction Using Machine learning</b></li>
+                    </ul>
+                </div>
+                <div class="project-images">
+                    <div class="image-box">
+                        <img src="project2.png" alt="Project 1">
+                    </div>
+                    <div class="image-box">
+                        <img src="project3.png" alt="Project 2">
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <section id="contact">
+        <footer>
+            <div class="contact-icons">
+                <div class="icon-container">
+                    <a href="mailto:abhijeethparimalla@gmail.com" target="_blank" rel="noopener" aria-label="Email">
+                        <img src="gmail.png" alt="Gmail Icon" class="icon">
+                    </a>
+                    <p>Email</p>
+                </div>
+                <div class="icon-container">
+                    <a href="https://www.linkedin.com/in/abhijithparimalla/" target="_blank" rel="noopener" aria-label="LinkedIn">
+                        <img src="linkedin.png" alt="LinkedIn Icon" class="icon">
+                    </a>
+                    <p>LinkedIn</p>
+                </div>
+                <div class="icon-container">
+                    <a href="https://github.com/abhijeeth-pa" target="_blank" rel="noopener" aria-label="GitHub">
+                        <img src="github.png" alt="GitHub Icon" class="icon">
+                    </a>
+                    <p>GitHub</p>
+                </div>
+            </div>
+            <div class="resume-container">
+                <a href="profile.pdf" class="resume-button" download>Download My Resume</a>
+            </div>
+        </footer>
+    </section>
+</body>
+</html>

linkedin.png ADDED Viewed

mybackground.jpeg ADDED Viewed

profile.pdf ADDED Viewed

Binary file (43.7 kB). View file

project2.png ADDED Viewed

project3.png ADDED Viewed

style.css CHANGED Viewed

@@ -1,28 +1,540 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body, html {
+    font-family: Arial, sans-serif;
+    scroll-behavior: smooth;
+    height: 100%;
+}
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background-color: rgba(255, 255, 255, 0);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+}
+.header a {
+    color: rgb(214, 130, 27);
+    text-decoration: none;
+    font-weight: bold;
+    margin: 0 15px;
+}
+.header a:hover {
+    color: #f1c40f;
+}
+.background-container {
+    position: relative;
+    height: 100vh;
+    background-image: url('mybackground.jpeg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: white;
+    font-family: 'Georgia', serif;
+    font-size: 20px;
+    line-height: 1.6;
+    padding: 20px;
+}
+.background-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+.background-container p, .background-container h2 {
+    font-family:cursive;
+    position:relative;
+    z-index: 2;
+    color: white;
+    max-width: 800px;
+}
+.background-container p:hover, .background-container h2 :hover{
+    color: #80d3d3;
+}
+strong {
+    font-weight: bold;
+    color: #1a73e8;
+}
+p {
+    text-align: justify;
+    margin-bottom: 20px;
+}
+h2 {
+    text-align: center;
+    margin-top: 40px;
+}
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
+}
+nav ul li a {
+    color: goldenrod;
+    text-decoration:solid;
+    font-weight: bold;
+    font-size: 18px;
+    padding: 10px;
+}
+nav ul li a:hover {
+    background-color: rgba(214, 211, 18, 0.2);
+    border-radius: 5px;
+}
+section {
+    padding: 100px;
+    text-align: center;
+    color:#ccc;
+}
+#about, #projects {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 20px;
+}
+.about-content, .projects-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 80%;
+    max-width: 1200px;
+}
+.about-text h2 {
+    font-size: 36px;
+    font-weight: bold;
+    text-align: center;
+    color: whitesmoke;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    border-bottom: 3px solid #4CAF50;
+    display: inline-block;
+    padding-bottom: 10px;
+    margin-right:40px;
+}
+.about-image img, .projects-image img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 10%;
+    border: 2px solid #e7d213;
+    transition: transform 0.3s ease;
+    margin-left: 40px;
+}
+.about-image img:hover, .projects-image img:hover {
+    transform: translateY(-10%);
+}
+#projects h2 {
+    font-size: 36px;
+    font-weight: bold;
+    text-align: center;
+    color: whitesmoke;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    border-bottom: 3px solid #4CAF50;
+    display: inline-block;
+    padding-bottom: 10px;
+    margin-right:20px;
+}
+.mywork {
+    background-color:rgb(54, 69, 79);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: column;
+}
+@media screen and (max-width: 768px) {
+    .about-content, .projects-content {
+        flex-direction: column;
+        text-align: center;
+    }
+    .about-text, .projects-text {
+        margin: 0;
+        padding: 0;
+    }
+    .about-image img, .projects-image img {
+        margin-top: 20px;
+    }
+}
+#contact {
+    height: 30vh;
+    background-image: url('Abhi.png');
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: flex-end;
+    padding-left: 20px;
+}
+footer {
+    width: 100%;
+    display: flex;
+    justify-content: right;
+    padding-left: 20px;
+}
+.contact-icons {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    position: relative;
+    margin-top: 200px;
+}
+.icon-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+.icon-container p {
+    margin-top: 5px;
+    font-size: 14px;
+    color: white;
+}
+.contact-icons a {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+}
+.contact-icons .icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: transform 0.3s ease;
+}
+.contact-icons .icon:hover {
+    transform: scale(1.1);
+}
+@media (max-width: 768px) {
+    #contact {
+        height: 20vh;
+        padding-left: 10px;
+    }
+    .contact-icons {
+        gap: 20px;
+        margin-top: 10px;
+    }
+    .icon-container p {
+        font-size: 12px;
+    }
+    .contact-icons a {
+        width: 30px;
+        height: 30px;
+    }
+}
+.resume-container {
+    text-align: center;
+    margin-top: 210px;
+    margin-left:30px;
+}
+.resume-button {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    background-color: #007bff;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+.resume-button:hover {
+    background-color: #0056b3;
+}
+.container {
+    display: flex;
+    justify-content: center;
+    width: 90%;
+    max-width: 1200px;
+    background-color: rgba(255, 255, 255, 0);
+}
+.slide {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.box {
+    background: linear-gradient(135deg, #00c6ff, #0072ff);
+    color:#fff;
+    width: 30%;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+.box h2 {
+    font-size: 24px;
+    align-items:start;
+    margin-bottom:40px;
+}
+.box p {
+    font-size: 16px;
+    line-height: 1.5;
+    align-items: center;
+}
+.box:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
+}
+@media (max-width: 900px) {
+    .box {
+        width: 45%;
+    }
+}
+@media (max-width: 600px) {
+    .box {
+        width: 100%;
+    }
+}
+.projects-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    padding: 50px;
+    text-align: center;
+}
+.project-names, .project-images {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.names-slider {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.name-box {
+    background: linear-gradient(135deg, #00c6ff, #0072ff);
+    padding: 20px;
+    border-radius: 15px;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+.name-box:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+.name-box h3 {
+    font-size: 18px;
+}
+/* Big Slide for Project Images */
+.project-images {
+    max-width: 60%;
+}
+.image-slider {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.image-slider a {
+    display: block;
+    max-width: 100%;
+    transition: transform 0.3s ease;
+}
+.image-slider img {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+.image-slider a:hover img {
+    transform: scale(1.05);
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .projects-content {
+        flex-direction: column;
+    }
+    .project-images {
+        max-width: 90%;
+    }
+}
+.projects-container {
+    display: flex;
+    width: 80%;
+    max-width: 1200px;
+    height: 500px;
+    background-color: #fff;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.project-names {
+    width: 25%;
+    background: #1a73e8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.project-names ul {
+    list-style: none;
+    padding: 20px;
+    text-align: left;
+}
+.project-names li {
+    margin-bottom: 20px;
+}
+.project-names a {
+    color: #ffffff;
+    font-size: 18px;
+    text-decoration: none;
+    font-weight: bold;
+    display: block;
+    padding: 10px 15px;
+    transition: background-color 0.3s ease;
+}
+.project-names a:hover {
+    background-color: #004ba0;
+    border-radius: 5px;
+}
+.project-images {
+    width: 75%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+    background: #fafafa;
+}
+.project-images .image-box {
+    min-width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.3s ease;
+}
+.project-images img {
+    max-width: 100%;
+    max-height: 60%;
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+}
+.project-images .image-box:hover img {
+    transform: scale(1.05);
+}
+@media (max-width: 768px) {
+    .projects-container {
+        flex-direction: column;
+        height: auto;
+    }
+    .project-names {
+        width: 100%;
+    }
+    .project-images {
+        width: 100%;
+        height: 50px;
+    }
+    .project-images .image-box {
+        min-width: 100%;
+    }
+}