updated files

components/MainLayout.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Navbar from "./Navbar";
+import Link from "next/link";
+
+const MainLayout = ({ children }) => {
+  return (
+    <div >
+      <Navbar></Navbar>
+      <main>{children}</main>
+    </div>
+  );
+};
+
+export default MainLayout;

components/Navbar.js

@@ -0,0 +1,85 @@
+import React from "react";
+
+const Navbar = () => {
+  return (
+    <nav class="bg-light">
+
+      <div class="max-w-screen-xl flex flex-wrap  justify-between mx-auto p-4">
+        <div className="flex flex-row space-x-12 ">
+        <img
+              src="../images/web-logo-white.png"
+              className="h-auto h-10 w-10 mr-2 scale-150 align-left" 
+              alt="Logo"
+            />
+
+          <a
+            target="_blank"
+            className="flex items-center space-x-3 rtl:space-x-reverse px-5 hover:scale-125 ease-in-out duration-200 hover:drop-shadow-lg"
+            href="https://www.linkedin.com/in/satyamsingh7/"
+          >
+            <img
+              src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/linkedin-app-white-icon.png"
+              className="h-auto h-10 w-10 mr-2"
+              alt="LinkedIn"
+            />
+          </a>
+          <a
+            target="_blank"
+            className="flex items-center space-x-3 rtl:space-x-reverse px-5 hover:scale-125 ease-in-out duration-200 hover:drop-shadow-lg"
+            href="https://github.com/satyams1107"
+          >
+            <img
+              src="https://png2.cleanpng.com/sh/dcaa84daee2a9ad9ecef29f927ecfbcd/L0KzQYm3WMA4N6ttiZH0aYP2gLBuTfdqfJl6ep95YXfog37zjBdwNaNqiNH8aYTygsq0hv9zc15sgeZxdXKwfLFuj70yNZ5mf9d3dIn2PYbpVsllbWg2eqc6Mka4Pom8WMYxP2c7Sac8M0a5RImBUcc1OWgziNDw/kisspng-github-pages-logo-repository-fork-github-logo-1-magentys-5b69de71b51265.8586076615336648817417.png"
+              className="h-auto h-10 w-10 mr-2"
+              alt="Github"
+            />
+          </a>
+          <a
+            target="_blank"
+            className="flex items-center space-x-3 rtl:space-x-reverse px-5 hover:scale-125 ease-in-out duration-200 hover:drop-shadow-lg"
+            href="https://www.instagram.com/satyams1107/"
+          >
+            <img
+              src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/instagram-white-icon.png"
+              className="h-auto h-10 w-10 mr-2"
+              alt="Instagram"
+            />
+          </a>
+          <a
+            target="_blank"
+            className="flex items-center space-x-3 rtl:space-x-reverse px-5 hover:scale-125 ease-in-out duration-200 hover:drop-shadow-lg"
+            href="https://mail.google.com/mail/?view=cm&fs=1&to=singh.satyam0617@gmail.com"
+          >
+            <img
+              src="https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_White_512px.png"
+              className="h-auto h-10 w-10 mr-2"
+              alt="Email"
+            />
+          </a>
+        </div>
+        <button
+          data-collapse-toggle="navbar-default"
+          type="button"
+          className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          aria-controls="navbar-default"
+          aria-expanded="false"
+        ></button>
+        <div className="hidden w-full md:block md:w-auto" id="navbar-default">
+          <ul className="font-medium flex flex-col  p-5 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700 text-2xl bg-opacity-60">
+            <li>
+              <a
+                target="_blank"
+                href="https://drive.google.com/file/d/1q8AObve7Di_mKBGlMzJ2uEyZLu7s6E5h/view?usp=sharing"
+                className="block py-2 px-5 text-gray-900 rounded-xl w-[110px] h-[40px] flex items-center justify-center hover:bg-dark md:hover:bg-dark md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-dark bg-opacity-60 hover:scale-105 ease-in-out duration-200"
+              >
+                Resume
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

components/Projects.js

@@ -0,0 +1,87 @@
+import React from "react";
+export const project = [
+  {
+    id: 1,
+    logo: "../images/ufit.png",
+    name: "U-Fit",
+    description:
+      "Developed the UI layout using Figma and translated it over to a Flutter application using Dart to create an app responsible for scheduling daily workouts and facilitated machine-learning capabilities into the app. Implemented Google Firebase as the primary backend and database for user authentication and data storage",
+    skills: ["flutter", "firebase", "dart", "authentication", "app-dev"],
+  },
+  {
+    id: 2,
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Full-protection-shackle-frwiki.svg/1446px-Full-protection-shackle-frwiki.svg.png",
+    name: "PassSafe",
+    description:
+      "Designed a user-friendly web interface for managing passwords that implements the RSA encryption algorithm along with MySQL database to securely store and manage password data. Integrated the Flask framework to handle routing and template rendering with HTML, CSS, and the Bootstrap front-end framework.",
+    skills: [
+      "python",
+      "MySQL",
+      "flask",
+      "HTML",
+      "CSS",
+      "full-stack",
+      "encryption",
+    ],
+  },
+  {
+    id: 3,
+    logo: "../images/web-logo.png",
+    name: "Portfolio Website",
+    description:
+      "Explored web development by building a personal website to share past projects I developed during my classes or in my free time, experiences gained through internships and RSOs, and contact information to enable people to connect with me. I used the Next.js framework alongside Tailwind CSS to create an appealing website to showcase my profile.",
+    skills: ["nextjs", "tailwind", "css", "javascript", "full-stack", "web-dev"],
+  },
+];
+
+const Projects = () => {
+  return (
+    <>
+     <div className="bg-dark px-10 pt-5 pb-2 text-5xl font-bold">
+        <h>Projects</h>
+      </div>
+      <div className="relative flex items-center content-center bg-dark py-5">
+        <div
+          id="slider"
+          className="w-auto h-[auto] items-center content-center soverflow-x-scroll overflow-y-hidden scroll whitespace-nowrap scroll-smooth scrollbar-hide space-x-10"
+        >
+          {project.map((item) => (
+            <div
+              className="w-[650px] h-[400px] inline-block cursor-pointer scale-90 hover:scale-95 ease-in-out duration-300 shadow-lg bg-white rounded-xl p-2 shadow-2xl hover:shadow-[0_0_2px_#fff,inset_0_0_5px_#fff,0_0_5px_#08f,0_0_10px_#08f,0_0_10px_#08f]
+             "
+            >
+              <a href={item.link}>
+                <div className=" w-auto">
+                  <div className="flex flex-rowjustify-center items-center">
+                    <img
+                      className="w-auto h-[200px] p-5"
+                      src={item.logo}
+                      alt="/"
+                    />
+                    <div className="flex flex-col w-[400px]">
+                      <div class=" text-3xl mb-2 text-center">
+                        <p className="text-black font-bold">{item.name}</p>
+                      </div>
+                      <div className="text-lg text-center text-black text-wrap">
+                        {item.description}
+                      </div>
+                      <div className="pl-12 pt-7 pb-2 flex flex-wrap text-l ">
+                        {item.skills.map((skill) => (
+                          <span className="inline-block bg-beige rounded-full px-3 py-1  font-semibold text-gray-700 mr-2 mb-2">
+                            {skill}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Projects;

components/data.js

@@ -0,0 +1,28 @@
+import { getEnabledExperimentalFeatures } from "next/dist/server/config";
+
+export const experience = [
+    {
+    id: 1,
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Garmin_logo_2006.svg/2560px-Garmin_logo_2006.svg.png",
+    name: "Garmin",
+    role: "Software Engineer Intern",
+    location: "Olathe, Kansas",
+    date: "5/13/2024-8/2/2024",
+    },
+    {
+        id: 2,
+        logo: "https://tinyurl.com/2c4srh5b",
+        name: "Illinois Space Society",
+        role: "Avionic Software Engineer",
+        location: "Champaign, Illinois",
+        date: "8/22/2023-Present",
+    },
+    {
+        id: 3,
+        logo: "https://tinyurl.com/4c2bjpp4",
+        name: "Illini EV Concept",
+        role: "Embedded Engineer",
+        location: "Champaign, Illinois",
+        date: "8/22/2022-Present",
+    },
+]

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      'white': '#ffffff',
+      'purple': '#3f3cbb',
+      'midnight': '#121063',
+      'metal': '#565584',
+      'tahiti': '#3ab7bf',
+      'silver': '#ecebff',
+      'bubble-gum': '#ff77e9',
+      'bermuda': '#78dcca',
+      'black' : '#000000',
+      'dark' : '#141E30',
+      'light' : '#243B55',
+      'beige' : '#2A2B2D',
+    },
+  },
+  plugins: [
+    require('tailwind-scrollbar-hide')
+  ],
+}
+