Skip to content

Commit

Permalink
Add new project thumbnail
Browse files Browse the repository at this point in the history
  • Loading branch information
@tin0312
tin0312 committed Oct 3, 2023
1 parent 32bf01a commit c75d9a5
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 48 deletions.
2 changes: 0 additions & 2 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,6 @@ body {
letter-spacing: -2.5px;
}
.project-container {
display: flex;
justify-content: space-between;
width: 80%;
margin: 2% auto 0;
}
Expand Down
208 changes: 163 additions & 45 deletions src/Pages/Projects.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,98 @@
import React from "react";
import * as Images from "../images";
import {Container, Row, Col} from "react-bootstrap"
import { Container, Row, Col } from "react-bootstrap";
export default function Projects() {
return (
<Container fluid className="project-page">
<Row className="project-header">Project</Row>
<Row className="project-container flex flex-lg-row flex-column align-items-center align-items-lg-start">
<Col lg = {3} sm = {12} className="project-section w-lg-50 w-75 mr-lg-1 mb-5 pr-0 pl-0 ">
<Row className="project-container flex flex-lg-row flex-column align-items-center align-items-lg-start justify-content-between">
<Col
lg={3}
sm={12}
className="project-section w-lg-50 w-75 mr-lg-1 mb-5 pr-0 pl-0 "
>
<div className="image-container">
<img
src={Images.weatherThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a href = "https://clinquant-marshmallow-2752bd.netlify.app/" target="_blank" rel="noopener noreferrer">View live</a>
<a href="https://github.com/tin0312/weather-app">View source</a>
<img
src={Images.weatherThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a
href="https://clinquant-marshmallow-2752bd.netlify.app/"
target="_blank"
rel="noopener noreferrer"
>
View live
</a>
<a href="https://github.com/tin0312/weather-app">View source</a>
</div>
</div>
</div>
</div>
<div className="project-content">
<h3 className="project-title">WEATHER APP</h3>
<h4 className="project-stacks">HTML • CSS • React • API </h4>
</div>
</Col>
{/* project section-2 */}
<Col lg = {3} sm = {12} className="project-section w-lg-18 w-75 mb-5 pr-0 pl-0">
<Col
lg={3}
sm={12}
className="project-section w-lg-18 w-75 mb-5 pr-0 pl-0"
>
<div className="image-container">
<img
src={Images.quizThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a href = "https://unrivaled-sorbet-b6c280.netlify.app/" target="_blank" rel="noopener noreferrer">View live</a>
<a href="https://github.com/tin0312/quizApp">View source</a>
<img
src={Images.quizThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a
href="https://unrivaled-sorbet-b6c280.netlify.app/"
target="_blank"
rel="noopener noreferrer"
>
View live
</a>
<a href="https://github.com/tin0312/quizApp">View source</a>
</div>
</div>
</div>
</div>
<div className="project-content">
<h3 className="project-title"> QUIZZICAL</h3>
<h4 className="project-stacks">HTML • CSS • React • API </h4>
</div>
</Col>

{/* Project section-3 */}
<Col lg = {3} sm = {12} className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0">
<Col
lg={3}
sm={12}
className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
>
<div className="image-container">
<img
src={Images.roomsystemThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a href = "http://roomreservation.pythonanywhere.com/" target="_blank" rel="noopener noreferrer">View live</a>
<a href="https://github.com/tin0312/roomBookingSystem">View source</a>
<img
src={Images.roomsystemThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a
href="http://roomreservation.pythonanywhere.com/"
target="_blank"
rel="noopener noreferrer"
>
View live
</a>
<a href="https://github.com/tin0312/roomBookingSystem">
View source
</a>
</div>
</div>
</div>
</div>
<div className="project-content">
<h3 className="project-title">ROOM BOOKING SYSTEM</h3>
<h4 className="project-stacks">
Expand All @@ -70,26 +102,112 @@ export default function Projects() {
</Col>

{/* Project section-4 */}
<Col lg = {3} sm = {12} className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0">
<Col
lg={3}
sm={12}
className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
>
<div className="image-container">
<img
src={Images.chromeExtThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a href = "https://github.com/tin0312/walk-more-than-you-scroll" target="_blank" rel="noopener noreferrer">View source</a>
<img
src={Images.chromeExtThumbNail}
alt="weather-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a
href="https://github.com/tin0312/walk-more-than-you-scroll"
target="_blank"
rel="noopener noreferrer"
>
View source
</a>
</div>
</div>
</div>
</div>
<div className="project-content">
<h3 className="project-title">Walk-As-You-Scroll</h3>
<h4 className="project-stacks">
HTML • CSS • Javascript • jQuery{" "}
</h4>
</div>
</Col>

{/* Project section-5 */}
<Col
lg={3}
sm={12}
className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
>
<div className="image-container">
<img
src={Images.pwAppThumbnail}
alt="pwApp-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a
href="https://dynamic-platypus-74b5b2.netlify.app/"
target="_blank"
rel="noopener noreferrer"
>
View live
</a>
<a
href="https://github.com/tin0312/password-generator"
target="_blank"
rel="noopener noreferrer"
>
View source
</a>
</div>
</div>
</div>
<div className="project-content">
<h3 className="project-title">Password Generator</h3>
<h4 className="project-stacks">HTML • CSS • React • Bootstrap </h4>
</div>
</Col>

{/* Project section-6 */}
<Col
lg={3}
sm={12}
className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
>
<div className="image-container">
<img
src={Images.ecommerceThumbnail}
alt="upcoming-thumb-nail"
className="project-thumb-nail"
/>
<div className="middle">
<div className="text">
<a
href="#"
target="_blank"
rel="noopener noreferrer"
>
In Progress
</a>
<a
href="https://github.com/tin0312/e-commerce"
target="_blank"
rel="noopener noreferrer"
>
View source
</a>
</div>
</div>
</div>
<div className="project-content">
<h3 className="project-title">E-Commerce</h3>
<h4 className="project-stacks">
HTML • SASS • React • Tailwind • NextJS • Prisma • Stripe
</h4>
</div>
</Col>
</Row>
</Container>
);
Expand Down
Binary file added src/images/e-commerceThumbnail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/images/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ export { default as weatherThumbNail} from "./weatherThumbNail.png"
export { default as quizThumbNail} from "./quizThumbNail.png"
export { default as roomsystemThumbNail} from "./roomsystemThumbNail.png"
export { default as chromeExtThumbNail} from "./chromeExtThumbNail.png"

export { default as pwAppThumbnail} from "./pwAppThumbnail.png"
export { default as ecommerceThumbnail} from "./e-commerceThumbnail.png"
Binary file added src/images/pwAppThumbnail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c75d9a5

Please sign in to comment.