bender/701616e6-a089-4be2-8e7f-9dab4f37acec
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_2 bender:version_1
...
pull from: bender:main
Branches Tags
bender:main bender:version_2 bender:version_1

8 Commits
version_1 ... main

Author SHA1 Message Date
bender
e17a03c83d Merge version_2 into main 
Merge version_2 into main
 2026-04-04 07:40:57 +00:00
bender
0fb2c54abb Update src/app/page.tsx 2026-04-04 07:40:54 +00:00
bender
fe001027a0 Merge version_2 into main 
Merge version_2 into main
 2026-04-04 07:40:29 +00:00
bender
b9203d4e56 Update src/app/styles/variables.css 2026-04-04 07:40:26 +00:00
bender
88d3d65182 Update src/app/page.tsx 2026-04-04 07:40:26 +00:00
bender
317b42daf3 Merge version_1 into main 
Merge version_1 into main
 2026-04-04 07:29:59 +00:00
bender
9fe41922c2 Merge version_1 into main 
Merge version_1 into main
 2026-04-04 07:29:32 +00:00
bender
bb3c6c233e Merge version_1 into main 
Merge version_1 into main
 2026-04-04 07:29:01 +00:00
2 changed files with 40 additions and 87 deletions
Expand all files Collapse all files

113
src/app/page.tsx
View File

@@ -2,9 +2,9 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import ContactForm from '@/components/form/ContactForm';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBase from '@/components/sections/footer/FooterBase';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
@@ -28,21 +28,14 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home", id: "home"},
{
name: "Info", id: "info"},
{
name: "Experience", id: "experience"},
{
name: "Projects", id: "projects"},
{
name: "Contact", id: "contact"},
{ name: "Home", id: "home" },
{ name: "Info", id: "info" },
{ name: "Experience", id: "experience" },
{ name: "Projects", id: "projects" },
{ name: "Contact", id: "contact" },
]}
brandName="𝔑onefolio"
button={{
text: "Contact Me", href: "#contact"
}}
button={{ text: "Contact Me", href: "#contact" }}
/>
</div>
@@ -51,24 +44,13 @@ export default function LandingPage() {
logoText="Ngabonziza Issa"
description="Frontend Developer & UI/UX Designer. I design fast, modern websites that help brands grow."
buttons={[
{
text: "View Projects", href: "#projects"},
{
text: "Hire Me", href: "#contact"},
{ text: "View Projects", href: "#projects" },
{ text: "Hire Me", href: "#contact" },
]}
slides={[
{
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=1", imageAlt: "3D Developer Object"},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=2", imageAlt: "3D Developer Object"},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=3", imageAlt: "3D Developer Object"},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=4", imageAlt: "3D Developer Object"},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=5", imageAlt: "3D Developer Object"},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=6", imageAlt: "3D Developer Object"},
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=1", imageAlt: "3D Developer Object" },
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=2", imageAlt: "3D Developer Object" },
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=3", imageAlt: "3D Developer Object" },
]}
/>
</div>
@@ -86,12 +68,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
features={[
{
title: "Frontend/UI", description: "HTML, CSS, Figma, JS, TypeScript, ReactJS", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=7", imageAlt: "3d floating sphere abstract"},
{
title: "Backend & Tools", description: "Node.js, Git, Tailwind, MongoDB", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=1", imageAlt: "modern app interface mobile"},
{
title: "Performance", description: "SEO Optimization, Accessibility, Mobile-First Design", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=1", imageAlt: "religious app interface design"},
{ title: "Frontend/UI", description: "HTML, CSS, Figma, JS, TypeScript, ReactJS", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-modern-abstract-sphere-art_23-2150937433.jpg?_wi=7", imageAlt: "3d floating sphere abstract" },
{ title: "Backend & Tools", description: "Node.js, Git, Tailwind, MongoDB", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=1", imageAlt: "modern app interface mobile" },
{ title: "Performance", description: "SEO Optimization, Accessibility, Mobile-First Design", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=1", imageAlt: "religious app interface design" },
]}
title="Skills & Experience"
description="Tools and technologies I use to build seamless web experiences."
@@ -105,24 +84,9 @@ export default function LandingPage() {
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "1", brand: "React Native", name: "Social Platform", price: "View Demo", rating: 5,
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=2"},
{
id: "2", brand: "React Native", name: "Muslims App", price: "View Demo", rating: 5,
reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=2"},
{
id: "3", brand: "Node.js", name: "Recipe Dashboard", price: "View Demo", rating: 5,
reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=1"},
{
id: "4", brand: "React Native", name: "Personal Portfolio", price: "View Demo", rating: 5,
reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=3"},
{
id: "5", brand: "Node.js", name: "E-Commerce", price: "View Demo", rating: 5,
reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=3"},
{
id: "6", brand: "Tailwind", name: "Landing Page", price: "View Demo", rating: 5,
reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=2"},
{ id: "1", brand: "React Native", name: "Social Platform", price: "View Demo", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg?_wi=2" },
{ id: "2", brand: "React Native", name: "Muslims App", price: "View Demo", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg?_wi=2" },
{ id: "3", brand: "Node.js", name: "Recipe Dashboard", price: "View Demo", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/high-protein-meal-with-smartphone-arrangement_23-2149089685.jpg?_wi=1" },
]}
title="Selected Projects"
description="A collection of my recent work."
@@ -130,38 +94,27 @@ export default function LandingPage() {
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "animated-grid"}}
text="Available for new projects. Let's create something extraordinary."
<ContactForm
title="Let's Connect"
description="Interested in working together? Send me a message."
tag="Contact"
inputPlaceholder="Your email address..."
buttonText="Send Message"
useInvertedBackground={false}
centered={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Socials", items: [
{
label: "Twitter", href: "#"},
{
label: "GitHub", href: "#"},
],
},
{
title: "Navigation", items: [
{
label: "Home", href: "#home"},
{
label: "Projects", href: "#projects"},
],
},
]}
<FooterBaseReveal
logoText="𝔑onefolio"
columns={[
{ title: "Navigation", items: [{ label: "Home", href: "#home" }, { label: "Projects", href: "#projects" }] },
{ title: "Contact", items: [{ label: "Email", href: "mailto:hello@example.com" }, { label: "Twitter", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #050012;
--card: #040121;
--foreground: #f0e6ff;
--primary-cta: #c89bff;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffffe6;
--primary-cta: #e6e6e6;
--primary-cta-text: #050012;
--secondary-cta: #1d123b;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #f0e6ff;
--accent: #684f7b;
--background-accent: #65417c;
--accent: #737373;
--background-accent: #737373;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);