diff --git a/A3.2100010/21-paweb/public/assets/css/styles.css b/A3.2100010/21-paweb/public/assets/css/styles.css
new file mode 100644
index 00000000..048729ef
--- /dev/null
+++ b/A3.2100010/21-paweb/public/assets/css/styles.css
@@ -0,0 +1,146 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: #f4f4f4;
+}
+
+header,
+nav,
+section,
+footer {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+header img {
+    display:block;
+    margin: 0 auto;
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+}
+
+header h1 {
+    text-align: center;
+    margin-top: 10px;
+    color: #333;
+}
+
+header p {
+    text-align: center;
+    color: #777;
+}
+
+nav {
+    text-align: center;
+}
+
+nav a{
+    margin: 0 10px;
+    text-decoration: none;
+    color: #333;
+    font-weight: bold;
+    transition: color 0.3s ease-in-out;
+}
+
+nav a:hover {
+    color: #a35fe2c7;
+
+}
+
+section h2 {
+    color: #333;
+}
+
+section p {
+    color: #777;
+}
+
+.project {
+    margin-bottom: 20px;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out;
+}
+
+project img {
+    width: 100%;
+    height: auto;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+#blog {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.blog-post{
+    margin-bottom: 20px;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out;
+}
+
+.blog-post img {
+    width: 100%;
+    height: auto;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+.blog-content {
+    padding: 20px;
+}
+
+.blog-content h3 {
+    color: #333;
+}
+
+.blog-content a{
+    display: inline-block;
+    margin-top: 10px;
+    padding: 8px 16px;
+    background-color: #a35fe2c7;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: background-color 0.3s ease-in-out;
+}
+
+.blog-content a:hover{
+    background-color: #f06e5f;
+}
+
+.social{
+    margin-top: 10px;
+}
+
+.social a{
+    display: inline-block;
+    margin-right: 10px;
+    text-decoration: none;
+    color: #333;
+    transition: color 0.3s ease-in-out;
+}
+
+.social a:hover {
+    color: #a35fe2c7;
+}
+
+footer {
+    text-align: center;
+    color: #777;
+}
+
diff --git a/A3.2100010/21-paweb/resources/css/style.css b/A3.2100010/21-paweb/resources/css/style.css
new file mode 100644
index 00000000..048729ef
--- /dev/null
+++ b/A3.2100010/21-paweb/resources/css/style.css
@@ -0,0 +1,146 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: #f4f4f4;
+}
+
+header,
+nav,
+section,
+footer {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+header img {
+    display:block;
+    margin: 0 auto;
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+}
+
+header h1 {
+    text-align: center;
+    margin-top: 10px;
+    color: #333;
+}
+
+header p {
+    text-align: center;
+    color: #777;
+}
+
+nav {
+    text-align: center;
+}
+
+nav a{
+    margin: 0 10px;
+    text-decoration: none;
+    color: #333;
+    font-weight: bold;
+    transition: color 0.3s ease-in-out;
+}
+
+nav a:hover {
+    color: #a35fe2c7;
+
+}
+
+section h2 {
+    color: #333;
+}
+
+section p {
+    color: #777;
+}
+
+.project {
+    margin-bottom: 20px;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out;
+}
+
+project img {
+    width: 100%;
+    height: auto;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+#blog {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.blog-post{
+    margin-bottom: 20px;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out;
+}
+
+.blog-post img {
+    width: 100%;
+    height: auto;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+.blog-content {
+    padding: 20px;
+}
+
+.blog-content h3 {
+    color: #333;
+}
+
+.blog-content a{
+    display: inline-block;
+    margin-top: 10px;
+    padding: 8px 16px;
+    background-color: #a35fe2c7;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: background-color 0.3s ease-in-out;
+}
+
+.blog-content a:hover{
+    background-color: #f06e5f;
+}
+
+.social{
+    margin-top: 10px;
+}
+
+.social a{
+    display: inline-block;
+    margin-right: 10px;
+    text-decoration: none;
+    color: #333;
+    transition: color 0.3s ease-in-out;
+}
+
+.social a:hover {
+    color: #a35fe2c7;
+}
+
+footer {
+    text-align: center;
+    color: #777;
+}
+
diff --git a/A3.2100010/21-paweb/resources/views/front.blade.php b/A3.2100010/21-paweb/resources/views/front.blade.php
new file mode 100644
index 00000000..c36e6e57
--- /dev/null
+++ b/A3.2100010/21-paweb/resources/views/front.blade.php
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portofolio Saya</title>
+    <!-- Tambahkan stylesheet atau link lainnya jika diperlukan -->
+    <link rel="stylesheet" type="text/css" href="{!! asset('assets/css/styles.css') !!}">
+    <style>
+        /* CSS yang sudah ada tetap ada di sini */
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        .fadeIn {
+            animation: fadeIn 1s ease-in-out;
+        }
+
+        .project:hover img {
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+
+<body>
+
+    <header class="fadeIn">
+        <img src="https://i.ibb.co/pQbpkmW/cici.jpg" alt="cici" border="0">
+        <h1>Cici Wahyuningsih</h1>
+        <p>A3.2100010</p>
+        <p>Mahasiswa Prodi Sistem Informasi</p>
+    </header>
+
+    <nav class="fadeIn">
+        <a href="#tentang-saya">Tentang Saya</a>
+        <a href="#proyek-saya">Proyek Saya</a>
+        <a href="#kontak">Kontak</a>
+    </nav>
+
+    <section id="tentang-saya" class="fadeIn">
+        <h2>Tentang Saya</h2>
+        <p>Selamat datang di portofolio saya. Saya adalah seorang mahasiswa dengan minat dalam teknologi dan desain. Berikut adalah beberapa proyek yang telah saya kerjakan.</p>
+    </section>
+
+    <section id="proyek-saya" class="fadeIn">
+        <h2>Proyek Saya</h2>
+
+    <section id="Proyek">
+        <h2>Proyek Saya</h2>
+        <article class="blog-post">
+            <img src="https://i.ibb.co/DPBYFHx/UTS-SS.png" alt="proyek1">
+            <div class="blog-content">
+                <h3>Proyek Pertama</h3>
+                <p>Website Blog</p>
+                <p>Proyek pertama ini merupakan tugas dari mata kuliah Sistem Informasi Berbasis Web. Web ini menggunakan framework laravel dan bahasa pemrograman php serta css.</p>
+                <a href="{{ route('blog.index') }}">Kunjungi Website</a>
+            </div>
+        </article>
+        </section>
+
+        <section id="Proyek">
+        <article class="blog-post">
+            <img src="https://i.ibb.co/QnjBQdK/112.png" alt="Proyek 2">
+            <p> </p>
+            <img src="https://i.ibb.co/8xJbC40/111.png" alt="Proyek2">
+            <div class="blog-content">
+                <h3>Proyek Kedua</h3>                
+                <p>Proyek kedua ini merupakan proyek percobaan saya. Saya membuat ini karena iseng saat liburan kuliah tahun lalu. Proyek ini menggunakan framework codeigniter.</p>
+                <a href="#">Kunjungi Website</a>
+            </div>
+        </article>
+        
+        </section>
+
+
+
+
+        <section id="kontak" class="fadeIn">
+            <h2>Kontak</h2>
+            <p>Hubungi saya melalui email: <a href="mailto:youremail@example.com">youremail@example.com</a></p>
+            <div class="social">
+                <a href="https://www.linkedin.com/in/username" target="_blank">LinkedIn</a>
+                <a href="https://github.com/username" target="_blank">GitHub</a>
+            </div>
+        </section>
+
+        <footer class="fadeIn">
+            &copy; 2023 Portofolio Saya
+        </footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/A3.2100010/21-paweb/routes/web.php b/A3.2100010/21-paweb/routes/web.php
index bb7d2f40..01ebc6a1 100644
--- a/A3.2100010/21-paweb/routes/web.php
+++ b/A3.2100010/21-paweb/routes/web.php
@@ -15,5 +15,5 @@
 Route::resource('blog', BlogController::class);
 
 Route::get('/', function () {
-    return view('welcome');
+    return view('front');
 });
diff --git a/A3.2100010/UAS - A32100010.txt b/A3.2100010/UAS - A32100010.txt
new file mode 100644
index 00000000..b7e69fcb
--- /dev/null
+++ b/A3.2100010/UAS - A32100010.txt	
@@ -0,0 +1 @@
+https://a32100010.000webhostapp.com/
\ No newline at end of file
diff --git a/A3.2100010/UAS.txt b/A3.2100010/UAS.txt
new file mode 100644
index 00000000..b7e69fcb
--- /dev/null
+++ b/A3.2100010/UAS.txt
@@ -0,0 +1 @@
+https://a32100010.000webhostapp.com/
\ No newline at end of file
diff --git a/A3.2100010/hosting project.txt b/A3.2100010/hosting project.txt
new file mode 100644
index 00000000..c30602e0
--- /dev/null
+++ b/A3.2100010/hosting project.txt	
@@ -0,0 +1 @@
+https://a32100010.000webhostapp.com/blog
\ No newline at end of file