dun-sin / template-portfolio Goto Github PK
View Code? Open in Web Editor NEWA template portfolio for you to use
Home Page: https://portfolio-template-olddunsin.vercel.app/
License: MIT License
A template portfolio for you to use
Home Page: https://portfolio-template-olddunsin.vercel.app/
License: MIT License
The project just as a dark mode
Tasks:
No response
Add a readme file, it should have:
โ what the project is about
โ technologies used (they are: react, email.js)
โ how to install & run
No response
No response
No response
I have attached the screenshot below for reference.
Please have a look.
Issues in code
-.Projects {margin-top: -1.5rem;}
+-.Projects {margin-top: -1rem;}
Google Chrome
Yes I am willing to submit a PR!
Project boxes are not responsive and have a blank right sided empty space.
Form contact could be 50/50 on desktop and full-width on mobile for better view, also have a blank space on the left side
skills box should take the entire space
Mozilla Firefox
Yes I am willing to submit a PR!
I want to make the projectsInfo an array of objects that way it makes it easier to create an object for a new Project and also easier to render the projects
const Projects = () => {
const projectsInfo = {
one: {
name: 'Project 1',
desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
liveLink: 'website url',
githubLink: 'https://github.com/',
techs: ['HTML', 'CSS', 'TypeScript'],
isOpenSource: true
},
two: {
name: 'Project 2',
desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
liveLink: 'website url',
githubLink: 'https://github.com/',
techs: ['React', 'Node', 'MongoDB', 'Socket.io', 'Redux'],
isOpenSource: true
}
}
return (
<div className="Projects" id="projects" >
<h2>My Projects</h2>
<div>
<Project info={projectsInfo.one} />
<Project info={projectsInfo.two} />
</div>
</div>
)
}
const Project = ({ info }) => {
return (
<div className="project">
<h2>{info.name}</h2>
<p>{info.desc}</p>
<div className="tech-stack">
{info.techs.map(item => <div key={item}>{item}</div>)}
</div>
<div className="btns">
<a href={info.liveLink} target="_blank" rel="noreferrer">Live</a>
<a href={info.githubLink} target="_blank" rel="noreferrer">Github</a>
</div>
{info.isOpenSource && <div className="open">Open Source</div>}
</div>
)
}
const Projects = () => {
const projectsInfo = [
{
name: 'Project 1',
desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
liveLink: 'website url',
githubLink: 'https://github.com/',
techs: ['HTML', 'CSS', 'TypeScript'],
isOpenSource: true
},
{
name: 'Project 2',
desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
liveLink: 'website url',
githubLink: 'https://github.com/',
techs: ['React', 'Node', 'MongoDB', 'Socket.io', 'Redux'],
isOpenSource: true
}
]
return (
<div className="Projects" id="projects" >
<h2>My Projects</h2>
<div>
{projects.map(project => <Project {...project} />)}
</div>
</div>
)
}
const Project = ({ name, desc, techs, liveLink, githubLink, isOpenSource }) => {
return (
<div className="project">
<h2>{name}</h2>
<p>{desc}</p>
<div className="tech-stack">
{techs.map(item => <div key={item}>{item}</div>)}
</div>
<div className="btns">
<a href={liveLink} target="_blank" rel="noreferrer">Live</a>
<a href={githubLink} target="_blank" rel="noreferrer">Github</a>
</div>
{isOpenSource && <div className="open">Open Source</div>}
</div>
)
}
No response
Yes I am willing to submit a PR!
The "emailjs-com"
package used in this project has been deprecated and the package to be used is "@emailjs/browser"
The code in the Mail.jsx file can be updated like this using the new package
Old Code
import { send } from 'emailjs-com';
send(serviceID, templateID, {
subject: toSend.subject,
name: toSend.name,
email: toSend.email,
message: toSend.message,
}, publicKey);
New Code
import emailjs from '@emailjs/browser';
emailjs.send(serviceID, templateID, toSend, publicKey)
.then((response) => {
console.log('SUCCESS!', response.status, response.text);
}, (err) => {
console.log('FAILED...', err);
});
Note: The code above hasn't been tested in the codebase.
You can also use react-toastify
to display success or failed to the user.
No response
Google Chrome
Yes I am willing to submit a PR!
The Validation Function of "Mail.jsx" does not have "yahoo.co.in" an does function doesn't allows that email.
No response
No response
Microsoft Edge
Yes I am willing to submit a PR!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.