diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 00000000..a6054237 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "portfolio-7893" + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..b17f6310 --- /dev/null +++ b/.gitignore @@ -0,0 +1,69 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +firebase-debug.log* +firebase-debug.*.log* + +# Firebase cache +.firebase/ + +# Firebase config + +# Uncomment this if you'd like others to create their own Firebase project. +# For a team working on the same Firebase project(s), it is recommended to leave +# it commented so all members can deploy to the same project(s) in .firebaserc. +# .firebaserc + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# dataconnect generated files +.dataconnect diff --git a/assets/project-1.png b/assets/project-1.png deleted file mode 100644 index 420ca249..00000000 Binary files a/assets/project-1.png and /dev/null differ diff --git a/assets/project-2.png b/assets/project-2.png deleted file mode 100644 index f818aacb..00000000 Binary files a/assets/project-2.png and /dev/null differ diff --git a/assets/project-3.png b/assets/project-3.png deleted file mode 100644 index 05e726bd..00000000 Binary files a/assets/project-3.png and /dev/null differ diff --git a/assets/resume-example.pdf b/assets/resume-example.pdf deleted file mode 100644 index cbae11ce..00000000 Binary files a/assets/resume-example.pdf and /dev/null differ diff --git a/firebase.json b/firebase.json new file mode 100644 index 00000000..e7829392 --- /dev/null +++ b/firebase.json @@ -0,0 +1,10 @@ +{ + "hosting": { + "public": "public", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ] + } +} diff --git a/public/404.html b/public/404.html new file mode 100644 index 00000000..829eda8f --- /dev/null +++ b/public/404.html @@ -0,0 +1,33 @@ + + + + + + Page Not Found + + + + +
+

404

+

Page Not Found

+

The specified file was not found on this website. Please check the URL for mistakes and try again.

+

Why am I seeing this?

+

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

+
+ + diff --git a/public/assets/Apurva Kansara.pdf b/public/assets/Apurva Kansara.pdf new file mode 100644 index 00000000..1e4d7a41 Binary files /dev/null and b/public/assets/Apurva Kansara.pdf differ diff --git a/assets/about-pic.png b/public/assets/about-pic.png similarity index 100% rename from assets/about-pic.png rename to public/assets/about-pic.png diff --git a/public/assets/about-picc.JPG b/public/assets/about-picc.JPG new file mode 100644 index 00000000..37fdf6dd Binary files /dev/null and b/public/assets/about-picc.JPG differ diff --git a/assets/arrow.png b/public/assets/arrow.png similarity index 100% rename from assets/arrow.png rename to public/assets/arrow.png diff --git a/assets/checkmark.png b/public/assets/checkmark.png similarity index 100% rename from assets/checkmark.png rename to public/assets/checkmark.png diff --git a/assets/education.png b/public/assets/education.png similarity index 100% rename from assets/education.png rename to public/assets/education.png diff --git a/assets/email.png b/public/assets/email.png similarity index 100% rename from assets/email.png rename to public/assets/email.png diff --git a/assets/experience.png b/public/assets/experience.png similarity index 100% rename from assets/experience.png rename to public/assets/experience.png diff --git a/assets/github.png b/public/assets/github.png similarity index 100% rename from assets/github.png rename to public/assets/github.png diff --git a/assets/linkedin.png b/public/assets/linkedin.png similarity index 100% rename from assets/linkedin.png rename to public/assets/linkedin.png diff --git a/assets/profile-pic-2.png b/public/assets/profile-pic-2.png similarity index 100% rename from assets/profile-pic-2.png rename to public/assets/profile-pic-2.png diff --git a/assets/profile-pic.png b/public/assets/profile-pic.png similarity index 100% rename from assets/profile-pic.png rename to public/assets/profile-pic.png diff --git a/public/assets/profile-picc.JPG b/public/assets/profile-picc.JPG new file mode 100644 index 00000000..c7471365 Binary files /dev/null and b/public/assets/profile-picc.JPG differ diff --git a/public/assets/project-1.png b/public/assets/project-1.png new file mode 100644 index 00000000..86f689db Binary files /dev/null and b/public/assets/project-1.png differ diff --git a/public/assets/project-2.png b/public/assets/project-2.png new file mode 100644 index 00000000..64e1d791 Binary files /dev/null and b/public/assets/project-2.png differ diff --git a/public/assets/project-3.png b/public/assets/project-3.png new file mode 100644 index 00000000..73b1e32f Binary files /dev/null and b/public/assets/project-3.png differ diff --git a/index.html b/public/index.html similarity index 61% rename from index.html rename to public/index.html index d68c61a3..c94628c8 100644 --- a/index.html +++ b/public/index.html @@ -7,21 +7,23 @@ My Portfolio +
- John Doe profile picture + Apurva Kansara profile picture

Hello, I'm

-

John Doe

+

Apurva Kansara

Frontend Developer

@@ -66,7 +68,7 @@

John Doe

src="./assets/github.png" alt="My Github profile" class="icon" - onclick="location.href='https://github.com/'" + onclick="location.href='https://github.com/adx7893'" />
@@ -74,53 +76,47 @@

John Doe

Get To Know More

About Me

-
-
- Profile picture -
-
-
-
- Experience icon -

Experience

-

2+ years
Frontend Development

-
-
- Education icon -

Education

-

B.Sc. Bachelors Degree
M.Sc. Masters Degree

-
-
-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quis - reprehenderit et laborum, rem, dolore eum quod voluptate - exercitationem nobis, nihil esse debitis maxime facere minus sint - delectus velit in eos quo officiis explicabo deleniti dignissimos. - Eligendi illum libero dolorum cum laboriosam corrupti quidem, - reiciendis ea magnam? Nulla, impedit fuga! -

-
-
-
+
+
+ +
+ Profile picture +
+
+

+ Apurva Kansara here. + I am a proficient IT professional holding a degree in Bachelor's of Computer Science in Information Technology at GLS University, Ahmedabad, India. My second institution of higher learning is at Humber College. With a hands-on, problem-solving attitude, I commit myself to constant training, building relationships, and contributing effectively to the community with projects and collaboration. I am enthusiastic about building my career in IT, believe in group work, prefer teamwork and diverse views, and would love to contribute greatly to the industry. +

+
+
+ + +
+
+ Experience icon +

Experience

+

3+ years
Full-stack developer

+
+
Arrow icon +

Education

+

B.Sc.IT from GLS University
Pg Diploma from Humber Polytechnic

+
+
+


+

Explore My

@@ -181,25 +177,85 @@

JavaScript

class="icon" />
-

TypeScript

-

Basic

+

React JS

+

Experienced

-
- + +
+

+ Backend Development

+
+
+ Experience icon +
+

Java

+

Experienced

+
+
+
+ Experience icon
-

Material UI

+

Python

Intermediate

-
-
-
+
+
+ Experience icon +
+

Spring Boot

+

Intermediate

+
+
+
+ Experience icon +
+

JavaScript

+

Experienced

+
+
+
+ Experience icon +
+

PHP

+

Experienced

+
+
+
+ Experience icon +
+

JQuery

+

Experienced

+
+
+
-

Frontend Development

+

Database Development

Frontend Development alt="Experience icon" class="icon" /> -
-

PostgreSQL

-

Basic

+

SQL

+
    +
  • PostgreSQL
    • +
  • MySQL
    • +
  • Oracle SQL
    • +
  • MS SQL
    • +
+

Experienced

@@ -246,15 +307,10 @@

Git

+ - Arrow icon

Browse My Recent

@@ -269,17 +325,17 @@

Projects

class="project-img" /> -

Project One

+

SpotiWeb

@@ -293,17 +349,17 @@

Project One

class="project-img" />
-

Project Two

+

Lace-Up

@@ -317,66 +373,22 @@

Project Two

class="project-img" />
-

Project Three

+

Moving Cubes

-
- Arrow icon
-
-

Get in Touch

-

Contact Me

-
-
- -

Example@gmail.com

-
-
- LinkedIn icon -

LinkedIn

-
-
+
- + diff --git a/mediaqueries.css b/public/mediaqueries.css similarity index 100% rename from mediaqueries.css rename to public/mediaqueries.css diff --git a/public/script.js b/public/script.js new file mode 100644 index 00000000..ad84873c --- /dev/null +++ b/public/script.js @@ -0,0 +1,23 @@ +const darkModeToggle = document.querySelector('.dark-mode-toggle'); +const body = document.body; + +darkModeToggle.addEventListener('click', () => { + body.classList.toggle('dark-mode'); +}); + + +function toggleMenu() { + const menu = document.querySelector('.hamburger-menu'); + menu.classList.toggle('open'); +} + +function toggleMenu() { + const menu = document.querySelector(".menu-links"); + const icon = document.querySelector(".hamburger-icon"); + + // Ensure the menu and icon elements exist before toggling + if (menu && icon) { + menu.classList.toggle("open"); + icon.classList.toggle("open"); + } +} diff --git a/style.css b/public/style.css similarity index 70% rename from style.css rename to public/style.css index 3c5188ba..193a8479 100644 --- a/style.css +++ b/public/style.css @@ -66,10 +66,32 @@ a:hover { cursor: default; } +/* ---------------------------------------- */ +body.dark-mode { + background-color: #111111; + color: #ffffff; +} + +.dark-mode a { + color: #ffffff; +} + +/* Other elements that need to be adjusted */ +.dark-mode .section-container { + background-color: #222222; +} + +.dark-mode .btn { + background-color: #333333; + color: #ffffff; +} +/* ---------------------------------------- */ + + /* HAMBURGER MENU */ #hamburger-nav { - display: none; + display: none; /* Initially hidden, can be displayed with media queries for responsiveness */ } .hamburger-menu { @@ -90,7 +112,7 @@ a:hover { width: 100%; height: 2px; background-color: black; - transition: all 0.3 ease-in-out; + transition: all 0.3s ease-in-out; } .menu-links { @@ -101,7 +123,8 @@ a:hover { width: fit-content; max-height: 0; overflow: hidden; - transition: all 0.3 ease-in-out; + transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; + padding: 0; /* Initially no padding */ } .menu-links a { @@ -111,7 +134,7 @@ a:hover { font-size: 1.5rem; color: black; text-decoration: none; - transition: all 0.3 ease-in-out; + transition: color 0.3s ease-in-out; } .menu-links li { @@ -119,32 +142,33 @@ a:hover { } .menu-links.open { - max-height: 300px; + max-height: 300px; /* Expands smoothly */ + padding: 10px 0; /* Padding added when open */ } +.menu-links a:hover { + color: #f39c12; /* Hover effect for the links */ +} + +/* Transforming hamburger icon to X shape */ .hamburger-icon.open span:first-child { - transform: rotate(45deg) translate(10px, 5px); + transform: rotate(45deg) translate(5px, 5px); } .hamburger-icon.open span:nth-child(2) { - opacity: 0; + opacity: 0; /* Middle bar disappears */ } .hamburger-icon.open span:last-child { - transform: rotate(-45deg) translate(10px, -5px); + transform: rotate(-45deg) translate(5px, -5px); } -.hamburger-icon span:first-child { +/* Reset transformations when the menu is closed */ +.hamburger-icon span { transform: none; -} - -.hamburger-icon span:first-child { opacity: 1; } -.hamburger-icon span:first-child { - transform: none; -} /* SECTIONS */ @@ -170,10 +194,24 @@ section { } .section__pic-container { - display: flex; - height: 400px; - width: 400px; + display: flex; + justify-content: center; /* Horizontally center the container */ + align-items: center; /* Vertically center the   + container */ + max-height: 400px; + max-width: 100%; margin: auto 0; + border-radius: 50%; + overflow: hidden; /* Ensures the content stays within the circle */ +} + +.section__pic-container img { + display: block; /* Prevents the image from being treated as an inline element */ + height: 100%; + /* Remove max-width if not necessary */ + object-fit: cover; /* Ensures the image covers the container without distortion */ + margin: 0; /* Removes any default margins */ + padding: 0; /* Removes any default padding */ } .section__text { @@ -268,6 +306,7 @@ section { } .about-containers { + display: flex; /* Flexbox for side-by-side layout */ gap: 2rem; margin-bottom: 2rem; margin-top: 2rem; @@ -278,24 +317,32 @@ section { flex-direction: column; } -.about-containers, -.about-details-container { - display: flex; +.section-container { + display: flex; /* Added flexbox to align side by side */ + gap: 2rem; + height: 80%; + align-items: center; /* Aligns image and text vertically */ } -.about-pic { - border-radius: 2rem; +.section__pic-container { + height: 400px; + width: 400px; + margin: auto 0; } -.arrow { - position: absolute; - right: -5rem; - bottom: 2.5rem; +.about-pic { + border-radius: 2rem; + display: block; + max-height: 400px; + max-width: 100%; + margin: auto; + border-radius: 50%; + overflow: hidden; } .details-container { - padding: 1.5rem; - flex: 1; + padding: 1rem; + flex: 1; /* Ensure the details container takes up available space */ background: white; border-radius: 2rem; border: rgb(53, 53, 53) 0.1rem solid; @@ -303,17 +350,6 @@ section { text-align: center; } -.section-container { - gap: 4rem; - height: 80%; -} - -.section__pic-container { - height: 400px; - width: 400px; - margin: auto 0; -} - /* EXPERIENCE SECTION */ #experience { @@ -366,8 +402,9 @@ article .icon { .project-img { border-radius: 2rem; - width: 90%; + max-width: 100%; height: 90%; + object-fit: cover; } .project-title { diff --git a/script.js b/script.js deleted file mode 100644 index 9e776eaf..00000000 --- a/script.js +++ /dev/null @@ -1,6 +0,0 @@ -function toggleMenu() { - const menu = document.querySelector(".menu-links"); - const icon = document.querySelector(".hamburger-icon"); - menu.classList.toggle("open"); - icon.classList.toggle("open"); -}