Hi, I'm Yousif
👋
I'm a web developer
Crafting High-Performance, Scalable Web Applications with Modern JavaScript Frameworks
Layout.tsx
import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/providers/theme-provider";

const roboto = Roboto({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Yousif Mamdouh portfolio",
  description: "Yousif Mamdouh is a passionate web developer specializing in creating innovative, user-friendly websites. Explore my portfolio, projects, and get in touch to bring your ideas to life.",
  keywords: ["React.Js", "Next.Js", "JavaScript", "TypeScript"],
  author: "Yousif M.Helal",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={roboto.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={true}>

          {/* Background Effect */}
          <div className="[--color:#0070f3] pointer-events-none absolute inset-0 -z-10 w-full h-[50rem] opacity-60 dark:opacity-40 [background-image:radial-gradient(circle_at_top,var(--color),transparent_90%)]" />

          {/* Main Content */}
          <main className="mx-auto w-full max-w-screen-xl px-6 md:px-12 relative">
            <section className="py-12 text-center">
              <h1 className="text-5xl font-bold">NextGen SaaS</h1>
              <p className="text-xl mt-4">Grow your business with our platform</p>
            </section>

            <section className="py-12 grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="p-6 bg-white shadow rounded-lg">
                <h2 className="text-2xl font-semibold">Feature 1</h2>
                <p className="mt-2">Detailed explanation of this awesome feature.</p>
              </div>
              <div className="p-6 bg-white shadow rounded-lg">
                <h2 className="text-2xl font-semibold">Feature 2</h2>
                <p className="mt-2">Detailed explanation of another great feature.</p>
              </div>
              <div className="p-6 bg-white shadow rounded-lg">
                <h2 className="text-2xl font-semibold">Feature 3</h2>
                <p className="mt-2">Another feature to help grow your business.</p>
              </div>
            </section>

            {children}
          </main>

          <footer className="py-8 text-center text-gray-600">
            <p>&copy; 2024 NextGen SaaS. All rights reserved.</p>
          </footer>
        </ThemeProvider>
      </body>
    </html>
  );
}

Showcasing My Journey

A Portfolio of Innovative Web Solutions

projectproject

Trendy

June - 2024

Trendy is a comprehensive e-commerce platform designed to provide a seamless shopping experience. The application offers robust authentication, product management, dynamic categorization, and secure checkout features.

Node.js
Next.js
TypeScript
TailwindCSS
NextAuth
Shadcn
Stripe
Zustand
Firebase
MongoDB
Resend
projectproject

Postpeak | Blogging Platform

July - 2023

Postpeak is a dynamic blogging platform built with Next.js and Prisma. Users can sign up, log in, create posts, view other posts, comment on them, and filter posts by category. This application provides a user-friendly interface for managing and exploring blog content.

Node.js
Next.js
JavaScript
NextAuth
Firebase
MongoDB
Prisma
projectproject

Momento

August - 2024

Momento is a dynamic social media platform designed for seamless user interaction and exploration. Our application offers a sleek design, robust features, and an intuitive user interface. Effortlessly create and explore posts while enjoying secure authentication and optimized data fetching with React Query for a smooth and responsive experience.

Node.js
React.js
TypeScript
React Query
Appwrite
TailwindCSS
Shadcn
projectproject

Movie Vault

January - 2024

Movie Vault is a movie listing application designed to help users search, browse, and explore movies efficiently. With features like infinite scroll, detailed movie information, and search functionality, Movie Vault offers an engaging experience for movie enthusiasts.

Node.js
Next.js
TypeScript
TailwindCSS
Server Actions
projectproject

Teba | Simple Description Website

May - 2023

Teba is a React website serves as a digital presence for our company, which specializes in trading and distributing raw materials for detergents. The site provides information about the company, its products, and how to get in touch. It is designed to be user-friendly and responsive, ensuring a seamless experience across all devices.

Node.js
React.js
JavaScript
TailwindCSS
projectproject

Full-Stack Web developer | portfolio

August - 2021

This project is a fullstack web application designed to serve as a personal portfolio. It highlights my professional journey, including my skills, projects, and experience. The website is fully responsive, providing an optimal viewing experience across a wide range of devices.

Node.js
React.js
JavaScript
TailwindCSS
React router

My Toolbox

The Skills and Technologies I Command

Contact me

01001000 01100101 01101100 01101100 01101111 00100000 01110111 01101111 01110010 01101100 01100100 00100001

I'm eager to collaborate on new projects and help bring your ideas to life. Whether you have a project in mind, need web development advice, or just want to connect, feel free to reach out

Get in Touch
logo

I'm currently available for work.

Copyright © 2024 Yousif M.Helal. All Rights Reserved.