Skip to content

first commit #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: final
Choose a base branch
from
Open

first commit #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.tsdk": "node_modules\\typescript\\lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
2 changes: 1 addition & 1 deletion app/head.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default function Head() {
return (
<>
<title>Hosna Qasmei</title>
<title>Mustafa Hussaini</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="description" content="Generated by create next app" />
<link
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function RootLayout({
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />
<body className="dark:bg-stone-900">
<body className="dark:bg-stone-900 p-3">
<ThemeProvider enableSystem={true} attribute="class">
<Navbar />
{children}
Expand Down
24 changes: 12 additions & 12 deletions components/AboutSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ const skills = [
{ skill: "CSS" },
{ skill: "JavaScript" },
{ skill: "TypeScript" },
{ skill: "Python" },
{ skill: "React" },
{ skill: "Next.js" },
{ skill: "Tailwind CSS" },
{ skill: "Shad-cn/ui" },
{ skill: "Laravel" },
{ skill: "Git" },
{ skill: "GitHub" },
{ skill: "Jupyter Notebooks" },
]

const AboutSection = () => {
Expand All @@ -30,22 +30,22 @@ const AboutSection = () => {
Get to know me!
</h1>
<p>
Hi, my name is Hosna and I am a{" "}
Hi, my name is Mustafa and I am a{" "}
<span className="font-bold">{"highly ambitious"}</span>,
<span className="font-bold">{"self-thought"}</span>,
<span className="font-bold">{" self-motivated"}</span>, and
<span className="font-bold">{" driven"}</span> software engineer
based in Los Angeles, CA.
<span className="font-bold">{" driven"}</span> software developer
based in the World.
</p>
<br />
<p>
I graduated from California State University, Northridge in 2019
with a BS in Computer Engineering and have been working in the
field ever since.
I graduated from KEU University, in 2023
with a BS in Computer Science and have been working as a self-thought develiper.
</p>
<br />
<p>
I have a wide range of hobbies and passions that keep me busy.
From reading, playing sports, traveling, to making YouTube videos,
From reading, playing sports, traveling, coding,
I am always seeking new experiences and love to keep myself
engaged and learning new things.
</p>
Expand Down Expand Up @@ -78,9 +78,9 @@ const AboutSection = () => {
<Image
src="/hero-image.png"
alt=""
width={325}
height={325}
className="hidden md:block md:relative md:bottom-4 md:left-32 md:z-0"
width={250}
height={250}
className="hidden rounded-xl shadow-lg mt-4 pt-4 md:block md:relative md:bottom-4 md:left-32 md:z-0"
/>
</div>
</div>
Expand Down
31 changes: 6 additions & 25 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Link from "next/link"
import React from "react"
import {
AiOutlineGithub,
Expand All @@ -12,16 +13,16 @@ const Footer = () => {
<hr className="w-full h-0.5 mx-auto mt-8 bg-neutral-200 border-0"></hr>
<div className="mx-auto p-4 flex flex-col text-center text-neutral-900 md:flex-row md:justify-between">
<div className="flex flex-row items-center justify-center space-x-1 text-neutral-500 dark:text-neutral-100">
© 2023 Hosna Qasmei<a href="/" className="hover:underline"></a>
© 2024 Mustafa Hussaini<a href="/" className="hover:underline"></a>
</div>
<div className="flex flex-row items-center justify-center space-x-2 mb-1">
<a href="https://github.com/hqasmei" rel="noreferrer" target="_blank">
<Link href="https://github.com/hqasmei" rel="noreferrer" target="_blank">
<AiOutlineGithub
className="hover:-translate-y-1 transition-transform cursor-pointer text-neutral-500 dark:text-neutral-100"
size={30}
/>
</a>
<a
</Link>
<Link
href="https://twitter.com/hqasmei"
rel="noreferrer"
target="_blank"
Expand All @@ -30,28 +31,8 @@ const Footer = () => {
className="hover:-translate-y-1 transition-transform cursor-pointer text-neutral-500 dark:text-neutral-100"
size={30}
/>
</a>
</Link>

<a
href="https://www.linkedin.com/in/hosnaqasmei/"
rel="noreferrer"
target="_blank"
>
<AiOutlineLinkedin
className="hover:-translate-y-1 transition-transform cursor-pointer text-neutral-500 dark:text-neutral-100"
size={30}
/>
</a>
<a
href="https://www.youtube.com/channel/UCQBMkSDgbxDb8usMeXmOZyA"
rel="noreferrer"
target="_blank"
>
<AiOutlineYoutube
className="hover:-translate-y-1 transition-transform cursor-pointer text-neutral-500 dark:text-neutral-100"
size={30}
/>
</a>
</div>
</div>
</footer>
Expand Down
7 changes: 3 additions & 4 deletions components/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,13 @@ const HeroSection = () => {
/>
</div>
<div className="md:mt-2 md:w-3/5">
<h1 className="text-4xl font-bold mt-6 md:mt-0 md:text-7xl">Hi, I&#39;m Hosna!</h1>
<h1 className="text-4xl font-bold mt-6 md:mt-0 md:text-7xl">Hi, I&#39;m Mustafa!</h1>
<p className="text-lg mt-4 mb-6 md:text-2xl">
I&#39;m a{" "}
<span className="font-semibold text-teal-600">
Software Engineer{" "}
Software Developer{" "}
</span>
based in Los Angeles, CA. Working towards creating software that
makes life easier and more meaningful.
based in the World. Now i'm a full-stack developer.
</p>
<Link
to="projects"
Expand Down
138 changes: 72 additions & 66 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,71 +33,77 @@ export default function Navbar() {
const pathname = usePathname()
const [navbar, setNavbar] = useState(false)
return (
<header className="w-full mx-auto px-4 sm:px-20 fixed top-0 z-50 shadow bg-white dark:bg-stone-900 dark:border-b dark:border-stone-600">
<div className="justify-between md:items-center md:flex">
<div>
<div className="flex items-center justify-between py-3 md:py-5 md:block">
<Link to="home">
<div className="container flex items-center space-x-2">
<h2 className="text-2xl font-bold">Hosna Qasmei</h2>
</div>
</Link>
<div className="md:hidden">
<button
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
onClick={() => setNavbar(!navbar)}
>
{navbar ? <IoMdClose size={30} /> : <IoMdMenu size={30} />}
</button>
</div>
</div>
</div>
<header className='w-full mx-auto px-4 sm:px-20 fixed top-0 z-50 shadow bg-white dark:bg-stone-900 dark:border-b dark:border-stone-600'>
<div className='justify-between md:items-center md:flex'>
<div>
<div className='flex items-center justify-between py-3 md:py-5 md:block'>
<Link to='home'>
<div className='container flex items-center space-x-2'>
<h2 className='text-3xl font-bold'>
Mustafa{" "}
<span className='bg-teal-600 hover:bg-teal-700 px-2 py-1 rounded-lg text-white'>
{" "}
Hussaini
</span>
</h2>
</div>
</Link>
<div className='md:hidden'>
<button
className='p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border'
onClick={() => setNavbar(!navbar)}
>
{navbar ? <IoMdClose size={30} /> : <IoMdMenu size={30} />}
</button>
</div>
</div>
</div>

<div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
navbar ? "block" : "hidden"
}`}
>
<div className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
{NAV_ITEMS.map((item, idx) => {
return (
<Link
key={idx}
to={item.page}
className={
"block lg:inline-block text-neutral-900 hover:text-neutral-500 dark:text-neutral-100 cursor-pointer"
}
activeClass="active"
spy={true}
smooth={true}
offset={-100}
duration={500}
onClick={() => setNavbar(!navbar)}
>
{item.label}
</Link>
)
})}
{currentTheme === "dark" ? (
<button
onClick={() => setTheme("light")}
className="bg-slate-100 p-2 rounded-xl"
>
<RiSunLine size={25} color="black" />
</button>
) : (
<button
onClick={() => setTheme("dark")}
className="bg-slate-100 p-2 rounded-xl"
>
<RiMoonFill size={25} />
</button>
)}
</div>
</div>
</div>
</div>
</header>
)
<div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
navbar ? "block" : "hidden"
}`}
>
<div className='items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0'>
{NAV_ITEMS.map((item, idx) => {
return (
<Link
key={idx}
to={item.page}
className={
"block lg:inline-block text-neutral-900 hover:text-neutral-500 dark:text-neutral-100 cursor-pointer"
}
activeClass='active'
spy={true}
smooth={true}
offset={-100}
duration={500}
onClick={() => setNavbar(!navbar)}
>
{item.label}
</Link>
);
})}
{currentTheme === "dark" ? (
<button
onClick={() => setTheme("light")}
className='bg-slate-100 p-2 rounded-xl'
>
<RiSunLine size={25} color='black' />
</button>
) : (
<button
onClick={() => setTheme("dark")}
className='bg-slate-100 p-2 rounded-xl'
>
<RiMoonFill size={25} />
</button>
)}
</div>
</div>
</div>
</div>
</header>
);
}
62 changes: 38 additions & 24 deletions components/ProjectsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,44 @@ import SlideUp from "./SlideUp"
import { BsGithub, BsArrowUpRightSquare } from "react-icons/bs"

const projects = [
{
name: "Thankful Thoughts",
description:
"ThankfulThoughts is a web app that generates an appreciative sentence of something or someone you are thankful for.",
image: "/thankfulthoughts.png",
github: "https://github.com/hqasmei/thankful-thoughts",
link: "https://thankfulthoughts.io/",
},
{
name: "PlatoIO",
description: "PlatoIO is a to do list app that built using the PERN stack.",
image: "/platoio.png",
github: "https://github.com/hqasmei/platoio",
link: "https://platoio.com/register",
},
{
name: "Kator Family Photos",
description:
"Kator Family Photos is a photos and video digitization service in the LA area.",
image: "/familyphotos.png",
github: "https://github.com/hqasmei/katorfamilyphotos",
link: "https://katorfamilyphotos.com/",
},
]
{
name: "Social Media",
description:
"a social media app, the forntend is completed and i am working on backend these days.",
image: "/SocialMedia.png",
github: "https://github.com/asmr-pro",
link: "",
},
{
name: "CRUD App",
description:
"a full-stack crud app using next js and mongodb",
image: "/curd-app.png",
github: "https://github.com/asmr-pro",
link: "",
},
{
name: "Age Calcultor",
description: "a simple age calculator using html, css and js.",
image: "/age.png",
github: "https://github.com/asmr-pro",
link: "",
},
{
name: "Weather App",
description: "a simple weather calculator using html, css and js.",
image: "/weather.png",
github: "https://github.com/asmr-pro",
link: "",
},
{
name: "Rock Paper Scissors",
description: "a funny game called Rock Paper Scissors using Javascript.",
image: "/rock.png",
github: "https://github.com/asmr-pro",
link: "",
},
];

const ProjectsSection = () => {
return (
Expand Down
Binary file added public/SocialMedia.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/age.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/crud-app.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/familyphotos.png
View file
Open in desktop
Binary file not shown.
Binary file removed public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file modified public/headshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/hero-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/platoio.png
View file
Open in desktop
Binary file not shown.
Binary file added public/rock.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/thankfulthoughts.png
View file
Open in desktop
Binary file not shown.
Binary file added public/weather.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.