Contact Me
-Got a project waiting to be realized? Let's collaborate and make it happen!
++ Got a project waiting to be realized? Let's collaborate and make it + happen! +
+ className="contact-form">
+
{
setEmail(e.target.value);
}}
error={emailError}
- helperText={emailError ? "Please enter your email or phone number" : ""}
+ helperText={emailError ? "Please enter your email" : ""}
/>
-
-
- {React.Children.map(props.children, (child, i) => {
+ {Children.map(props.children, (child: React.ReactNode, i: number) => {
return (
-
@@ -29,4 +57,4 @@ function Main() {
);
}
-export default Main;
\ No newline at end of file
+export default Main;
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index aa15955fc..798cc6c56 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
diff --git a/src/components/Project.tsx b/src/components/Project.tsx
index 2c3c87e77..8bc822f19 100644
--- a/src/components/Project.tsx
+++ b/src/components/Project.tsx
@@ -1,74 +1,58 @@
-import React from "react";
-import mock01 from '../assets/images/mock01.png';
-import mock02 from '../assets/images/mock02.png';
-import mock03 from '../assets/images/mock03.png';
-import mock04 from '../assets/images/mock04.png';
-import mock05 from '../assets/images/mock05.png';
-import mock06 from '../assets/images/mock06.png';
-import mock07 from '../assets/images/mock07.png';
-import mock08 from '../assets/images/mock08.png';
-import mock09 from '../assets/images/mock09.png';
-import mock10 from '../assets/images/mock10.png';
-import '../assets/styles/Project.scss';
+import image1 from "../assets/images/image1.jpg";
+import image2 from "../assets/images/image2.svg";
+import image3 from "../assets/images/image3.webp";
+import image4 from "../assets/images/image4.avif";
+import image5 from "../assets/images/image5.jpg";
+import "../assets/styles/Project.scss";
+import ProjectCard from "./ProjectCard";
-function Project() {
- return(
+interface ProjectProps {
+ mode: string;
+}
+
+function Project({ mode }: ProjectProps) {
+ return (
-
);
}
-export default Timeline;
\ No newline at end of file
+export default Timeline;
diff --git a/src/components/TimelineItem.tsx b/src/components/TimelineItem.tsx
new file mode 100644
index 000000000..59e75e8e7
--- /dev/null
+++ b/src/components/TimelineItem.tsx
@@ -0,0 +1,49 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { VerticalTimelineElement } from "react-vertical-timeline-component";
+
+interface TimelineItemProps {
+ title: string;
+ location: string;
+ description: string;
+ date: string;
+ icon: IconDefinition; // e.g., faBriefcase
+ mode: string; // 'dark' or 'light'
+}
+
+function TimelineItem({
+ title,
+ location,
+ description,
+ date,
+ icon,
+ mode,
+}: TimelineItemProps) {
+ const contentStyle =
+ mode === "dark"
+ ? { background: "#b5c4e3", color: "white" } // Dark mode colors for content
+ : { background: "white", color: "#0d1116" }; // Light mode colors for content
+
+ const contentArrowStyle =
+ mode === "dark"
+ ? { borderRight: "7px solid #0c2454" }
+ : { borderRight: "7px solid white" };
+
+ const iconStyle = { background: "#5000ca", color: "rgb(39, 40, 34)" }; // Keep original icon style
+
+ return (
+
+
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc..000000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
Expertise
-
-
+function Expertise({ mode }: ExpertiseProps) {
+ return (
+
-
+const labelsThird = ["OpenAI", "LangChain", "Hugging Face", "Streamlit"];
- Full Stack Web Development
-I have built a diverse array of web applications from scratch using modern technologies such as React and Flask. I have a strong proficiency in the SDLC process and frontend + backend development.
-
- Tech stack:
- {labelsFirst.map((label, index) => (
-
-
-
+interface ExpertiseProps {
+ mode: string;
+}
- DevOps & Automation
-Once the application is built, I help clients set up DevOps testing, CI/CD pipelines, and deployment automation to support the successful Go-Live.
-
- Tech stack:
- {labelsSecond.map((label, index) => (
-
-
-
- GenAI & LLM
-Stay relevant in the market by leveraging the latest AI models in your projects. I have professional experience building enterprise grade GenAI-enabled solutions to empower intelligent decision making.
-
- Tech stack:
- {labelsThird.map((label, index) => (
-
-
+
- );
+ );
}
-export default Expertise;
\ No newline at end of file
+export default Expertise;
diff --git a/src/components/ExpertiseCard.tsx b/src/components/ExpertiseCard.tsx
new file mode 100644
index 000000000..ac525cdd3
--- /dev/null
+++ b/src/components/ExpertiseCard.tsx
@@ -0,0 +1,63 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Chip from "@mui/material/Chip";
+import { useState } from "react";
+
+interface ExpertiseCardProps {
+ icon: IconDefinition;
+ title: string;
+ description: string;
+ labels: string[];
+ mode: string; // 'dark' or 'light'
+}
+
+function ExpertiseCard({
+ icon,
+ title,
+ description,
+ labels,
+ mode,
+}: ExpertiseCardProps) {
+ const [isHovered, setIsHovered] = useState(false);
+
+ const handleMouseEnter = () => setIsHovered(true);
+ const handleMouseLeave = () => setIsHovered(false);
+
+ const cardStyle = {
+ transition: "all 0.3s ease-in-out",
+ padding: "20px",
+ transform: isHovered ? "scale(1.03)" : "scale(1)",
+ boxShadow: isHovered ? "0 8px 16px rgba(0,0,0,0.2)" : "none",
+ // add border radius and background color based on the mode
+ borderRadius: "15px",
+ border: "2px solid rgba(0, 0, 0, 0.1)",
+ backgroundColor: mode === "dark" ? "#111827" : "white", // Background for the card
+ color: mode === "dark" ? "white" : "#0d1116", // Text color for the card
+ };
+
+ const chipClassName = mode === "dark" ? "chip-dark" : "chip-light"; // Assuming you'll define chip-light in SCSS
+
+ return (
+
+
Expertise
+
+
+
+
+ );
+}
+
+export default ExpertiseCard;
diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx
index 2a7ec8275..89fb9c009 100644
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -1,9 +1,4 @@
-import React, {
- JSXElementConstructor,
- PropsWithChildren,
- useEffect,
- useState,
- } from "react";
+import { Children, useEffect, useState, JSXElementConstructor, PropsWithChildren } from 'react';
interface Props {
delay?: number;
@@ -25,7 +20,7 @@ import React, {
const visible = typeof props.visible === "undefined" ? true : props.visible;
useEffect(() => {
- let count = React.Children.count(props.children);
+ let count = Children.count(props.children);
if (!visible) {
// Animate all children out
count = 0;
@@ -48,7 +43,7 @@ import React, {
// eslint-disable-next-line
}, [
// eslint-disable-next-line
- React.Children.count(props.children),
+ Children.count(props.children),
delay,
maxIsVisible,
visible,
@@ -57,7 +52,7 @@ import React, {
return (
{title}
+{description}
+
+ Tech stack:
+ {labels.map((label, index) => (
+
+ A portfolio designed & built by Yuji Sato with 💜
++ A portfolio designed & built by{" "} + + Anne Mahamadou + {" "} + with 💜 +
); } -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 72a808243..f324c8d68 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -1,27 +1,55 @@ -import React from "react"; -import GitHubIcon from '@mui/icons-material/GitHub'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import '../assets/styles/Main.scss'; +import GitHubIcon from "@mui/icons-material/GitHub"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import avatar from "../assets/images/temp.jpeg"; +import "../assets/styles/Main.scss"; function Main() { - return (
- 
+ 
+
+
ANNE Mahamadou
+AI & Software Engineer
+
+
- + Welcome to my personal portfolio! I am a passionate AI & Software + Engineer specializing in building robust backend systems and + innovative GenAI-enabled solutions. My experience ranges from + developing e-commerce platforms to creating advanced RAG-based + chatbots. +
Yuji Sato
-Full Stack Engineer
-
- );
+ );
}
-export default Project;
\ No newline at end of file
+export default Project;
diff --git a/src/components/ProjectCard.scss b/src/components/ProjectCard.scss
new file mode 100644
index 000000000..5d755deba
--- /dev/null
+++ b/src/components/ProjectCard.scss
@@ -0,0 +1,106 @@
+.project-card-wrapper {
+ position: relative;
+ overflow: hidden;
+ border-radius: 8px;
+ cursor: pointer;
+ transition:
+ transform 0.3s ease-in-out,
+ box-shadow 0.3s ease-in-out,
+ background-color 0.3s ease-in-out;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 20px;
+ min-height: 250px; // Ensure a minimum height for collapsed state
+
+ /* Default (Dark Mode) styles */
+ background-color: #111827;
+ color: white;
+ box-shadow: none;
+
+ .project-thumbnail {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%; /* Circular image initially */
+ object-fit: cover;
+ transition:
+ width 0.3s ease-in-out,
+ height 0.3s ease-in-out,
+ border-radius 0.3s ease-in-out;
+ }
+
+ .project-content {
+ h2,
+ p {
+ color: white;
+ transition: color 0.3s ease-in-out;
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ margin-top: 15px;
+ text-decoration: none;
+ }
+
+ p {
+ font-size: 1rem;
+ opacity: 0; /* Hidden initially */
+ max-height: 0;
+ overflow: hidden;
+ transition:
+ opacity 0.3s ease-in-out,
+ max-height 0.3s ease-in-out;
+ }
+ }
+
+ /* Hover State */
+ &.hovered {
+ transform: scale(1.05);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+ min-height: 350px; // Expanded height on hover
+
+ .project-thumbnail {
+ width: 100%; /* Expand to full width */
+ height: 150px; /* Adjust height */
+ border-radius: 8px; /* Rectangular on hover */
+ }
+
+ .project-content {
+ p {
+ opacity: 1; /* Show description on hover */
+ max-height: 100px; /* Allow description to be visible */
+ }
+ }
+ }
+
+ /* Light Mode styles */
+ &.light {
+ background-color: white;
+ color: #0d1116;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+ .project-content {
+ h2,
+ p {
+ color: #0d1116;
+ }
+ }
+
+ &.hovered {
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+ }
+ }
+}
+
+.project-card-wrapper .project-image-link {
+ text-decoration: none; /* Remove underline from image link */
+}
+
+.project-card-wrapper .project-content a {
+ text-decoration: none; /* Remove underline from title link */
+}
+
+.project-card-wrapper .project-content a:hover h2 {
+ text-decoration: underline; /* Add underline on title hover */
+}
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
new file mode 100644
index 000000000..9dbb9c6e7
--- /dev/null
+++ b/src/components/ProjectCard.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import "../components/ProjectCard.scss"; // Import component-specific SCSS
+
+interface ProjectCardProps {
+ imageSrc: string;
+ projectUrl: string;
+ title: string;
+ description: string;
+ mode: string; // 'dark' or 'light'
+}
+
+function ProjectCard({
+ imageSrc,
+ projectUrl,
+ title,
+ description,
+ mode,
+}: ProjectCardProps) {
+ const [isHovered, setIsHovered] = useState(false);
+
+ const handleMouseEnter = () => setIsHovered(true);
+ const handleMouseLeave = () => setIsHovered(false);
+
+ return (
+ Personal Projects
-
-
+
- 
-
- Filmate AI
-Developed movie finder app with semantic search and sentiment analysis using OpenAI GPT-3.5 Turbo, Qdrant, React, and Flask.
-
- 
-
- High Speed Chase
-Designed, developed, and launched a 3D multiplayer racing game with C# and Unity. This is available on Itch.io for gamers worldwide to enjoy.
-
- 
-
- Astro Raiders
-Developed and released a 2D shooting game with C# and Unity. This project is hosted on the Itch.io public marketplace.
-
- 
-
- Datum: Integrated Learning Platform
-This is an online educational platform that provides high-quality, data science-focused learning resources in the Japanese language. I created the entire platform from scratch using Ruby on Rails.
-
- 
-
- WeManage: Real Estate Asset Management
-This mobile application allows realtors in Japan to securely manage their property information and view future income predictions. This app is built with Ruby on Rails and JavaScript.
-
- 
-
- COVID-19 Case Management
-Built official charts for COVID/vaccination tracking for an educational institution using JavaScript and the Google Sheets API v4. The dashboard served the university's leadership in their decision-making processes.
-
- 
-
- Multiple Regression Property Analysis
-Analyzed the real estate market in Japan and predicted property prices by implementing statistical methods such as OLS and multi-regression analysis. This project leveraged Python and various libraries such as Pandas, NumPy, Matplotlib, and Scikit-Learn.
-
- 
-
- Programs of Study
-Designed and developed a custom component for a CMS-based platform (e.g., 'Brightspot') using Java, Handlebars, and LESS. University students can find their majors of interest through this module.
-
- 
-
- Transfer Evaluation Matrix
-Created an interactive CSV table generator with Java, Handlebars, and LESS. This project helps transfer students to quickly identify eligible credits.
-
- 
-
- Submeowrine
-Developed and released an Android mobile application using Java and Android Studio that runs a 2D shooting game.
-Personal Projects
+
+
+
+ 
+
+
+ );
+}
+
+export default ProjectCard;
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 2345b3555..42df330a5 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -1,71 +1,40 @@
-import React from "react";
-import '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBriefcase } from '@fortawesome/free-solid-svg-icons';
-import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
-import 'react-vertical-timeline-component/style.min.css';
-import '../assets/styles/Timeline.scss'
+import "@fortawesome/free-regular-svg-icons";
+import { faBriefcase } from "@fortawesome/free-solid-svg-icons";
+import { VerticalTimeline } from "react-vertical-timeline-component";
+import "react-vertical-timeline-component/style.min.css";
+import "../assets/styles/Timeline.scss";
+import TimelineItem from "./TimelineItem"; // Import the new component
-function Timeline() {
+interface TimelineProps {
+ mode: string;
+}
+
+function Timeline({ mode }: TimelineProps) {
return (
+
+
+ {title}
+ +{description}
+Career History
Technology Consultant
-Dallas, TX
-- Full-stack Web Development, GenAI/LLM, Project Management, Business Development -
- -Full Stack Engineer
-Laie, HI
-- Frontend Development, Backend Development, User Experience, Team Leading -
- -Staff Engineer Intern
-Laie, HI
-- Full-stack Development, API Development, User Experience -
- -Data Analyst Intern
-Tokyo, Japan
-- Automation, Data Governance, Statistical Analysis -
- +{title}
+{location}
+{description}
+ + ); +} + +export default TimelineItem; diff --git a/src/components/index.js b/src/components/index.ts similarity index 100% rename from src/components/index.js rename to src/components/index.ts diff --git a/src/index.scss b/src/index.scss index 86bb84659..79a93173a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,22 +1,22 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", + "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.1rem !important; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace !important; + font-family: + source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace !important; font-size: 1rem !important; } .main-container { position: relative; background-color: #0d1116; - } a { @@ -25,10 +25,21 @@ a { a:hover { color: #5000ca; - transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; + transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out; } -p, a, h1, h2, h3, h4, h5, label, button { +p, +a, +h1, +h2, +h3, +h4, +h5, +label, +button { color: white; font-family: "Lato", sans-serif; } @@ -50,7 +61,8 @@ p, a, h1, h2, h3, h4, h5, label, button { } .navigation-bar-responsive { - span, p { + span, + p { color: #0d1116; font-family: "Lato", sans-serif; } @@ -99,13 +111,24 @@ p, a, h1, h2, h3, h4, h5, label, button { background-color: #f8f9fa; } - p, a, h1, h2, h3, h4, h5, label, button { + p, + a, + h1, + h2, + h3, + h4, + h5, + label, + button { color: #0d1116; } a:hover { color: #5000ca; - transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; + transition: + color 0.15s ease-in-out, + background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out; } .navigation-bar svg { @@ -120,20 +143,20 @@ p, a, h1, h2, h3, h4, h5, label, button { color: #0d1116; } - .chip { - background-color: rgba(0, 0, 0, 0.08); - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .vertical-timeline::before { background-color: rgba(0, 0, 0, 0.08); } .vertical-timeline--animate .vertical-timeline-element-content.bounce-in { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: + 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), + 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .vertical-timeline--two-columns .vertical-timeline-element-content .vertical-timeline-element-date { + .vertical-timeline--two-columns + .vertical-timeline-element-content + .vertical-timeline-element-date { color: gray; } @@ -144,12 +167,77 @@ p, a, h1, h2, h3, h4, h5, label, button { .flex-chips .chip-title { color: #0d1116; } + + .MuiInputBase-root { + color: #0d1116 !important; + background-color: white !important; + } + + .MuiInputBase-input { + color: #0d1116 !important; + background-color: transparent !important; + } + + .MuiFormLabel-root { + color: #0d1116 !important; + } + + .MuiFormHelperText-root { + color: #0d1116 !important; + } +} + +.dark-mode { + .MuiInputBase-root { + color: white !important; + background-color: #0d1116 !important; + } + + .MuiInputBase-input { + color: white !important; + background-color: transparent !important; + } + + .MuiFormLabel-root { + color: white !important; + } + + .MuiFormHelperText-root { + color: white !important; + } +} + +.chip-dark { + background-color: rgba(255, 255, 255, 0.1) !important; + color: white !important; + box-shadow: + 0px 3px 1px -2px rgba(193, 182, 182, 0.2), + 0px 2px 2px 0px rgba(193, 182, 182, 0.2), + 0px 1px 5px 0px rgba(193, 182, 182, 0.2); + + .MuiChip-label { + color: white !important; + } +} + +.chip-light { + background-color: #f0f0f0 !important; + color: #0d1116 !important; + box-shadow: + 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.2), + 0px 1px 5px 0px rgba(0, 0, 0, 0.2); + + .MuiChip-label { + color: #0d1116 !important; + } } + @media screen { @media (max-width: 768px) { .items-container { padding: 5% 5%; } } -} \ No newline at end of file +} diff --git a/src/index.tsx b/src/index.tsx index 4c316beda..112bbae0e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,16 +1,15 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; + +import { createRoot } from 'react-dom/client'; +import { StrictMode } from 'react'; import './index.scss'; import App from './App'; import reportWebVitals from './reportWebVitals'; -const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement -); +const root = createRoot(document.getElementById('root') as HTMLElement); root.render( -