To design a personal portfolio showcasing my programming & design skills which includes a few of my recent projects from my Software Engineering Course for Per Scholas
Component Hierarchy Tree
- host to github pages (github.io)
- Use Fetch and UseEffect to make a request to an external data source and insert some of the data retrieved into your State and display it on the screen
- before:/After: css techniques
- clip path
- nav menu different shape with background animations/rotate/translate3D() [Make multiples of my nav component in css and make them rotate or fade into one from top and bottom sort of similar to my other project with the blue spinning rectangles]
- parallax scrolling section/not entire page
- add Linnkedin API to Retrieve profile data (my profile in About me/Links Page) [may be 'paid access' only]
- use carousel for github projects(?)
- use marquee text in places
- Page 2 (one of the additional pages) willl be a lighter color.
- More tasteful, sleek, minimal portfolio web design look
- Contact form on Contact Page
- Get Contact Form Server working properly once I have more backend knowledge
- Re-introduce primary scrollbar
- Drag-and-drop section in Contacts page
- Look into localstorage so you can save data to the user's browser
- Splash Screen w/animated gif effect on initial page load
- Remove excess space between parallax section & bottom of page/footer text+logo
- More interactivity
- Less empy space in upper portion of page
- Redesign entire aesthetic/palette/layout/flow
- Better implementation of parallax effect
- Some more collage cut outs for scroll effect
- Focus() to bottom of page on header-bar click(accomplished via .scrollTo rather than focus)
- Use k1-k7 dreammaker ai cube logos on LINKS page to flip through each one, each with a slight rotate3d, very quickly to simulate a rotating effect with contsantly changing image
- Parallax scroll makes Cube Logo Fall Apart/Current Name Logo (downward and out)
- Flash different logo images per frame (try different angles of the existing logo, but also some of the other logos) [content: url(pdfIcon.png)]
- On About page, make Text rain down from the sky and fall into egible text
Chronological Design Progress
Early Versions:
- React.js
- Axios
- @react-spring/parallax
- React-Router-Dom
- Github REST Api
- Adobe Photoshop 2023
- Image Filehosting: IMGBB
- Component Diagram: FIigma
- Logo Image Generation: BlueWillow
- Image Generation: Adobe Firefly, DreamStudio AI
- Email Service & Contact Form EmailJS
- Component Hierarchy Diagram Tool: FIigma
- Adobe Firefly: https://firefly.adobe.com
- DreamStudio: https://dreamstudio.ai
- Github API (REST Repo API): https://api.github.com/users/Kenneth-Rakentine/repos
**Minimum Viable Product**
Your application must meet these requirements:
Built with HTML, CSS, JavaScript using the React Library
Hosted on CodeSandbox or Netlify
Frequent Commits to github
A README.mdfile with explanations of the technologies used, the approach taken, a link to your live site, installation instructions, unsolved problems, etc.
Use Fetch and UseEffect to make a request to an external data source like OMDBapi and insert some of the data retrieved into your State and display it on the screen
-Use API data: Please be extremely thorough when finding an API you'd like to use for your project. In other words, please ensure you have properly vetted your API, by taking the time to read it's documentation and even "hitting a few endpoints".
-RESPONSIVE
Showcase your personal and professional programming projects
Link to each project's Github repository, so people can see your code and usage of version control
**//What projects should you showcase in your portfolio?
Keep in mind, your projects section should be a "best of" section, not every project you've ever done. If you have multiple projects that are very similar, choose the one you think is the most impressive and use that one. Remember, 3 high quality, polished projects are way better than 10 projects that are unpolished or very similar to each other//**
Introduce yourself with more personal flare than on a resume
Make a great first impression by having a tasteful design
Link all your social media and contact info in one spot. (Github, LinkedIn, and Resume at minimum!)
**Here are some "bonus features" but not required:**
Have one or more complex user interface modules such as a carousel, drag and drop, a sticky nav, tooltips, etc
Look into localstorage so you can save data to the user's browser
-deploy this project onto netlify or codesandbox, name your repo yourgithubusername.github.io
-Utilize Redux or the Context API
-Host on Github Pages
## CHECKPOINTS!
### Checkpoint 1: Wireframes
Following your lesson on SDLC & Agile Methodolgy, you should have a good idea what a wireframe is and what it entails. Make a wireframe for your portfolio site. Take some time to think about special features you might want (e.g., a carousel or modal dialog for displaying projects), and how a user will navigate your site. Will you have smooth scrolling?
**Protip:** This is a great time to brainstorm about color pallettes. There are many tools you can use online to generate color pallettes, such as Canva, ColorMind, or ColorSpace. They each work differently so check them all out and bookmark your favorite!
### Checkpoint 2: Host to Github
### Checkpoint 3: 25% done
This is an incremental step - you should have the following finished:
You've decided whether or not to use a CSS framework or other theme. If yes, which one?
A resume link or button (that goes nowhere)
Your site divided into sections or pages (even if those sections are empty)
You've chosen an initial color pallette (you can change this at any time, but try one out for now)
You have dummy/filler images where appropriate
You have lorem ipsumor similar filler text where appropriate
Protip: You can get creative with filler text! Lorem ipsum is boring and (if you translate it) depressing. Spice it up with hipster ipsum or something similar!
Very Similar Protip: You can also have some fun with your placeholder images! Try Fill Murray, Unsplash, or Place Kitten for popular choices, or discover your own!
**Protip:** Bootstrap gets a lot of hate because many people have abused its default styles - making it seem generic, boring, or like every other website ever. However, it is a solid choice for a CSS grid and some basic stuff! If you like bootstrap, use it, just not, you know, too much!
### Checkpoint 4: 50% done
This is an incremental step - you should have the following finished:
Your resume link now actually goes to your resume, even if the resume is a work in progress.
Your resume link opens in a new tab and is in a PDF format
You have at least 1 project to display in your project section (refer to your wireframe for what this entails - a title, probably a screenshot, maybe a description or a list of tech used, etc.)
Your project has a link to both the live site and the github repo
If appropriate, your live demo of the project has test data or a test user. (Basically think of an HR person who doesn't want to build a whole login on your site from scratch)
You've included a CDN link to whatever CSS framework you're using (if applicable)
You can view what you have on a phone-sized screen and see/read all the content
Protip: Make sure your site looks good on smaller screens! Your CSS framework should be a huge help here! If things are overflowing, check your image sizes or any hard-coded widths (pixels as opposed to percentages) in your CSS.
### Checkpoint 5: 80% done
This is an incremental step - you should have the following finished:
Your site has navigation! Most of the time this means a nav-bar or some sort.
Your resume is complete, or very close to complete
Your site has styling - this will likely come from a combination of styles from your CSS framework (if applicable) and your own personal stylesheets.
We <3 the 90's but your styling shouldn't look like it's from then
Your site includes icons/buttons/links to appropriate social media such as LinkedIn or Github.
Your Github profile page links to your portfolio
Any images, animations, or effects load in a reasonable amount of time
Your site doesn't have a flash of unstyled content (this is where you see the HTML without the CSS for a split second, and is usually due to slow-loading images or JS)
The font style and size are easily legible and professional looking (no comic sans unless using it ironically)
No obvious CSS, HTML, or JS bugs
You will want to be at this point before your final project is due, so you may still have a placeholder for at least one of the projects. That's okay! You don't need to invent a time machine! Just make sure it's as close to ready as it reasonably can be.