tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add work section

Browse Source
This commit is contained in:
Tben 2022-02-04 12:25:05 +01:00
parent f6645e57d1
commit c8640cc9d9
7 changed files with 113 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/PortfolioEntry.jsx Normal file
View File

@ -0,0 +1,52 @@
/**
*
*
* Imports
* ------------------------------------------------------------------------------
*
*/
/** ********************* React/Next Imports */
import React from "react";
import TextShuffler from "./actions/TextShuffler";
/** ~ End React/Next Imports *************** */
/** ********************* Functions and Other Page Imports */
/** ~ End Functions and Other Page Imports *************** */
/**
*
*
* Main Component { Functional }
* ------------------------------------------------------------------------------
* @param {Object} props - React component props including { children }
*
*/
/** ********************* Page Main Component */
export default function PortfolioEntry({ title, description, url, image }) {
// ## Get Contexts
// -----------------------
// ## Javascript Variables
// -----------------------
// ## React Hooks { useState, useEffect, useRef, etc ... }
// -----------------------
// ## Function Return
return (
<div className="portfolio-entry-block">
<h2 style={ { marginTop: "0" } }><TextShuffler textInput={ title } /></h2>
<img src={ image } alt="" />
<span>
<TextShuffler textInput={ description } />
</span>
<div className="hero-ctas-section">
<a href={ url } target="_blank">Visit Site</a>
</div>
</div>
);
// -----------------------
};
/** ~ End Page Main Component *************** */
// export default Header;

8
components/portfolioEntries.json Normal file
View File

@ -0,0 +1,8 @@
[
{
"title": "Next 7 Web Engine",
"description": "Next 7 is an all-in-one web engine featuring a web page builder and a content management system",
"url": "https://next7.io",
"image": "/images/next7screenshot.png"
}
]

1
layouts/general_layout/GeneralHeader.jsx
View File

@ -7,6 +7,7 @@ const GeneralHeader = () => {
<nav> <nav>
<a href="/">Home</a> <a href="/">Home</a>
<a href="/about">About Me</a> <a href="/about">About Me</a>
<a href="/work">My Work</a>
<a href='/documents/Benjamin_Toby_CV.pdf' target="_blank">My Resume</a> <a href='/documents/Benjamin_Toby_CV.pdf' target="_blank">My Resume</a>
<a href="/contact">Contact Me</a> <a href="/contact">Contact Me</a>
</nav> </nav>

29
pages/work.jsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react'
import Head from 'next/head'
import TextShuffler from '../components/actions/TextShuffler'
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
import PortfolioEntry from '../components/PortfolioEntry'
const about = () => {
const portfolioEntries = require("../components/portfolioEntries.json");
return (
<GeneralLayout>
<Head>
<title>My Work | Tben</title>
<meta name="description" content="Some of my Work" />
</Head>
<h1><TextShuffler textInput="My Work" /></h1>
<span className='hero-sub-text' style={ { marginTop: "-30px", marginBottom: "20px", display: "block" } }>
<TextShuffler textInput="Some of my work ..." />
</span>
<div className='portfolio-entries-block'>
{ portfolioEntries.map(entry => <PortfolioEntry key={ entry.title } title={ entry.title } description={ entry.description } url={ entry.url } image={ entry.image } />) }
</div>
</GeneralLayout>
)
}
export default about

BIN
public/images/next7screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 485 KiB

20
styles/main.css
View File

@ -243,6 +243,26 @@ nav a:hover {
height: 100%; height: 100%;
} }
/*############################################# -- Portfolio page */
.portfolio-entries-block {
display: flex;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}
.portfolio-entry-block {
max-width: 700px;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px;
}
.portfolio-entry-block img {
width: 100%;
height: 300px;
object-fit: contain;
object-position: left top;
}
/*############################################# -- Contact Forms */ /*############################################# -- Contact Forms */
form { form {
margin-top: 40px; margin-top: 40px;