Skip to content

Commit

Permalink
projects content added, styling added
Browse files Browse the repository at this point in the history
  • Loading branch information
@fikretellek
fikretellek committed Dec 17, 2024
1 parent 4b15f41 commit 978a6b5
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 10 deletions.
63 changes: 56 additions & 7 deletions src/components/Projects/EachProject.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,38 @@ import aut from "../../assets/aut.png";
import mess from "../../assets/message.png";
import map from "../../assets/map.png";
import b1 from "../../assets/b1.jpg";
import githubLogo from "../../assets/outline.png";
import linkLogo from "../../assets/external-link.png";
const EachProject = ({ id }) => {
const photos = [appointment, readme, aut, mess, map];
const titles = [
"This Appointment",
"Read-me Hire-me",
"Authenticator",
"Message App",
"Choropleth Map",
];
const info = [
"An event details optimisation app that allows organiser to find the best time and location for every attendee. Google Routes API used to get train journey details of every attendee for each possible event destination. We created an algorithm to analyse each possible event details and showed them to user in the frontend. We are currently working on version 2 where we will include attendees as users and let them input their own details and see their own journeys on their mobile phone while traveling.",
"Autogenerated portfolio app that helps CodeYourFuture graduates showcase their information without spending their time on portfolio apps. This app helps them to keep their focus on their own personal growth while getting noticed by mentors and recruiters. We calculated grads activities on Github and gave them a score that will help mentors and recruiters to understand how actively they are working on their skills. JWT authentication and Role-based authorization implemented to maintain different user roles.",
"Authentication API that allows developers to maintain their user credentials and authentication & authorization jobs. I have created this api to use it on my other projects. App works with an api key also gained from the app and allows users (other apps) to create, authenticate, authorize, update and delete their own users. Api documentation will be added soon.",
"A Meesage app that uses web sockets for real-time communication while using http requests to send / receive messages. Web socket and http requests wrapped into each other. When a user send a message to API, it triggers web socket for other users that will let them to request new message updates.",
"As part of a medical research project at Manchester University, I contributed to the creation of choropleth maps to visualize the population distribution of optometrists across the UK. I started by processing postcode data from a CSV document, which I stored in a database. Using the Postcodes.io API, I converted postcodes into detailed address objects, extracting information at the country, region, county, and local district levels. I then aggregated the data at these geographical levels, calculating the population distribution for each area. The results were mapped to visualize population density across various administrative regions. To ensure accurate and up-to-date mapping, I utilized National Statistics maps and QGIS software for data encoding and visualization.",
];
const keys = [
["JS", "React", "Node.js", "Express.js", "Psql", "Docker", "CI/CD", "Google Routes API"],
["JS", "React", "Node.js", "Express.js", "Psql", "Github Rest API"],
["JS", "Node.js", "Express.js", "Psql", "JWT"],
["JS", "React", "Node.js", "Express.js", "WebSocket"],
["JS", "Node.js", "Express.js", "Rest APIs", "PostgreSQL", "QGIS"],
];
const githubLinks = [
"https://github.com/bkarimii/AppOintment-project",
"https://github.com/RbAvci/Read-me-Hire-me",
"https://github.com/fikretellek/authenticator",
"https://github.com/fikretellek/Module-Servers/tree/chat-server/chat-server",
];
const websiteLinks = [false, false, false, "https://fe-chat-react-app.netlify.app/"];
const backgrounds = [b1];
return (
<>
Expand All @@ -15,15 +45,34 @@ const EachProject = ({ id }) => {
<div className="background-img-elm" id={"b" + id}>
.
</div>
<img src={photos[id - 1]} alt="" />
{photos[id - 1] && <img src={photos[id - 1]} alt="" />}
</div>
<div className="project-info-container">
<h1>asdcasdcasc</h1>
<h2>sacasdcasd</h2>
<h3>sacascasdc</h3>
<p>asdcascas</p>
<button>casdc</button>
<a href="asdcasc">ascasdcasdc</a>
{titles[id - 1] && <h2 className="project-title">{titles[id - 1]}</h2>}
{info[id - 1] && <p className="project-info">{info[id - 1]}</p>}
<div className="project-tags-container">
{keys[id - 1] && keys[id - 1].map((key) => <p className="project-tag">{key}</p>)}
</div>
<div className="project-link-logo-container">
{githubLinks[id - 1] && (
<a href={githubLinks[id - 1]} target="_blank">
<img className="project-link-logo" src={githubLogo} alt="" />
</a>
)}
{websiteLinks[id - 1] ? (
<a href={websiteLinks[id - 1]}>
<img className="project-link-logo" src={linkLogo} alt="" />
</a>
) : websiteLinks[id - 1] === false ? (
<a className="not-implemented">
<img className="project-link-logo" src={linkLogo} alt="" />
</a>
) : (
<a className="not-published">
<img className="project-link-logo" src={linkLogo} alt="" />
</a>
)}
</div>
</div>
</div>
</>
Expand Down
106 changes: 103 additions & 3 deletions src/components/Projects/Projects.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,19 @@
.project-container {
margin-top: 50px;
position: relative;
height: 500px;
height: 550px;

display: flex;
flex-direction: row;
align-items: center;
gap: calc(2 * var(--gap));

.project-image-container {
width: calc(50% - var(--gap));
width: calc(55% - 2 * var(--gap));
height: 100%;
aspect-ratio: 4/3;
// background-color: var(--color-2);
border-radius: calc(2 * var(--border-radius));
border-radius: calc(var(--border-radius));
overflow: hidden;

position: relative;
Expand Down Expand Up @@ -88,6 +89,18 @@
&#b5 {
background-image: url(https://raw.githubusercontent.com/fikretellek/fikretellek.github.io/refs/heads/main/src/assets/b5.jpg);
}

&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-hover); /* Red mask with 50% opacity */
opacity: 0.4;
z-index: 1; /* Place mask above the background */
}
}

display: flex;
Expand All @@ -103,6 +116,93 @@
&.reversed-flex-direction {
flex-direction: row-reverse;
}

.project-info-container {
width: 45%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap);
.project-title {
}

.project-info {
text-align: start;
}

.project-tags-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--gap);
p {
padding: var(--padding-half);
border: var(--border);
border-radius: var(--border-radius);
color: var(--color-2);
font-weight: 700;
}
}

.project-link-logo-container {
display: flex;
flex-direction: row;

a {
height: 30px;
padding: var(--padding);
border-radius: var(--border-radius);
&:hover {
background-color: var(--color-hover);
}

.project-link-logo {
height: 100%;
filter: var(--color-logo);
}

&.not-implemented {
background-color: transparent;
position: relative;
&:hover::after {
content: "no live website yet";
position: absolute;
width: 200px;
height: 30px;
border-radius: var(--border-radius);
background-color: var(--color-hover);
color: var(--color);
font-weight: 300;
top: 100%;
left: 10px;
pointer-events: none;
}
}
&.not-published {
cursor: not-allowed;
background-color: transparent;
position: relative;
&:hover::after {
content: "not published yet";
position: absolute;
width: 200px;
height: 50px;
border-radius: var(--border-radius);
background-color: var(--color-hover);
color: var(--color);
font-weight: 300;
top: 100%;
left: 10px;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
}
}
}
}

.top-margin-for-header {
Expand Down

0 comments on commit 978a6b5

Please sign in to comment.