I love transforming ideas into user-friendly web applications using React's component-based architecture. I thrive on collaborating with others, constantly learning, and staying up to date with the latest trends and best practices. I'm eager to join a team where I can contribute my skills, learn from experienced professionals, and make a meaningful impact through my work. Let's connect and build incredible experiences together!
I'm creating this React portfolio repository for a few reasons. Firstly, it's a way for me to find employment as a front-end React developer. By showcasing my skills and projects, potential employers can see what I'm capable of. Secondly, I want to demonstrate that I can plan and document my work effectively. It shows that I'm organized and take my projects seriously. Lastly, I hope to give others insight into how I think and organize my projects. By sharing my coding process and project structure, I want to provide a glimpse into how I work. This portfolio is my way of presenting myself professionally and showing what I can do in the field of front-end development.
WHAT DO I NEED IN MY PORTFOLIO?
Home
page with an introduction of who I am and what I do as a Front-End React Developer- Photo/headshot
- Techstack Logos
- Social Logos +
Links
#contact
section on homepage withcontact form
Projects
page to showcase my work- Tattoo Booking App (React/Supabase)
Notes
page to share and have quick access to useful concepts and code snippets- Responsive Navigation for Desktop, Tablet, and Mobile
PAGES | SECTIONS | PATHS |
---|---|---|
Home | Profile, #Contact | /home , /home#contact |
Projects | Title, Projects Grid | /projects |
Project | Featured Image, Title, Content | /projects/${projectId} |
Notes | Notes | /notes |
Note | Note | /notes/${noteId} , |
404 | Page not found message | /* , |
NICE TO HAVE'S...
- A database to store my
Notes
andProjects
data - The ability to Create/Read/Update/Delete
Projects
and/orNotes
Authentication
and aDashboard
that allows me to add/remove/updateProjects
andNotes
from the front end.- Filter/sort functionality on for
Projects
andNotes
page- Eventually, add pagination as well
- Dark mode
- Search bar with autocomplete
- Animations
Designed in Figma
FILL COLORS | HEX | SHADES OF GREY | HEX |
---|---|---|---|
ACCENT | #FF8482 | DARKEST | #2f2f2f |
BLACK | #000 | DARK SHADE | #A1A1A1 |
WHITE | #FFF | LIGHT SHADE | #E9E9E9 |
BG | #FCFCFC | LIGHTEST SHADE | #F2f2f2 |
- Profile Intro
- Contact Section
Home Page - Desktop
Home Page - Mobile
- Projects Header
- Projects Section
Project Data Structure:
id | created_at | startDate | featuredImage | name | description | repo | demo | status |
---|---|---|---|---|---|---|---|---|
Integer | Time Stamp | Text | Text | Text | Text | Text | Text | Text |
JSON Sample
projectsData {
"id": 1,
"created_at": 2023-06-08 10:17:32.931+00,
"image": "https://randomimgid.database.co/storage/v1/object/public/project-images/project-name.jpg",
"name": "Project Name",
"description": "Project Description...",
"repo": "https://github.com/byronPantoja/project.git",
"demo": "http://project.vercel.app/",
"status": "complete",
}
Projects Page - Desktop
Projects Page - Mobile
- Notes Header
- Notes Section
Notes Data Structure:
id | created_at | title | content | tags | image |
---|---|---|---|---|---|
Integer | Time Stamp | Text | Text | Text | Text |
JSON Sample
notesData {
"id": 1,
"created_at": 2023-06-08 10:17:32.931+00,
"title": "Note Title",
"content": "Content...",
"tags": "tag-1, tag-2",
"image": "text",
}
Notes Page - Desktop
Notes Page - Mobile
updated
"dependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@headlessui/react": "^1.7.15",
"@heroicons/react": "^2.0.18",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"prettier-plugin-tailwindcss": "^0.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-router-dom": "^6.14.1"
},
"devDependencies": {
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.2",
"autoprefixer": "^10.4.14",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"postcss": "^8.4.25",
"prettier": "^2.8.8",
"tailwindcss": "^3.3.2",
"vite": "^4.4.1",
"vite-plugin-eslint": "^1.8.1"
}
-
Set up React+Vite_Styled Components and make sure it's rendering.
-
create folders:
cd /app mkdir pages styles ui
-
create new files in
/pages
:cd /pages touch Projects.jsx Notes.jsx PageNotFound.jsx
-
Install + set up React Router:
npm i react-router-dom@latest
-
Build out Home Page
"/"
- Header
- Logo
- Mobile Header
- Dev Profile
- SubHeading
- Heading
- LogoGrid - Tech Stack
- TextArea - Intro paragraph
- LogoGrid - Socials
- ProfilePhoto
- Contact Section
- Heading
- SubHeading
- Form
- Inputs -
name
,email
,Your Message
- Button -
Submit
- Inputs -
- Add background image
- Header
-
Build out Projects Page
"/projects"
- Header
- Heading - Projects
- ProjectLayout
- ProjectCard
- data:
name
,description
,status
,repo
,demo
,image
- data:
- ProjectCard
- Header
-
Build out Notes Page
"/notes"
- Notes Layout - 2 columns
- Header
- Heading - Notes (order: 1)
- Quote + author (order: 2)
- NotesCard
- Data (order: 1):
date
- Data (order: 2):
tags
,title
,content
- Data (order: 1):
- Button: Read More
- Header
- Notes Layout - 2 columns
-
Add Auth + Protected Route(s)
-
Add an Admin Dashboard where I can manage Notes and Projects
- Add CRUD functionality for Notes
- [ ]
- Add CRUD functionality for Projects
- Add CRUD functionality for Notes
Prioritizing getting more projects done to add to my portfolio before...