31 |
32 |
33 |
34 |
39 |
40 |
41 | );
42 | }
43 |
44 | export default App;
--------------------------------------------------------------------------------
/src/assets/styles/Project.scss:
--------------------------------------------------------------------------------
1 | .projects-container {
2 | display: flex;
3 | flex-direction: column;
4 | padding: 5% 10%;
5 | text-align: left;
6 | }
7 |
8 | .projects-container .projects-grid {
9 | display: grid;
10 | grid-template-columns: repeat(2, 1fr);
11 | grid-gap: 50px;
12 | }
13 |
14 | .projects-container .projects-grid .project {
15 | text-align: left;
16 | }
17 |
18 | .project h2:hover {
19 | text-decoration: underline;
20 | transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
21 | }
22 |
23 | .zoom {
24 | border-radius: 5px;
25 | transition: transform .2s;
26 | margin: 0 auto;
27 | }
28 |
29 | .zoom:hover {
30 | transform: scale(1.05);
31 | }
32 |
33 | @media screen {
34 | @media (max-width: 700px) {
35 | .projects-container {
36 | display: block;
37 | padding-left: 5%;
38 | padding-right: 5%;
39 | }
40 |
41 | .projects-container .projects-grid {
42 | display: block;
43 | }
44 |
45 | .projects-container .projects-grid .project {
46 | padding-bottom: 5%;
47 | }
48 | }
49 | }
--------------------------------------------------------------------------------
/src/components/Main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import GitHubIcon from '@mui/icons-material/GitHub';
3 | import LinkedInIcon from '@mui/icons-material/LinkedIn';
4 | import '../assets/styles/Main.scss';
5 |
6 | function Main() {
7 |
8 | return (
9 |
10 |
28 |
29 | );
30 | }
31 |
32 | export default Main;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-portfolio-template",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": "https://yujisatojr.github.io/react-portfolio-template",
6 | "dependencies": {
7 | "@emotion/react": "^11.11.4",
8 | "@emotion/styled": "^11.11.5",
9 | "@fortawesome/free-brands-svg-icons": "^6.5.2",
10 | "@fortawesome/free-regular-svg-icons": "^6.5.2",
11 | "@fortawesome/free-solid-svg-icons": "^6.5.2",
12 | "@fortawesome/react-fontawesome": "^0.2.2",
13 | "@mui/icons-material": "^5.15.19",
14 | "@mui/material": "^5.15.19",
15 | "@testing-library/jest-dom": "^5.17.0",
16 | "@testing-library/react": "^13.4.0",
17 | "@testing-library/user-event": "^13.5.0",
18 | "@types/jest": "^27.5.2",
19 | "@types/node": "^16.18.98",
20 | "@types/react": "^18.3.3",
21 | "@types/react-dom": "^18.3.0",
22 | "react": "^18.3.1",
23 | "react-dom": "^18.3.1",
24 | "react-scripts": "5.0.1",
25 | "react-vertical-timeline-component": "^3.6.0",
26 | "sass": "^1.77.4",
27 | "typescript": "^4.9.5",
28 | "web-vitals": "^2.1.4"
29 | },
30 | "scripts": {
31 | "start": "react-scripts start",
32 | "build": "react-scripts build",
33 | "test": "react-scripts test",
34 | "eject": "react-scripts eject",
35 | "predeploy": "npm run build",
36 | "deploy": "gh-pages -d build"
37 | },
38 | "eslintConfig": {
39 | "extends": [
40 | "react-app",
41 | "react-app/jest"
42 | ]
43 | },
44 | "browserslist": {
45 | "production": [
46 | ">0.2%",
47 | "not dead",
48 | "not op_mini all"
49 | ],
50 | "development": [
51 | "last 1 chrome version",
52 | "last 1 firefox version",
53 | "last 1 safari version"
54 | ]
55 | },
56 | "devDependencies": {
57 | "@types/react-vertical-timeline-component": "^3.3.6"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | 
13 |
12 |
68 | );
69 | }
70 |
71 | export default Timeline;
--------------------------------------------------------------------------------
/src/components/Expertise.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import '@fortawesome/free-regular-svg-icons'
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faReact, faDocker, faPython } from '@fortawesome/free-brands-svg-icons';
5 | import Chip from '@mui/material/Chip';
6 | import '../assets/styles/Expertise.scss';
7 |
8 | const labelsFirst = [
9 | "React",
10 | "TypeScript",
11 | "JavaScript",
12 | "HTML5",
13 | "CSS3",
14 | "SASS",
15 | "Flask",
16 | "Python",
17 | "SQL",
18 | "PostgreSQL",
19 | "Postman"
20 | ];
21 |
22 | const labelsSecond = [
23 | "Git",
24 | "GitHub Actions",
25 | "Docker",
26 | "AWS",
27 | "Azure",
28 | "Linux",
29 | "Snowflake",
30 | "Pandas",
31 | "Selenium",
32 | ];
33 |
34 | const labelsThird = [
35 | "OpenAI",
36 | "Groq",
37 | "LangChain",
38 | "Qdrant",
39 | "Hugging Face",
40 | "LlamaIndex",
41 | "Streamlit",
42 | ];
43 |
44 | function Expertise() {
45 | return (
46 |
13 |
15 |
66 |
67 | Career History
14 |Technology Consultant
24 |Dallas, TX
25 |26 | Full-stack Web Development, GenAI/LLM, Project Management, Business Development 27 |
28 | 29 |Full Stack Engineer
36 |Laie, HI
37 |38 | Frontend Development, Backend Development, User Experience, Team Leading 39 |
40 | 41 |Staff Engineer Intern
48 |Laie, HI
49 |50 | Full-stack Development, API Development, User Experience 51 |
52 | 53 |Data Analyst Intern
60 |Tokyo, Japan
61 |62 | Automation, Data Governance, Statistical Analysis 63 |
64 | 65 |
47 |
88 | );
89 | }
90 |
91 | export default Expertise;
--------------------------------------------------------------------------------
/src/assets/styles/Main.scss:
--------------------------------------------------------------------------------
1 | .dark-mode .about-section {
2 | background-color: rgba(0, 0, 0, 0.2);
3 | }
4 |
5 | .about-section {
6 | display: flex;
7 | gap: 30px;
8 | justify-content: flex-start;
9 | align-items: center;
10 | width: 100%;
11 | padding: 0px 15%;
12 | min-height: 700px;
13 | background-image: url("../images/bg-dark.png");
14 | background-repeat: no-repeat;
15 | background-size: cover;
16 | background-attachment: fixed;
17 | background-position: center;
18 | }
19 |
20 | .about-section .content {
21 | text-align: left;
22 | z-index: 2;
23 |
24 | .social_icons {
25 | display: flex;
26 | flex-direction: row;
27 | gap: 10px;
28 | color: white;
29 |
30 | svg {
31 | font-size: 1.8em;
32 | }
33 | }
34 |
35 | .mobile_social_icons {
36 | display: none;
37 | }
38 |
39 | p {
40 | font-size: 1.5em;
41 | margin-block-start: 0px;
42 | margin-block-end: 0px;
43 | }
44 |
45 | h1 {
46 | font-size: 5em;
47 | margin-block-start: 0px;
48 | margin-block-end: 0px;
49 | }
50 | }
51 |
52 | .about-section .image-wrapper {
53 | z-index: 2;
54 | img {
55 | width: 150px;
56 | border-radius: 50%;
57 | }
58 | }
59 |
60 | .about p {
61 | text-align: center;
62 | padding-top: 30%;
63 | padding-bottom: 30%;
64 | }
65 |
66 | @media screen {
67 | @media (max-width: 567px) {
68 | .nav-left{
69 | padding-top: 20px;
70 | float:left;
71 | }
72 |
73 | .nav-left img {
74 | height: 35px
75 | }
76 |
77 | .nav-right {
78 | float:right;
79 | }
80 |
81 | .nav-right li {
82 | padding: 10px 15px;
83 | list-style:none;
84 | font-size:13px;
85 | color:white;
86 | width: 10%;
87 | }
88 |
89 | .nav-right ul {
90 | list-style-type: none;
91 | margin: 0px;
92 | padding: 0px;
93 | }
94 |
95 | body {
96 | width: 100%;
97 | }
98 |
99 | .about {
100 | padding-left: 5%;
101 | padding-right: 5%;
102 | font-size: 12px;
103 | }
104 | }
105 |
106 | @media (max-width:768px) {
107 | .about-section h1 {
108 | font-size: 4em !important;
109 | text-align: left;
110 | }
111 |
112 | .about-section p {
113 | text-align: left;
114 | }
115 |
116 | .container {
117 | display: initial;
118 | }
119 |
120 | .social_icons {
121 | display: none !important;
122 | }
123 |
124 | .mobile_social_icons {
125 | padding-top: 10px;
126 | display: flex !important;
127 | flex-direction: row;
128 | gap: 10px;
129 | color: white;
130 |
131 | svg {
132 | font-size: 1.8em;
133 | }
134 | }
135 |
136 | .about-section {
137 | padding-top: 150px;
138 | display: block;
139 | padding-left: 0px;
140 | padding-right: 0px;
141 | }
142 |
143 | .about-section .content {
144 | width: 90%;
145 | padding-left: 5%;
146 | padding-right: 5%;
147 | padding-bottom: 5%;
148 | }
149 |
150 | .about-section .image-wrapper {
151 | padding-left: 5%;
152 | width: 100%;
153 | }
154 | }
155 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Developer Portfolio Template 🚀
2 |
3 |       
4 |
5 | ## What is this?
6 |
7 | This simple portfolio template is designed to showcase your past projects, career history, skill sets, and more.
8 |
9 | View the [Demo](https://yujisatojr.github.io/react-portfolio-template/).
10 |
11 | **This template is free to use, and no attribution is required.** You can fork or download this repository to customize it for your own use. Please don't forget to leave a ⭐ if you like this portfolio!
12 |
13 | 
14 |
15 | ## Features
16 |
17 | ✅ Open source (free to use, no attribution required)
18 | ✅ Responsive design & mobile-friendly
19 | ✅ Supports both dark and light modes
20 | ✅ Highly customizable multi-component layout
21 | ✅ Built with modern technologies (React, TypeScript, JavaScript, and SCSS)
22 |
23 | ## Quick Setup
24 |
25 | 1. Ensure you have [Node.js](https://nodejs.org/) installed. Check your installation by running:
26 |
27 | ```bash
28 | node -v
29 | ```
30 |
31 | 2. In the project directory, install dependencies:
32 |
33 | ```bash
34 | npm install
35 | ```
36 |
37 | 3. Start the development server:
38 |
39 | ```bash
40 | npm start
41 | ```
42 |
43 | 4. Open [http://localhost:3000](http://localhost:3000) to view the app in the browser.
44 |
45 | 5. Customize the template by navigating to the `/src/components` directory. Modify texts, pictures, and other information as needed.
46 |
47 | The page will reload if you make edits, and you will see any lint errors in the console.
48 |
49 | If you are interested in creating a mockup image like the ones from the personal projects section, I recommend [Genmoo](https://gemoo.com/tools/browser-mockup-generator/). This website lets you generate sleek looking browser mockups for free.
50 |
51 | ## Deployment
52 |
53 | You can choose your preferred service (e.g., [Netlify](https://www.netlify.com/), [Render](https://render.com/), [Heroku](https://www.heroku.com/)) for deployment. One of the easiest ways to host this portfolio is using GitHub Pages. Follow the instructions below for a production deploy.
54 |
55 | 1. **Set Up GitHub Repository**
56 |
57 | Create a new repository on GitHub for your portfolio app.
58 |
59 | 2. **Configure `package.json`**
60 |
61 | Edit the following properties in your `package.json` file:
62 |
63 | ```json
64 | {
65 | "homepage": "https://yourusername.github.io/your-repo-name",
66 | "scripts": {
67 | "predeploy": "npm run build",
68 | "deploy": "gh-pages -d build",
69 | ...
70 | }
71 | }
72 | ```
73 |
74 | Replace `yourusername` with your GitHub username and `your-repo-name` with the name of your GitHub repository.
75 |
76 | 3. **Deploy to GitHub Pages**
77 |
78 | Run the following command to deploy your app:
79 |
80 | ```bash
81 | npm run deploy
82 | ```
83 |
84 | 4. **Access Your Deployed App**
85 |
86 | After successfully deploying, you can access your app at `https://yourusername.github.io/your-repo-name`.
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | font-size: 1.1rem !important;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace !important;
13 | font-size: 1rem !important;
14 | }
15 |
16 | .main-container {
17 | position: relative;
18 | background-color: #0d1116;
19 |
20 | }
21 |
22 | a {
23 | text-decoration: none;
24 | }
25 |
26 | a:hover {
27 | color: #5000ca;
28 | transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
29 | }
30 |
31 | p, a, h1, h2, h3, h4, h5, label, button {
32 | color: white;
33 | font-family: "Lato", sans-serif;
34 | }
35 |
36 | .navigation-bar {
37 | justify-content: space-between;
38 | background-color: #0d1116;
39 |
40 | button {
41 | font-size: 1.1rem;
42 | font-family: "Lato", sans-serif;
43 | text-transform: initial;
44 | padding: 6px 10px;
45 | }
46 |
47 | svg {
48 | cursor: pointer;
49 | }
50 | }
51 |
52 | .navigation-bar-responsive {
53 | span, p {
54 | color: #0d1116;
55 | font-family: "Lato", sans-serif;
56 | }
57 | }
58 |
59 | .container {
60 | margin-top: 64px;
61 | width: 100%;
62 | display: flex;
63 | flex-direction: column;
64 | align-items: center;
65 | justify-content: center;
66 | }
67 |
68 | .header-image {
69 | width: 100%;
70 | height: 450px;
71 |
72 | img {
73 | width: 100%;
74 | height: 450px;
75 | object-fit: cover;
76 | }
77 | }
78 |
79 | .mobile-menu-top {
80 | display: flex;
81 | justify-content: center;
82 | align-items: center;
83 | gap: 5px;
84 | font-weight: bold;
85 | }
86 |
87 | .items-container {
88 | padding: 5% 10%;
89 | text-align: left;
90 | display: flex;
91 | flex-direction: column;
92 | justify-content: center;
93 | }
94 |
95 | .light-mode {
96 | background-color: #f8f9fa;
97 |
98 | .navigation-bar {
99 | background-color: #f8f9fa;
100 | }
101 |
102 | p, a, h1, h2, h3, h4, h5, label, button {
103 | color: #0d1116;
104 | }
105 |
106 | a:hover {
107 | color: #5000ca;
108 | transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
109 | }
110 |
111 | .navigation-bar svg {
112 | color: #0d1116;
113 | }
114 |
115 | .about-section {
116 | background-image: url("./assets/images/bg-light.png");
117 | }
118 |
119 | .skills-container svg {
120 | color: #0d1116;
121 | }
122 |
123 | .chip {
124 | background-color: rgba(0, 0, 0, 0.08);
125 | 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);
126 | }
127 |
128 | .vertical-timeline::before {
129 | background-color: rgba(0, 0, 0, 0.08);
130 | }
131 |
132 | .vertical-timeline--animate .vertical-timeline-element-content.bounce-in {
133 | 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);
134 | }
135 |
136 | .vertical-timeline--two-columns .vertical-timeline-element-content .vertical-timeline-element-date {
137 | color: gray;
138 | }
139 |
140 | .vertical-timeline-element-content-arrow {
141 | border-right: 7px solid rgba(0, 0, 0, 0.08) !important;
142 | }
143 |
144 | .flex-chips .chip-title {
145 | color: #0d1116;
146 | }
147 | }
148 |
149 | @media screen {
150 | @media (max-width: 768px) {
151 | .items-container {
152 | padding: 5% 5%;
153 | }
154 | }
155 | }
--------------------------------------------------------------------------------
/src/components/Contact.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 | import '../assets/styles/Contact.scss';
3 | // import emailjs from '@emailjs/browser';
4 | import Box from '@mui/material/Box';
5 | import Button from '@mui/material/Button';
6 | import SendIcon from '@mui/icons-material/Send';
7 | import TextField from '@mui/material/TextField';
8 |
9 | function Contact() {
10 |
11 | const [name, setName] = useState
48 |
87 | Expertise
49 |
50 |
86 |
51 |
61 |
62 | Full Stack Web Development
53 |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.
54 |
55 | Tech stack:
56 | {labelsFirst.map((label, index) => (
57 |
60 |
63 |
73 |
74 | DevOps & Automation
65 |Once the application is built, I help clients set up DevOps testing, CI/CD pipelines, and deployment automation to support the successful Go-Live.
66 |
67 | Tech stack:
68 | {labelsSecond.map((label, index) => (
69 |
72 |
75 |
85 | GenAI & LLM
77 |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.
78 |
79 | Tech stack:
80 | {labelsThird.map((label, index) => (
81 |
84 |
54 |
113 | );
114 | }
115 |
116 | export default Contact;
--------------------------------------------------------------------------------
/src/components/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import AppBar from '@mui/material/AppBar';
3 | import Box from '@mui/material/Box';
4 | import Button from '@mui/material/Button';
5 | import CssBaseline from '@mui/material/CssBaseline';
6 | import DarkModeIcon from '@mui/icons-material/DarkMode';
7 | import Divider from '@mui/material/Divider';
8 | import Drawer from '@mui/material/Drawer';
9 | import IconButton from '@mui/material/IconButton';
10 | import LightModeIcon from '@mui/icons-material/LightMode';
11 | import List from '@mui/material/List';
12 | import ListIcon from '@mui/icons-material/List';
13 | import ListItem from '@mui/material/ListItem';
14 | import ListItemButton from '@mui/material/ListItemButton';
15 | import ListItemText from '@mui/material/ListItemText';
16 | import MenuIcon from '@mui/icons-material/Menu';
17 | import Toolbar from '@mui/material/Toolbar';
18 |
19 | const drawerWidth = 240;
20 | const navItems = [['Expertise', 'expertise'], ['History', 'history'], ['Projects', 'projects'], ['Contact', 'contact']];
21 |
22 | function Navigation({parentToChild, modeChange}: any) {
23 |
24 | const {mode} = parentToChild;
25 |
26 | const [mobileOpen, setMobileOpen] = useState
55 |
112 |
56 |
65 | {
101 | setMessage(e.target.value);
102 | }}
103 | error={messageError}
104 | helperText={messageError ? "Please enter the message" : ""}
105 | />
106 | } onClick={sendEmail}>
107 | Send
108 |
109 |
110 |
111 | Contact Me
57 |Got a project waiting to be realized? Let's collaborate and make it happen!
58 |
66 | {
73 | setName(e.target.value);
74 | }}
75 | error={nameError}
76 | helperText={nameError ? "Please enter your name" : ""}
77 | />
78 | {
85 | setEmail(e.target.value);
86 | }}
87 | error={emailError}
88 | helperText={emailError ? "Please enter your email or phone number" : ""}
89 | />
90 |
91 | -
65 | {navItems.map((item) => (
66 |
17 |
71 | );
72 | }
73 |
74 | export default Project;
--------------------------------------------------------------------------------
Personal Projects
18 |
19 |
70 |
20 | 
21 |
24 | Filmate AI
22 |Developed movie finder app with semantic search and sentiment analysis using OpenAI GPT-3.5 Turbo, Qdrant, React, and Flask.
23 |
25 | 
26 |
29 | High Speed Chase
27 |Designed, developed, and launched a 3D multiplayer racing game with C# and Unity. This is available on Itch.io for gamers worldwide to enjoy.
28 |
30 | 
31 |
34 | Astro Raiders
32 |Developed and released a 2D shooting game with C# and Unity. This project is hosted on the Itch.io public marketplace.
33 |
35 | 
36 |
39 | Datum: Integrated Learning Platform
37 |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.
38 |
40 | 
41 |
44 | WeManage: Real Estate Asset Management
42 |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.
43 |
45 | 
46 |
49 | COVID-19 Case Management
47 |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.
48 |
50 | 
51 |
54 | Multiple Regression Property Analysis
52 |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.
53 |
55 | 
56 |
59 | Programs of Study
57 |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.
58 |
60 | 
61 |
64 | Transfer Evaluation Matrix
62 |Created an interactive CSV table generator with Java, Handlebars, and LESS. This project helps transfer students to quickly identify eligible credits.
63 |
65 | 
66 |
69 | Submeowrine
67 |Developed and released an Android mobile application using Java and Android Studio that runs a 2D shooting game.
68 |