diff --git a/1-responsive-web-design/5-personal-portfolio/index.html b/1-responsive-web-design/5-personal-portfolio/index.html
new file mode 100644
index 0000000..8bef505
--- /dev/null
+++ b/1-responsive-web-design/5-personal-portfolio/index.html
@@ -0,0 +1,102 @@
+
+
+
+
+ Personal Portfolio - CherryKitten
+
+
+
+
+
+
+
+
+ Personal Portfolio - CherryKitten
+ Hii, I'm Sammy! Welcome! Thank you for looking at my Portfolio :3
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/1-responsive-web-design/5-personal-portfolio/styles.css b/1-responsive-web-design/5-personal-portfolio/styles.css
new file mode 100644
index 0000000..b7b5d8c
--- /dev/null
+++ b/1-responsive-web-design/5-personal-portfolio/styles.css
@@ -0,0 +1,194 @@
+:root{
+ --color1: lightpink;
+ --color3: #020202;
+}
+
+html{
+ scroll-behavior: smooth;
+ text-align: center;
+}
+
+*{
+ margin: 0;
+ padding: 0;
+}
+
+@media (max-width: 1200px) {
+ html{
+ font-size: 16px;
+ }
+}
+
+@media (max-width: 900px) {
+ html{
+ font-size: 14px;
+ }
+}
+
+@media (max-width: 600px) {
+ html{
+ font-size: 12px;
+ }
+}
+
+#navbar{
+ background: var(--color1);
+ height: 3.5rem;
+ width: 100vw;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ border-radius: 0 0 5px 5px;
+}
+
+#navbar a:hover{
+ font-size: 2rem;
+}
+
+section{
+ max-width: 100vw;
+ min-height: 100vh;
+}
+
+#welcome-section{
+ background: linear-gradient(
+ lightblue,
+ lightskyblue
+ );
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ justify-content: center;
+}
+
+h1, h2, a, p, img{
+ overflow: hidden;
+ color: var(--color3);
+ text-decoration: none;
+ font-family: sans-serif;
+}
+
+h1, h2{
+ font-size: 4rem;
+ font-weight: 700;
+ font-family: monospace;
+}
+
+.welcome-text{
+ font-size: 2rem;
+}
+
+#projects{
+ background: linear-gradient(lightskyblue, lightseagreen);
+}
+
+.projects-flex{
+ display: flex;
+ justify-content: space-evenly;
+ flex-shrink: 5;
+ flex-wrap: wrap;
+ flex-direction: row;
+ gap: 3rem;
+}
+
+@media (max-width: 600px) {
+ .projects-flex{
+ flex-direction: column;
+ align-content: center;
+ gap: 1rem;
+ }
+}
+
+h2{
+ padding-top: 3.5rem;
+}
+
+.project-tile{
+ flex-shrink: 5;
+ max-width: 33%;
+ max-height: 20%;
+ overflow: visible;
+}
+
+.project-tile:hover{
+ background-color: lightgreen;
+ border-radius: 5px 5px;
+}
+
+.project-img{
+ max-width: 100%;
+ max-height: 100%;
+ height: 33vh;
+ width: 33vw;
+ object-fit: cover;
+}
+
+.project-text{
+ color: var(--color3);
+ font-family: sans-serif;
+ display: block;
+ bottom: 0;
+ font-size: 2rem;
+ overflow: visible;
+}
+
+#profile-link{
+ font-size: 3rem;
+ font-family: sans-serif;
+ background-color: var(--color1);
+ opacity: 75%;
+ color: var(--color3);
+ padding: 0.5rem 1rem;
+ margin: 1rem 0;
+ border-radius: 12px;
+ display: inline-block;
+}
+
+#profile-link:hover{
+ opacity: 100%;
+ background-color: lightgreen;
+}
+
+#contact{
+ background: linear-gradient(lightseagreen, lightgreen);
+}
+
+.disclaimer{
+ font-size: 0.5rem;
+}
+
+.social-links{
+ font-family: sans-serif;
+ font-size: 2rem;
+ height: 50vh;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-content: center;
+ flex-wrap: wrap;
+ gap: 3rem;
+
+}
+
+.social-links p{
+ display: inline;
+}
+
+footer{
+ background-color: var(--color1);
+ height: 3rem;
+ border-radius: 5px 5px 0 0;
+ position: sticky;
+ bottom: 0;
+ z-index: 10;
+}
+
+footer p{
+ padding-top: 1rem;
+}
diff --git a/index.html b/index.html
index a7ea860..9f32893 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,8 @@
Responsive Web Design
Survey Form
Tribute Page
- Technical Documentation Page
- Technical Documentation Page
+ Technical Documentation Page
+ Product landing page
+ Personal Portfolio
+ 
+ 
+ 
+